Prefacio
Alibaba, los pasantes de front-end web tomarán el examen en línea. De hecho, me gustaría agregar algo de conocimiento al novato. Así que Baidu y Google tenían las preguntas de prueba escritas por front-end anteriores para el reclutamiento del campus de Alibaba, y sintieron que realmente estaban despreciados y que no podían entenderlas en absoluto. Ah, el front-end de Ribaba es una prueba escrita en línea.
Cuando vi esta pregunta, sentí que debería encapsular algunos de sus métodos de uso común, al igual que jQuery. Algunos métodos están hechos para lograr la compatibilidad del navegador o las clases de herramientas, que de hecho son beneficiosas para el desarrollo futuro.
Html
En aras de la explicación, escribamos primero html
La copia del código es la siguiente:
<p> Encuéntrame </p>
<div> también encuéntrame </div>
Omitimos CSS.
Métodos de implementación
1 GetElementsByClassName
La copia del código es la siguiente:
console.log (document.getElementsByClassName ("A"));
console.log (document.getElementsByClassName ("AB"));
Aparecen los resultados (Firefox 27.0)
De hecho, creo que este método debería poder resolver el problema anterior, pero después de observar su compatibilidad, creo que debería ser mejor encontrar otro método.
2 Queryselectorall
La copia del código es la siguiente:
console.log (document.QueryselectorAll (".a"));
console.log (document.queryselectorAll (".b, .a"));
Veamos cuál es el resultado? ¿Cuál es la diferencia de lo anterior?
El resultado del segundo es diferente.
En realidad, la compatibilidad de este método no es muy buena
Según los problemas de compatibilidad anteriores (después de todo, todavía represento la mayoría del navegador chino IE6/7/8), bien podría hacer una forma de lograrlo yo mismo.
3 QueryNodesbyClass
Creo que debería hablar de mis ideas primero
(1) Obtenga la página completa primero
(2) iterar a través de cada nodo y obtener su cadena de nombre de clase
(3) Opere la cadena de nombre de clase, primero divídala en una matriz con espacios, luego use un objeto para establecer su clave en cada elemento de matriz, luego el valor correspondiente es verdadero
(4) El problema ahora se basa en los parámetros en los que pasó (por ejemplo, un parámetro es "selector", dos son "Selector_1 Selector_2", y así sucesivamente), y luego lo convierten en una matriz, y cada elemento de matriz es Utilizado como anteriormente, el valor clave del objeto correspondiente a la cadena ClassName en nuestro nodo antes, si coincide, es verdadero, y si no lo hace, no está definido.
Ahora damos nuestro código
La copia del código es la siguiente:
función stringToObj (string) {
var arr = string.split ("") .sort ();
resultado var = {};
para (var i = arr.length-1; arr [i]; i-) {
resultado [arr [i]] = true;
}
resultado de retorno;
}
La copia del código es la siguiente:
función stringToArray (string) {
var arr = string.split ("") .sort ();
resultado var = [];
para (var i = arr.length-1; arr [i]; i-) {
resultado.push (arr [i]);
}
resultado de retorno;
}
La copia del código es la siguiente:
función QueryNodesByClass (classname) {
// pensamientos (1)
var all = document.getElementsByTagName ("*"), len = all.length, result = [];
var cname = stringToArray (classname); // pensamientos (4)
para (var i = 0; i <len; i ++) {// transfiere las ideas correspondientes de cada nodo (2)
// La correspondiente es la idea (3), es decir, el papel del método StringToObj
var dom_cname = stringToObj (all [i] .classname), cname_len = cname.length;
for (var j = 0; j <cname_len; j ++) {
if (! DOM_CNAME [CNAME [J]])
romper;
}
if (j == cname_len)
{
resultado.push (todos [i]);
}}
resultado de retorno;
}