Después de comprender los marcos y nodos de DOM (modelo de objetos de texto), lo más importante es usar estos nodos para procesar páginas web HTML
Para un nodo de nodo DOM, hay una serie de propiedades y métodos para usar. Comúnmente utilizados son la siguiente tabla.
Mejorado: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Acceso a los nodos
BOM proporciona algunos métodos de límite para acceder a nodos. Comúnmente utilizados son GetElementsBytagName () y GetElementById ()
La copia del código es la siguiente:
<script type = "text/javaScript">
function searchdom () {
var oli = document.getElementsBytagName ("li");
var j = oli.length;
var j2 = oli [5] .tagname;
var j3 = oli [0] .childnodes [0] .nodeValue;
document.write (j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<Body>
<Body onload = "searchdom ()">
<Div ID- "en"> </div>
<ul> Lenguaje del cliente
<li> html </li>
<li> JavaScript </li>
<li> CSS </li>
</ul>
<ul> Lenguaje del lado del servidor
<li> ASP.NET </li>
<li> jsp </li>
<li> php </li>
</ul>
</body>
document.getElementById ()
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
función findid () {
var j4 = oli2.tagname;
document.write (j4);
}
var oli2 = document.getElementById ("posada");
oli2.onclick = findid;
}
</script>
<li id = "inn"> php </li>
La copia del código es la siguiente:
<html>
<Body id = "myid">
<div> </div>
<script type = "text/javaScript">
x = document.getElementsBytagName ('div') [0];
document.write ("Div CSS Clase:" + X.ClassName);
document.write ("<Br />");
document.write ("Una forma alternativa:");
document.write (document.getElementById ('myID'). classname);
</script>
</body>
</html>
// ID Get ClassName
2. Detectar el tipo de nodo
El tipo de nodo se puede detectar a través del tipo nodo del nodo, y un parámetro devuelve 12 valores enteros.
Formato de expresión como document.nodeType
Lo que es realmente útil es los tres tipos mencionados por los nodos modelo en el modelo DOM (I)
Nodos de elementos, nodos de texto y nodos de atributo
1. El nodo de elemento devuelve el valor del nodo de elemento es 1
2. El nodo de atributo devuelve el valor del nodo de atributo es 2
3. El valor de retorno del nodo de texto es 3
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
función findid () {
var j5 = oli2.nodeType;
document.write ("NodeType:" + J5 + "<br>");
}
var oli2 = document.getElementById ("posada");
oli2.onclick = findid;
}
</script>
<li id = "inn"> css </li>
Return: NodeType: 1
Esto significa que algún nodo se puede procesar por separado, lo cual es muy práctico cuando se busca nodos. Se discutirá más tarde.
3. Use la relación padre-hijo-hermano para encontrar nodos
En el nodo de acceso de la primera sección, use el atributo de nodos infantiles del nodo para acceder al nodo de texto contenido en el nodo del elemento.
Esta sección utiliza la relación padre-hijo de los nodos para encontrar nodos
*Use los atributos de HascildNodes and ChildNodes para obtener todos los nodos contenidos en este nodo
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<script language = "javaScript">
window.onload = function mydomiseSpector () {
var oUl = document.getElementById ("myList"); // consigue la etiqueta <ul>
var domstring = "";
if (oul.haschildnodes ()) {// juzga si hay nodos infantiles
var och = oUl.childNodes;
para (var i = 0; i <och.length; i ++) // busca uno por uno
Domstring + = och [i] .nodename + "<br>";
}
document.write (domstring);
}
</script>
</ablo>
<Body>
<ul id = "mylist">
<li> Costillas dulces y agrias </li>
<li> CAGA CABA VADIDA PEROR </li>
<li> Kimchi Fish </li>
<li> Chestnut Roast Chicken </li>
<li> mapo tofu </li>
</ul>
</body>
4.dom obtiene el nodo principal del nodo
La copia del código es la siguiente:
<script language = "javaScript">
window.onload = function () {
var food = document.getElementById ("myDarfood");
document.write (Food.ParentNode.tagname)
}
</script>
</ablo>
<Body>
<ul>
<li> Costillas dulces y agrias </li>
<li> CAGA CABA VADIDA PEROR </li>
<li> Kimchi Fish </li>
<li id = "myDearfood"> Chestnut Roast Chicken </li>
<li> mapo tofu </li>
</ul>
// volver a UL
Usando el nodo principal, el nodo principal del nodo especificado se obtuvo con éxito
5. Use la propiedad ParentNode
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<script language = "javaScript">
window.onload = function () {
var food = document.getElementById ("myDarfood");
var patentSm = food.ParentNode;
while (pathenelm.classname! = "colorido" && plateelm! = document.body)
ParentElm = ParentElm.ParentNode; // mira hacia arriba
document.write ("Tagename:"+ParentElm.tagname+"<br>");
document.write ("Claaname:"+ParentElm.ClassName+"<br>");
document.write ("typeof:"+typeof (food)+"<br>");
}
</script>
</ablo>
<Body>
<div>
<ul>
<span>
<li> Costillas dulces y agrias </li>
<li> CAGA CABA VADIDA PEROR </li>
<li> Kimchi Fish </li>
<li id = "myDearfood"> Chestnut Roast Chicken </li>
<li> mapo tofu </li>
</span>
</ul>
</div>
</body> <br> // salida <br> // tagename: div <br> Claaname: colorido <br> typyof: objeto
Comience con un nodo infantil y busque el nodo principal hacia arriba hasta que el nombre de clase del nodo sea "colorido"
6. Hermandad deldom
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<script language = "javaScript">
window.onload = function () {
var alimentos = document.getElementById ("myDarfood");
var nextf = foods.nextsibling;
alerta ("nextsibling:" +nextf.tagname +"<br>");
}
</script>
</ablo>
<Body>
<div>
<ul>
<span>
<li> Costillas dulces y agrias </li>
<li> CAGA CABA VADIDA PEROR </li>
<li> Kimchi Fish </li>
<li id = "myDearfood"> Chestnut Roast Chicken </li>
<li> mapo tofu </li>
<li> mapo tofu </li>
<li> mapo tofu </li>
</span>
</ul>
</div>
</body>
Se ve genial para acceder a los nodos hermanos utilizando las propiedades de NextSiBling y AnteriorsiBling.
Pero solo funciona para IE Browser
Para tener una buena compatibilidad con el código, NodeType debe usarse para hacer el juicio
Lo siguiente es compatibilidad:
La copia del código es la siguiente:
<Evista>
<title> hermanos </title>
<script language = "javaScript">
función nextsib (nodo) {
var templast = node.parentnode.lastchild;
// juzga si es el último nodo, si es así, regresa nulo
if (node == Templast)
regresar nulo;
var tempoBj = node.nextsibling;
// busca los nodos hermanos posteriores uno por uno hasta que se encuentre el nodo del elemento
while (tempobj.nodetype! = 1 && tempobj.nextsibling! = null)
tempobj = tempobj.nextsibling;
// Operador de tres puntos, si es un nodo de elemento, devuelve el nodo en sí, de lo contrario, devuelve nulo
return (tempoBj.nodeType == 1)? tempobj: null;
}
function prevsib (nodo) {
var tempfirst = node.parentnode.firstchild;
// juzga si es el primer nodo, si es así, regresa nulo
if (node == tempfirst)
regresar nulo;
var tempoBj = node.previoussibling;
// busca los nodos hermanos anteriores uno por uno hasta que se encuentre el nodo del elemento
while (tempobj.nodetype! = 1 && tempobj.previoussibl! = null)
tempobj = tempobj.previoussibl;
return (tempoBj.nodeType == 1)? tempobj: null;
}
function mydomeSpector () {
var myitem = document.getElementById ("myDearfood");
// Obtén el próximo elemento del nodo hermano
var nextListitem = nextsib (myItem);
// Obtener el nodo de hermano anterior del elemento anterior
var prelistitem = prevsib (myItem);
alerta ("Último elemento:" + (((nextListitem! = null)? nextListitem.firstchild.nodeValue: null) + "prelistitem:" + ((prelistitem! = null)? prelistitem.firstchild.nodeValue: null));
}
</script>
</ablo>
<Body onload = "mydomiseSpector ()">
<ul>
<li> Costillas dulces y agrias </li>
<li> CAGA CABA VADIDA PEROR </li>
<li> Kimchi Fish </li>
<li id = "myDearfood"> Chestnut Roast Chicken </li>
<li> mapo tofu </li>
</ul>
</body>
7. Establezca propiedades de nodo
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<script language = "javaScript">
window.onload = function () {
// obtener fotos
var imgdatabe = document.getElementsBytagName ("img") [0];
// Obtener el atributo de título de la imagen
imgdatabe.setAttribute ("src", "02.gif");
imgdatabe.setAttribute ("título", "pendiente amigable");
document.write (imgdatabe.getAttribute ("title"));
document.write (imgdatabe.getAttribute ("alt"));
document.write (imgdatabe.getAttribute ("nodo-data"));
document.write (imgdatabe.getAttribute ("node_data"));
}
</script>
</ablo>
<Body>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
Usar el método setattribute () para establecer los atributos de nodo
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var bkk = document.getElementById ("new5");
var clickbk = document.getElementById ("Qiehuan");
clickbk.Onclick = dsqiehuan;
función dsqiehuan () {
bkk.setattribute ("clase", "xxx")
}
}
</script>
<estilo>
.xxx {color: #ddd}
</style>
</ablo>
<Body>
<div id = "new5">
555
</div>
<em id = "Qiehuan"> Switch </em>
</body>
8.createElement () Crear nodo
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var op = document.createElement ("P");
var oText = document.createTextNode ("Crear nodo usando DOM");
var oText1 = document.createTextNode ("Crear nodo 123 usando DOM");
op.AppendChild (oText);
op.AppendChild (oText1);
document.body.appendChild (OP);
}
</script>
</ablo>
<Body>
<p> Originalmente había una P aquí, Test CreateElement () </p>
</body>
9.Removechild elimina el nodo
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var op = document.getElementsBytagName ("P") [0];
op.parentnode.removechild (op); // El final es .removechild (op), no .removechild ("op")
}
</script>
</ablo>
<Body>
<p> Originalmente había una P aquí, Test CreateElement () </p>
</body>
10.Insertbefore () Inserte el nodo antes de un nodo específico
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var opold = document.getElementsByTagName ("P") [0];
var opnew = document.createElement ("P");
var oText = document.createTextNode ("nuevo nodo")
opnew.appendChild (oText);
opold.parentnode.insertbefore (OpNew, Opold); // Recibe dos parámetros, uno es el nuevo parámetro y el otro es el parámetro de nodo antiguo
}
</script>
</ablo>
<Body>
<p> Originalmente había una p </p>
</body>
11. Inserte nuevos elementos después de un nodo específico (agregado el 9 de enero de 2015)
Los métodos proporcionados por DOM solo pueden agregar nuevos elementos antes del elemento de destino usando InsertBore () o usar el método appendChild () para agregar nuevos elementos al final de los nodos infantiles del elemento principal (ejemplo: dirección).
En la práctica, a menudo se usa para agregar nuevos elementos al final de un elemento específico. El método DOM no tiene el método InsertBore (), pero el uso de conocimiento existente se puede usar para escribir.
La idea del código es la siguiente
La copia del código es la siguiente:
función InsertAfter (NewElement, TargetElement) {
var al aire libre = TargetElement.ParentNode; // Encuentra el elemento principal del elemento objetivo
if (adarent.lastchild == TargetElement) // Si el objetivo es el último elemento
Outdoor.appendChild (Newelement); // Agregar directamente al último elemento
else // antes de insertar en el nodo del elemento principal del siguiente elemento
al aire libre.
Ejemplo: (Agregar fuera del elemento) Instancia original: dirección
La copia del código es la siguiente:
<Evista>
<meta charset = "utf-8">
<title> </title>
</ablo>
<Body onload = "interp ()">
<p> primero </p>
<P id = "Target"> Second </p>
<script type = "text/javaScript">
función InsertAfter (NewElement, TargetElement) {
var al aire libre = TargetElement.ParentNode; // Encuentra el elemento principal del elemento objetivo
if (adarent.lastchild == TargetElement) // Si el objetivo es el último elemento
Outdoor.appendChild (Newelement); // Agregar directamente al último elemento
else // antes de insertar en el nodo del elemento principal del siguiente elemento
al aire libre.
}
función interp () {
var ooparent = document.getElementById ("objetivo");
var ooonewp = document.createElement ("A");
oonewp.setattribute ("href", "http://www.qq.com");
var ootextp = document.createTextNode ("enlace");
oOnewp.AppendChild (ooExtextP);
insertarfter (ooonewp, ooparent);
}
</script>
</body>
Ejemplo: agregado en el elemento
12. Agregue la fragmentación del documento para mejorar la eficiencia de la ejecución
La copia del código es la siguiente:
<Evista>
<title> Childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var opold = document.getElementsByTagName ("P") [0];
VAR Acolors = ["Rojo", "verde", "azul", "magenta", "amarillo", "chocolate", "negro", "aguamarina", "lima", "fucsia", "latón", "azure", "marrón", ",", ",", "," Bronce "," Deeppink "," AliceBlue "," gris "," cobre "," coral "," feldspar "," naranja "," orquídea "," rosa "," plum "," cuarzo "," púrpura "];
var ofRagment = document.CreateDocumentFragment (); // Crear fragmentación de documentos
para (var i = 0; i <acolors.length; i ++) {
var op = document.createElement ("P");
var oText = document.createTextNode (acolors [i]);
op.AppendChild (oText);
ofRagment.AppendChild (OP); // Agregar nodos a los fragmentos primero
}
//document.body.appendchild(Fragment); // agregado a la página al final
opold.parentnode.insertbefore (ofRagment, Opold); // Combinado con InsertBefore para agregar fragmentos de documento al nodo
}
</script>
</ablo>
<Body>
<p> Originalmente había una p </p>
</body>