English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En el HTML DOM (Modelo de Objetos de Documento), cada parte es un nodo.
El nodo es la unidad de组成 más básica de la estructura DOM, cada etiqueta HTML es un nodo de la estructura DOM.
El documento es un... nodo de documento.
Todos los elementos HTML son... nodos de elemento
Todos los atributos HTML son... nodos de atributo
El texto se inserta en el elemento HTML es... nodo de texto
Los comentarios son... nodos de comentario.
El tipo de nodo más básico es el tipo Node, todos los otros tipos heredan de Node, las operaciones DOM son a menudo la parte más costosa de JavaScript, por lo que los problemas de NodeList son los más comunes. Nota: NodeList es 'dinámico', lo que significa que cada vez que se accede al objeto NodeList, se ejecuta una consulta, aunque esto aumenta el costo, garantiza que todos los nodos recién añadidos puedan accederse en NodeList.
Todos los nodos de elemento tienen propiedades y métodos comunes, vamos a verlos en detalle:
Vamos a ver primero las propiedades comunes más utilizadas:
1 element.id : establece o devuelve el id del elemento.
2 element.innerHTML : establece o devuelve el contenido del elemento, puede incluir las etiquetas de subnodos y el contenido
3 element.innerText : establece o devuelve el contenido del elemento, sin incluir las etiquetas de subnodos ni el contenido
4 element.className : establece o devuelve el nombre de la clase del elemento
5 element.nodeName : devuelve el nombre del nodo en mayúsculas
6 element.nodeType : devuelve el tipo de nodo de este nodo,1representa el nodo de elemento 2representa el nodo de atributo...
7 element.nodeValue : devuelve el valor del nodo, para los nodos de elemento este valor es null
8 element.childNodes : devuelve el objeto nodelist de los nodos hijos del elemento, nodelist es similar a un array, tiene una propiedad length, se puede acceder al valor de un índice específico utilizando corchetes [index] (también se puede usar el método item(index)). Pero nodelist no es un array.
9 element.firstChild/element.lastChild : devuelve el primer nodo/último nodo hijo (incluso comentarios y texto)
10 element.parentNode : devuelve el nodo padre de este nodo
11 element.previousSibling : devuelve el nodo anterior同级节点（包括注释节点和 texto)
12 element.nextSibling : devuelve el siguiente nodo同级节点（包括注释节点和 texto)
13 element.chileElementCount : devuelve el número de elementos hijos (sin incluir nodos de texto ni comentarios)
14 element.firstElementChild /lastElementChild Devuelve el primero/Último hijo (sin incluir nodos de texto ni nodos de comentario)
15 element.previousElementSibling/nextElementSibling Devuelve el anterior/Elemento hermano siguiente (sin incluir nodos de texto ni nodos de comentario)
16 element.clientHeight/clientWidth Devuelve la altura visible del contenido/Ancho (sin incluir borde, márgenes o barra de desplazamiento)
17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top Devuelve la altura del elemento/Ancho/Desplazamiento relativo al borde izquierdo del padre/Desplazamiento derecho (incluso borde y relleno, sin incluir márgenes)
18 element.style Establece o devuelve las propiedades de estilo del elemento, ejemplo: element.style.backgroundColor Nota: Diferente a CSS, los atributos de style deben eliminar la barra de subrayado, la segunda palabra La primera letra debe estar en mayúscula
19 element.tagName Devuelve el nombre de la etiqueta del elemento (en mayúsculas)
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px sólido morado rebecca;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Por favor, selecciona una técnica：<br/>
<input type="radio" name="gongfa" value="jysg">Gong del Yáng del Nono<br/>
<input type="radio" name="gongfa" value="qkdny">Gran Movimiento de la Nube y del Tiempo<br/>
<input type="radio" name="gongfa" value="khbd">Manual de la Flor de la Guía<br/>
<input type="radio" name="gongfa" value="xxdf">Método de la Estrella del Dragón Chino<br/>
</form>
<p>¡Por favor, piensa bien, caballero!!!</p><!--Etiqueta de comentario-->
<p>Artes marciales recomendadas-->Guía del flor de loto</p>
<script>
//Añade el código de ejemplo de js aquí
var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>
Resultados mostrados por el navegador:
También hay ciertas propiedades exclusivas
Las propiedades exclusivas son aquellas que son exclusivas de un tipo de etiqueta. Por ejemplo, la etiqueta <a> tiene las propiedades href y target. <img> tiene la propiedad src; <form> tiene las propiedades entype y action...
a_element.href retorna el hipervínculo apuntado por el nodo actual
Veamos algunos métodos comunes y utilizados:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Por favor, selecciona una técnica：<br/>
<input type="radio" name="gongfa" value="jysg">Gong del Yáng del Nono<br/>
<input type="radio" name="gongfa" value="qkdny">Gran Movimiento de la Nube y del Tiempo<br/>
<input type="radio" name="gongfa" value="khbd">Manual de la Flor de la Guía<br/>
<input type="radio" name="gongfa" value="xxdf">Método de la Estrella del Dragón Chino<br/>
</form>
<p>¡Por favor, piensa bien, caballero!!!</p>
<script>
//Añade el código de ejemplo de js aquí
</script>
</body>
</html>
(Todos los códigos de ejemplo de js a continuación se basan en el código html de ejemplo de este documento como objeto de experimentación)
1 element.appendChild(nodeName) Añade un nuevo nodo hijo al elemento, como el último nodo hijo, y devuelve el nodo hijo. Si deseas agregar un nuevo elemento al DOM de HTML, primero debes crear el elemento y luego agregarlo al elemento existente.
js ejemplo de código:
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重选择");
a.appendChild(textnode)
2 element.getAttribute(para) Devuelve el valor del atributo especificado del nodo del elemento.
js ejemplo de código:
var a=document.getElementById('first_form');
console.log(a.getAttribute('name')) //Salida de consola del valor de name
3 element.getAttributeNode(para) Devuelve el nodo de atributo especificado.
js ejemplo de código:
var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name')) //Salida de consola del nodo de atributo name
4 element.getElementsByTagName(para) Devuelve una colección de todos los elementos hijos con el nombre de etiqueta especificado.
js ejemplo de código:
var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input')) //Salida de consola
5 element.hasAttribute(para) Si el elemento tiene el atributo especificado, devuelve true, de lo contrario devuelve false.
js ejemplo de código:
var a=document.getElementById('first_form');
console.log(a.hasAttribute('name')) //Salida de consola
6 element.insertBefore(insertNode,appointedNode) Inserta un nuevo nodo antes del nodo hijo existente especificado.
js ejemplo de código:
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天马流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2});
a.insertBefore(newNode2,inputList[3});
a.insertBefore(br,inputList[3});
7 element.removeAttribute(); Remueve el atributo especificado del elemento.
Ejemplo de código js:
var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))
8 element.removeChild() Eliminar el nodo hijo del elemento. El nodo eliminado, aunque ya no está en el árbol de documento, sigue en la memoria y puede ser citado en cualquier momento.
Ejemplo de código js:
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3});
9 element.replaceChild(newNode,replaceNode) Reemplazar el nodo específico con un nuevo nodo.
10 element.setAttribute(attrName,attrValue) Establecer o cambiar el valor de un atributo específico.
Ejemplo de código js:
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
11 element.setAttributeNode() Modificar el nodo de atributo específico
Ejemplo de código js:
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)
12 nodelist.item() Devuelve el nodo ubicado en el índice específico del NodeList.
Ejemplo de código js:
var a=document.getElementsByTagName('input')
console.log(a.item(2))
Esto es todo lo que les presento el editor sobre la explicación detallada de las propiedades y métodos de los objetos de elementos en DOM del js básico, espero que todos lo apoyen y griten tutorial~