Prefacio
Como Xiaobai, he ido tanteando lentamente la forma de aprender la Web. No sabía cómo escribir un blog antes, pero, no, el primer blog de repente decidió comenzar a escribir en una tarde. Recientemente, estoy aprendiendo sobre dom. Probablemente lo resumiré.
¿Qué es DOM?
DOM es el estándar w3c, su nombre completo es Document Object Model, que se traduce en Document Object Model. El DOM define los métodos necesarios para representar y modificar documentos. El objeto DOM, que es el objeto host, lo define el fabricante del navegador y es una colección de objetos que se utilizan para manipular funciones HTML y XML. Algunas personas llaman al DOM una interfaz de programación estándar para HTML y XML.
Operación básica de DOM
Para objetos y matrices, nuestras operaciones básicas son agregar, eliminar, modificar, verificar e insertar, y es lo mismo para DOM.
incrementar
Hay tres adiciones básicas al DOM:
1.document.createElement();
//这个方法是创建一个元素节点，即标签，但是生成的标签在js里面，不会在页面生成，我们平时用的较多，建议重点掌握。
2.document.createTextNode();//创建文本节点
3，document.createComment();//创建注释节点
//DOM的增操作一般和插入操作一起
Eliminar
Hay dos tipos de eliminación de DOM: asesinato y suicidio.
1.parent.removeChild(要被删除的标签);
//相当于父杀子的谋杀，但实际上可以等同于剪切，被删除的值会被保留
ep:
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.insertBefore(strong,span);//把strong插入到span前面
div.insertBefore(i,strong);
div.removeChild(i); //删除i
//运行结果为--> <i> <i>
2.child.remove();
//可以理解为一个人不想存在，然后抹杀了自己的存在，即自杀，删除了就不在存在
strong.remove();//strong的自我删除
modificar
En el DOM, el cambio es reemplazar
Métodos de la siguiente manera:
parentNode.replaceChild(new，origin);
//用新的去替换旧的，原先旧的会被剪切出来
insertar
La operación de inserción de DOM es muy frecuente para nosotros, ¡así que debemos dominarla! Hay dos métodos:
1.appendChild(标签名);
//剪切操作，通过这个方法我们可以把一个创建好的标签插入到另外一个标签，可以理解为.push
ep：
var div = document.getElementsbyTagName('div')[0];//取出div标签
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//创建strong标签
var i = document.creatElement('i');
div.appendChild(span);//把span放到div里面
2.insertBefore(a,b);
//这个方法的意思为在父级元素里面插入一个值，即在b之前插入a，insert a,before b。
div.insertBefore(strong,span);//在span前面插入strong
结果应该为：
<div>
<strong> <strong>
<span> <span>
<div>
Preguntar
La consulta DOM debe ser el objeto en el que nos centramos, y el método es el siguiente:
1.document.getElementById();
//通过id标签去选出元素，注意：选出的是单个元素
2.document.getelementsByTagName();
//通过标签名来选出一组元素
例如：
var div = document.getElementsByTagName('div')[0];
//我们这时选出的是第一个div标签
3.document.getElementsByClassName();
//通过类名来选出，但是IE8及以下不兼容
4.document.getElementsName();
//只对部分标签生效（表单，表单元素，img，iframe），IE浏览器不支持
5.document.querySelector();//css选择器，只能选出来一个，IE7及以下没有这个方法
6.document.querySelectorAll();//同样是css选择器，可以选出来一组，IE7及以下没有这个方法。
//注意，最后两种方法还有一个缺点：被选出来的元素不是实时的。
El concepto básico de dom node
Según el estándar dom de w3c, todo el contenido del documento es un nodo y el nodo es la unidad más pequeña de dom. El navegador analizará el documento en una serie de nodos según el modelo dom. Debido a que todos los nodos heredan en última instancia de la clase de nodo Nodo, el nodo dom también se puede llamar nodo Nodo.
tipo de nodo dom
Los tipos de nodos DOM son:
元素节点 1
属性节点 2
文本节点 3
注释节点 8
Document 9
DocumentFragment 11 //文档碎片
Atributos básicos de dom
Hay cuatro comunes. Presentamos brevemente estos cuatro valores de atributo hoy.
Las propiedades básicas de los nodos DOM:
1.nodeName //标签名，大写表示，只读
2.nodeValue //只有文本、注释节点有，可读写
3.nodeType //节点类型，只读,它返回的就是相对的数值
4.attributes //Element节点集合的属性
//通过这个属性我们可以改变相应属性的属性值，不能改变属性名，但是我们一般不用这种方法，我们一般用 getAttribute 和 setAttribute 去取
Aquí, también presentamos un método para ver si este nodo tiene hijos.
hasChildNodes (); // El valor de retorno es verdadero o falso.
Algunas propiedades y métodos del nodo Elemento
Dos atributos del nodo Elemento:
1.innerHTML();//改变HTML里面的内容
如果我们要改变一个div标签的值，代码如下：
div.innerHTML = "";
//在""里放入你要修改的内容
2.innerTEXT();//可以直接取出标签的文本内容，也可以赋值
//该属性火狐不兼容，但是可以使用textConent(老版IE不可用）
Dos métodos de nodo de elemento:
1.getAttribute (); // Establecer un atributo interlínea, el frente es el nombre del atributo y el reverso es el valor del atributo. Si queremos establecer un atributo interlínea para el div, podemos usar este método: div.getAttribute ( 'class', 'demo');
2.setAttribute (); // Toma el valor del atributo entre las líneas
在开发中我们可以使用getAttribute()方法来取data-log的值.
//如果我们要取出a的data-log
<div>
<a href = "#" data-log = "0">点我吧 <a>
<div>
js:
var div = document.getElementsByTagName('div')[0];
var a = document.getElementsByTagName('a')[0];
a.onclink = function() {
console.log(this.getAttribute('data-log'));
}
Operación sin método de DOM
A través de algunas operaciones que no son de método, también podemos consultar los nodos
Número de nodos a atravesar
1.parentNode；
//父节点，只有一个。遍历节点数，最顶端的parentNode是#document
ep:strong.parentNode;
2.childNodes;//子节点们
ep:div.childNodes;
3.firstChild;//第一个子节点
ep:div.firstChild;
4.lastChild;//最后一个子节点
ep:div.lastChild;
5.nextSibling;//下一个兄弟节点
ep:span.nextSibling;
6.previousSibling;//上一个兄弟节点
ep:span.previousSibling;
Recorrido basado en el árbol de nodos de elementos
1.parentElement;//返回当前元素的父元素节点
ep:div.parentElement;
2.children;//元素子节点
3.firstElementChild;//第一个元素节点
4.lastElementChild;//最后一个元素节点
5.nextElementSibling;//返回后一个兄弟元素节点
6.previousElementsibling；//返回前一个兄弟元素节点
//这6个除了children，其他的IE9及以下都不兼容
(Gracias a mi amigo Mark por su gran aliento y apoyo para mi estudio)