Colección de puntos de conocimiento de JavaScript: obtención de elementos y nodos

[Recomendaciones relacionadas: video tutorial de JavaScript, interfaz web]

Obtenga el elemento

• a través del ID ( getElementById )
• a través del atributo de nombre ( getElementsByName )
• a través del nombre de la etiqueta ( getElementsByTagName )
• a través del nombre de la clase ( getElementsByClassName )
• Obtenga un elemento a través del selector ( querySelector )
• a través del selector Un método de grupo de elementos ( querySelectorAll )
• para obtener html ( document.documentElement )
• Método para obtener el cuerpo ( document.body )

1. Obtener por ID (getElementById)

// 1 Obtener el nodo del elemento // por id (buscar elementos por identificación, distingue entre mayúsculas y minúsculas, si hay varias identificaciones, solo se encontrará la primera)
    document.getElementById('p1');

• El contexto debe ser un documento.
• Se deben pasar parámetros. Los parámetros son de tipo cadena y se utilizan para obtener la identificación del elemento.
• El valor de retorno solo obtiene un elemento y devuelve nulo si no se encuentra.

2. Buscar elementos por nombre de clase (getElementsByClassName)

// Buscar elementos por nombre de clase. Separe varios nombres de clase con espacios para obtener una HTMLCollection (una colección de elementos con un atributo de longitud, y puede acceder a un elemento dentro a través del número de índice). )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• El parámetro es el nombre de clase del elemento.
• El valor de retorno es una matriz similar a una matriz. Si no se encuentra, se devuelve una matriz vacía

3. A través del atributo de nombre (getElementsByName)

// Busque a través del atributo de nombre y devuelva una NodeList (una colección de nodos con un atributo de longitud que puede ser). acceder a través del número de índice)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. Por nombre de etiqueta (getElementsByTagName)

// Encuentra elementos por nombre de etiqueta y devuelve una HTMLCollection
    document.getElementsByTagName('p');

• El parámetro es para obtener el atributo de nombre de etiqueta del elemento, que no distingue entre mayúsculas y minúsculas.
• El valor de retorno es una matriz de clase. Si no se encuentra, se devuelve una matriz vacía

5. Obtenga un elemento a través del selector (querySelector)

El parámetro document.querySelector('.animated')

• es el selector, como por ejemplo: "p. nombre de clase".
• Devuelve un solo nodo, si hay varios elementos coincidentes, devuelve los primeros

6. Obtenga un conjunto de elementos a través del selector (querySelectorAll)

document.querySelector('.animated')

• El valor de retorno es una matriz de clases

para obtener el nodo

en el Modelo de objetos de documento (DOM), cada nodo es un objeto. Los nodos DOM tienen tres atributos importantes

: 1. nodeName: el nombre del nodo

2. nodeValue: el valor del nodo

3. nodeType: el tipo de nodo

1. atributo nodeName: el nombre del nodo, que es de solo lectura .

• El nombre de nodo del nodo del elemento es el mismo que el nombre
• de la etiqueta. El nombre de nodo del nodo de atributo es
• siempre el nombre de nodo del nodo de texto.
• El nombre de nodo del nodo de documento es siempre #documento

.

Atributo

nodeValue: El valor del nodo.

• El nodoValue del elemento no está definido o es nulo.
• El nodoValue es el
• atributo de texto del nodo. El valor nodo es el valor del atributo.

del nodo, que es de sólo lectura. Los siguientes tipos de nodos de uso común:

• Tipo de elemento Tipo de nodo
• Elemento 1
• Atributo 2
• Texto 3 El espacio también devuelve 3
• Comentario 8
• Documento 9

Cree un nodo:

1. Cree un nodo: createElement('')

// Crea un elemento. Se acaba de crear y no se agrega al html. Debe usarse junto con appendChild. pag');
    elem.id = 'prueba';
    elem.style = 'color: rojo';
    elem.innerHTML = 'Soy un nodo recién creado';
    document.body.appendChild(elem);

2. Insertar nodo:

• el uso de appendChild () es: parent.appendChild(child)
• agregará el nodo secundario al final del nodo principal.
• Si el nodo secundario existe originalmente, el nodo original será. eliminado Agregue el nuevo nodo al final, pero el evento permanecerá

var oNewp=document.createElement("p");
      var oText=document.createTextNode("Hola mundo");
      oNewp.appendChild(oText);

2-1. Insertar nodo:

• el uso de insertBefore() es parent.insertBefore(newNode,refNode)

;
      document.body.insertBefore(oNewp,oOldp);

Eliminar nodo

1. Eliminar nodo:

• el uso de removeChild es: parent.removeChild(child)
• Si elimina un nodo secundario que no es un elemento principal, se informará un error

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Clonar nodo

1. Clonar nodo: parent.cloneNode() falso o verdadero

• Clonar nodo (debe aceptar un parámetro para indicar si se copia el elemento)

// Clonar nodo (debe aceptar un parámetro para indicar si se copia el elemento) elemento)
    formulario var = document.getElementById('prueba');
    var clon = form.cloneNode (verdadero);
    clon.id = 'prueba2';
    document.body.appendChild(clone);

Reemplazar nodo

1. Reemplazar método de nodo node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

del cuadro de fragmentos de documento

• : al agregar una gran cantidad de nodos a un documento, será muy lento si se agregan uno por uno. En este caso, puede usar fragmentos de documento para. agréguelos al documento de una vez
• Sintaxis: document. createDocumentFragment(
• )

;
    {
        var inicio = Fecha.ahora();
        var cadena = '', li;
        var ul = document.getElementById('ul');
        fragmento var = document.createDocumentFragment();
        para(var i=0; i<10000; i++)
        {
            li = documento.createElement('li');
            li.textContent = ''+i+'ésimo nodo hijo';
            fragmento.appendChild(li);
        }
        ul.appendChild(fragmento);
        console.log('Consume mucho tiempo:'+(Date.now()-start)+'millisegundos'); // 63 milisegundos})();

[Recomendaciones relacionadas: tutoriales en vídeo de JavaScript, interfaz web]

Las anteriores son Puntos de conocimiento de JavaScript Organice los detalles de obtención de elementos y nodos. Para obtener más información, preste atención a otros artículos relacionados en la red de código fuente.