Tipo de nodo
tipo nodo
Aquí hay algunos valores importantes de Nodetype:
1: elemento elemento
2: ATTR
3: texto de texto
8: Comentarios
9: documento de documento
NodeName, NodeValue
Relación de nodo
Nodos infantiles: cada nodo tiene una propiedad de nodos infantiles, que posee un objeto nodelista
FirstChild: equivalente a los nodos infantiles [0]
LastChild: equivalente a los nodos infantiles.length-1
Al mismo tiempo, se puede acceder a otros nodos en la misma lista utilizando las propiedades anteriores y nextsiBling de cada nodo en la lista.
Nodo de operación
appendChild ()
El método AppendChild () se usa para agregar un nodo al final de la lista de nodos de niños. Después de agregar un nodo, los punteros de la relación del nuevo nodo, el nodo principal y el último nodo secundario de los nodos infantiles se actualizarán en consecuencia.
insertBefore ()
El método InsertBefore () acepta dos parámetros: el nodo a insertar y el nodo a referenciar.
// Después de la inserción, se convierte en el último nodo infantil returnedNode = somenode.insertbefore (newnode, null); // Después de la inserción, se convierte en el primer nodo returnedNode = somenode.insertbefore (newnode, somenode.firstchild); // insertar antes del último niño nodo devuelto node = somenode
ReplaceChild ()
ReplaceChild () acepta dos parámetros, el nodo a insertar y el nodo a reemplazar
var returnedNode = somenode.replaceChild (newnode, somenode.firstchild);
removechild ()
Solo retire y no reemplace los nodos.
var exFirstChild = somenode.removechild (somenode.firstchild);
clonenode ()
Artículo 1
artículo 2
artículo 3
var profundo list = mylist.clonenode (true); console.log (profundoList.length); // 3var sallowlist = mylist.clonenode (falso); console.log (showlist.childnodes.length); // 0
Tipo de documento
El nodo del documento tiene las siguientes características:
Hijos del documento
var html = document.documentelement; // Obtenga una referencia a <html> console.log (html === document.childnodes [0]); // trueConsole.log (html === document.firstchild); // verdadero
Información de documento
// Obtener el título del documento var originaltitle = document.title; // Establecer el título del documento document.title = "nuevo título de página"; // Obtenga la urlvar completa url = document.url; // Obtener el nombre de dominio var domain = document.domain; // Obtener el referente urlvar = document.referrer; // Suponga que la página proviene del p2p.wrox.com Document.domain = "wrox.com"; // exitoso document.domain = "nczonline.net"; // Fallido
Llamar documento.getElementById ("MyElement"); El resultado devolverá el elemento <input> como se muestra a continuación;
La mejor manera es no hacer el atributo de nombre del campo de formulario igual que la ID de otros elementos.
<input type = "text" name = "myElement" value = "text campo"> <div id = "myelement"> a div </div>
Colección especial
Redacción de documentos
<html> <fead> <title> document.write () Ejemplo 3 </title> </head> <body> <script type = "text/javascript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>Las cadenas <// script> no se considerarán etiquetas cerradas para etiquetas de script externos, por lo que no habrá contenido innecesario en la página.
Tipo de elemento
El nodo del elemento tiene las siguientes características:
Para acceder al nombre de la etiqueta de un elemento, puede usar el atributo NodeName o el atributo TagName;
<div id = "myDiv"> </div> var div = document.getElementById ("myDiv"); console.log (div.tagname); // divconsole.log (div.nodeName); // divif (element.tagname == "div") {// No puede comparar así, es fácil cometer errores} if (element.tagname.tolowercase == "div") {// Esto es mejor (para cualquier documento)}Obtener características
Existen tres métodos DOM principales para las características operativas, a saber, getAttribute (), setAttribute () y eliminarTribute ();
Tenga en cuenta que el nombre del atributo pasado a getAttribute () es el mismo que el nombre de atributo real. Impresión: para obtener el valor de atributo de la clase, debe pasar en "clase" en lugar de "classname".
var div = document.getElementById ("myDiv"); console.log (div.getAttribute ("class")); // bdCrear elementos
Use el método document.createElement () para crear un nuevo elemento.
Hijos del elemento
Antes de realizar una operación, generalmente debe verificar primero la propiedad NodeType, como se muestra en el siguiente ejemplo:
for (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodeType == 1) {// realizar algunas operaciones}}Tipo de texto
Los nodos de texto tienen las siguientes características:
Crear un nodo de texto
Puede usar document.createTextNode () para crear un nuevo nodo de texto.
Nodos de texto normalizados
Normalizar()
Nodos de texto divididos
Splittext ()
Tipo de comentario
El nodo de comentarios tiene las siguientes características:
Tecnología de operación DOM
Formulario de operación
// crea tableVar table = document.createElement ("table"); table.border = 1; table.width = "100%"; // crea tbodyvar tbody = document.createElement ("tbody"); table.appendChild (tbody); // crea la primera línea tbody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .Cells [0] .AppendChild (document.ceateTextNode ("celda 1,1")); tbody.rows [0] .insertCell (1); tbody.rows [0] .Cells [1] .AppendChild (document.creatEtEtTeTet (Document 2,1 ")); // Cree la segunda línea tbody.insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .Cells [0] .AppendChild (document.CreateTextNode (" Cell Cell 1,2 ")); tbody.rows [1] .insertcell (1); tbody.rows [1] .Cells [1] .AppendChild (document.CreateTextNode (" Cell 2,2 ")); document.body.appendChild (tabla);API selectora
método QuerySelector ()
// Obtenga el elemento del cuerpo var tbody = document.querySelector ('Body'); // Obtenga el elemento con ID "myDiv" var myDiv = document.queryselector ("#myDiv"); // Obtener el primer elemento con clase "seleccionado" var seleccionado = document.querySelector (". Seleccionado"); // Obtenga el primer elemento de imagen con la clase "var" var img = varg = document.body.queryselector ("img.button");método QuerySelectorAll ()
// Obtenga todos los elementos <em> en un <div> (similar a getElementsBytagName ("em")) var ems = document.getElementById ("myDiv"). QuerySelectorAll ("em"); // Obtenga todos los elementos de clase "seleccionados" seleccionado seleccionado = document.querySelectorAll (". Seleccionado"); ///2S <strong> Elementos en todos los elementos de clase "seleccionados" seleccionado " document.QueryselectorAll ("p fuerte");Html5
Extensiones relacionadas con la clase
Método GetElementsByClassName ():
Este método se puede llamar a través del objeto de documento y todos los elementos HTML.
// Obtenga todos los elementos que contienen "nombre de usuario" y "actual" en la clase. El orden de los nombres de clases no importa var allCurrentUsernames = document.getElementsByClassName ("UserName actual"); // Obtenga todos los elementos con el nombre de clase "seleccionado" en el elemento con id "myDiv" var seleccionado = document.getElementById ("myDiv"). GetElementsByClassName ("seleccionado");Gestión de enfoque
HTML5 también agrega la función de ayudar en la gestión de DOM Focus. El primero es la propiedad de documento. ActiveElement, que siempre se refiere al elemento en el DOM que actualmente ha ganado el enfoque.
var button = document.getElementById ("myButton"); button.focus (); alerta (document.activeElement === botón); // verdaderoPor defecto, cuando el documento se acaba de cargar, el documento. ActiveElement se almacena en el documento. ActiveElement con una referencia al elemento Document.Body. Durante la carga de documentos, el valor de documento. ActiveElement es nulo.
Además, se ha agregado el método document.hasfocus (), que se utiliza para determinar si el documento ha ganado el enfoque.
var botón = document.getElementById ("myButton"); botton.focus (); alert (document.hasfocus ()); // verdadero