Resumen de los métodos de operación de nodo DOM JavaScript DOM

Hay tres tipos principales de nodos: nodos de elementos, nodos de atributo y nodos de texto.

Lo principal de DOM es agregar, eliminar, modificar y verificar nodos de elementos y nodos de atributos. Lo siguiente introducirá las operaciones en nodos de elementos y las operaciones en nodos de atributos respectivamente.

Nodo de elemento

controlar

Antes de agregar, eliminar y modificar el DOM, primero debe encontrar el elemento correspondiente. Los métodos de búsqueda específicos son los siguientes:

 getElementById () // Obtenga un solo nodo getElementsBytagName () // Obtenga la matriz de nodo nodo GetElementsByName () // Obtenga la matriz de nodo Nodelist

Al mismo tiempo, también puede usar los atributos del nodo de elemento para obtener sus nodos y nodos de texto para padres e hijos:

Nodos infantiles

 Node.childnodes // Obtener la lista de nodos infantiles nodelist; Tenga en cuenta que los descansos de línea se cuentan como nodos de texto en el navegador. Si obtiene la lista de nodos de esta manera, se requiere filtrar nodo.firstchild // Devuelve el primer nodo infantil.

Nodo principal

 Node.parentnode // Devuelve el nodo nodo principal.OwnerDocument // Devuelve el nodo del antepasado (todo el documento)

Nodos compatriota

 Node.previoussibling // Devuelve el nodo anterior, si no, return nullnode.nextsibling // devuelve el siguiente nodo

aumentar

Para agregar un nuevo nodo, primero debe crear un nodo e insertar el nodo recién creado en el DOM. Por lo tanto, los siguientes son los métodos para crear nodos e insertar nodos, y el método de replicar nodos también se introduce en la creación de nodos.

Crear un nodo

 createElement () // Cree un nuevo nodo de elemento de acuerdo con el nombre de la etiqueta especificado

Cree fragmentos de código (para evitar la actualización frecuente del DOM, puede crear fragmentos de código primero y luego agregarlos al DOM después de completar todas las operaciones de nodo)

 CreatedOcumentFragment ()

Nodo de replicación

 clonedNode = node.clonenode (boolean) // Solo hay un parámetro, pasar en un valor booleano, verdadero significa copiar todos los nodos infantiles bajo el nodo; falso significa copiar solo el nodo

Insertar nodo

 /*Insertar nodo*/parentnode.appendChild (ChildNode); // Agregar un nuevo nodo al final de la lista de nodos infantiles parentnode.insertbefore (newnode, targetNode); // Inserte NewNode en TargetNode/*Inserte el código HTML*/node.insertadJacenthtml ('antes de Begin', html); // inserta el código nodo.insertadjacenthtml ('Afterbegin', html); // inserta el código nodo.insertadjacenthtml ('Afterbegin', html); // inserta el código node.insertAdJAcenthtml ('antes de lo anterior', html); // Inserte el código después del último elemento secundario del nodo del elemento. // inserta el código después del elemento

Reemplazar nodos

 parentNode.replace (NewNode, TargetNode); // reemplazar TargetNode con NewNode

borrar

Eliminar nodos

 parentNode.removechild (ChildNode); // Eliminar el nodo de destino Node.ParentNode.RemoVeChild (nodo); // use sin conocer el nodo principal

Nodo de atributo

Los nodos de atributo de operación son para agregar, eliminar, modificar y verificar los estilos DOM. Existen diferentes métodos operativos para estilos en línea, estilos en línea y estilos externos; Los estilos obtenidos por varios métodos también se dividen en legibles, escritos y de solo lectura.

Obtener estilos CSS directamente

 node.style.color // legible o escrito

Las propiedades y métodos de estilo en sí

 node.style.csstext // Obtenga la cadena de estilo en línea de nodo Node.style.length // Obtener el número de estilos en línea node.style.item (0) // Obtener el estilo en la posición especificada

Obtener y modificar los estilos de elementos

HTML5 proporciona un nuevo atributo para Elementos: clase de clases para implementar la adición, eliminación, modificación y búsqueda de hojas de estilo de elementos. La operación es la siguiente:

 node.classList.Add (valor); // Agregar la clase especificada node.classList.contains (valor); // Determinar si el elemento contiene la clase especificada. Si hay un trueNode.classList.remove (valor); // eliminar la clase especificada node.classList.toggle (valor); // Eliminar si hay una determinada clase y agregue la clase especificada si no hay.

Métodos para modificar las características de DOM

 Node.getAttribute ('id') // get node.setAttribute ('id') // set node.removeattribute () // eliminar node.attributes // Obtener todas las características DOM

Método de solo lectura

GetComputedStyle es el método de ventana. Puede obtener todos los valores de atributos CSS de uso final del elemento actual, pero son de solo lectura. Tiene dos parámetros, el primero es el nodo entrante, el segundo puede transmitir: Hover ,: Blur, etc. para obtener su estilo de pseudo-clase, y si no, se pasará nulo.

Sin embargo, IE no admite el método GetComputedStyle, y CurrentStyle se puede usar para mantener la compatibilidad:

 Window.getComputedStyle? Window.getComputedStyle (nodo, nulo): node.CurrentStyle

El resumen anterior de los métodos de operación de nodo DOM JavaScript es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.