[Parte 5 | JS WebAPI] 3: operación del nodo DOM

Todo el contenido de una página web es un nodo (etiqueta, atributo, texto, comentario, etc.), y en el DOM, un nodo se representa por nodo. Comúnmente usamos nodos de elementos
Se puede acceder a todos los nodos en el árbol HTML DOM a través de JavaScript, y todos los elementos HTML (nodos) se pueden modificar, crear o eliminar.
Generalmente, un nodo tiene al menos tres atributos básicos: nodeType (tipo de nodo), nodeName (nombre del nodo) y nodeValue (valor del nodo).
En nuestro desarrollo real, las operaciones de nodos operan principalmente en nodos de elementos.

¿Qué son las operaciones de nodo?

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
    </div>

    <script>
        // 如果以前想得到div和span元素，需要进行两步
        var divObj = document.getElementsByTagName('div');
        var spanObj = document.getElementsByTagName('span');

        // 而我们若使用节点操作来获取父元素，则只需要获取某一个元素对象，然后根据这个元素对象和其它元素对象的层级关系，使用对应的函数即可
        // span是div的父节点。我们得到了span，则只需要操作这个节点，使用parentNode就可以获取其父节点对象div了
        var spanObj2 = document.getElementsByTagName('span');
        divObj2 = spanObj2[0].parentNode;
        console.log(divObj2);  //div
    </script>
</body>
</html>

2-1 Obtener el nodo principal

3-1 Obtener nodos secundarios (no se recomienda obtener todos los objetos secundarios)

Las etiquetas y los saltos de línea de los elementos secundarios se consideran nodos. Como en el siguiente código, si usa

var ul = documento.getElementsByTags('ul');

var lis = ul.childNodes;

código, obtendrá no solo una pseudo-matriz de objetos de elementos que contienen 2 li, sino una pseudo-matriz de 5 objetos de elementos

Las razones específicas son las siguientes

<ul>（换行 第一个节点）
	<li（标签，第二个节点）>XXX</li>（换行，第三个节点）
	<li（标签，第四个节点）>XXX</li>（换行，第五个节点）
</ul>

En resumen, debido a que el valor de retorno contiene todos los nodos secundarios, incluidos los nodos de elementos, nodos de texto, etc. Si solo desea obtener los nodos de elementos dentro, debe tratarlo especialmente. Por lo tanto, generalmente no recomendamos el uso de childNodes.

3-2 Obtener nodos secundarios (obtener todos los [nodos de elementos] secundarios)

parentNode.children

Ejemplo de código (comparación de childNode y children)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <script>
        var divObj = document.querySelector('div');
        var children1 = divObj.childNodes;
        var children2 = divObj.children;

        var str1 = '';
        var str2 = '';

        for(var i=0 ; i<children1.length ; i++) {
            str1 += children1[i];
        }
        for(var i=0 ; i<children2.length ; i++) {
            str2 += children2[i];
        }

        console.log(str1); //[object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text][object HTMLSpanElement][object Text]
        console.log(str2); //[object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement][object HTMLSpanElement]

    </script>
</body>
</html>

3-3 Obtener el primer y último nodo secundario

Nota: El nodo secundario obtenido por firstChild contiene "nodos que no son elementos, como saltos de línea".

Los dos métodos siguientes pueden obtener el primer y el último nodo secundario [elemento]

En el desarrollo real, ¿cómo obtener firstElementChild y lastElementChild de una manera que sea compatible con navegadores de versiones anteriores a IE9?

En el desarrollo real, firstChild y lastChild contienen otros nodos, lo que es un inconveniente de operar, y firstElementChild y lastElementChild tienen problemas de compatibilidad, entonces, ¿cómo obtenemos el primer nodo de elemento secundario o el último nodo de elemento secundario?

solución:

1. Si desea el primer nodo de elemento secundario, puede usar parentNode.chilren[0]

2. Si desea el último nodo del elemento secundario, puede usar parentNode.chilren[parentNode.chilren.length - 1]

4-1 Obtener nodos hermanos

Nota: Los nodos hermanos obtenidos por este método contienen "nodos que no son elementos, como saltos de línea".

 node.nextSibling  //返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
 node.previousSibling  // 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

Los siguientes dos métodos pueden obtener el nodo hermano hijo [elemento]

 node.nextElementSibling   //返回当前元素下一个兄弟元素节点，找不到则返回null。
 node.previousElementSibling   //g 返回当前元素上一个兄弟节点，找不到则返回null。

Puede encapsular una función que sea compatible con navegadores por debajo de IE9 para obtener nodos de [elemento] hijos hermanos

 function getNextElementSibling(element) {
 	var el = element;
 	while (el = el.nextSibling) {
	 	if (el.nodeType === 1) {
	 		return el;
 		}
 	}
 	return null;
 }

5-1 Crear y agregar nodos dinámicamente

Escenario de uso: si desea agregar dinámicamente li a ul

ejemplo de código

Pasos básicos: obtenga el elemento del nodo principal → cree el elemento que se insertará → inserte el elemento

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>

    </ul>
    <script>
        // 动态创建元素节点
        var liElement = document.createElement('li');
        // 把创建的元素节点加入（获取父节点 → 添加子节点）
        var ulNode = document.querySelector('ul');
        ulNode.appendChild(liElement);
    </script>
</body>
</html>

5-2 Caso: Área de comentarios

Idea central: después de hacer clic en el botón, se crea dinámicamente un li y se agrega a la ul. Al crear li, asigne el valor en el campo de texto a li a través de li.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        textarea{
            display: block;

            resize:none;  /* 取消拖拽 */
            outline: none;/* 取消选中高亮 */
            height: 200px;
            width: 500px;
            margin: 100px auto;
            margin-bottom: 30px;
            background-color: aliceblue;
            padding: 10px;

            font-family: 'Microsoft YaHei';
            font-size: 20px;
        }

        button {
            display: block;

            background-color: lightskyblue;
            width: 100px;
            height: 40px;
            margin: 0 auto;
        }

        ul {
            width: 500px;
            margin: 40px auto;
            background-color: lightgoldenrodyellow;
        }

        li {
            width: 500px;
            margin: 5px auto;
            height: 30px;
            border-bottom: 1px solid grey;
        }

    </style>
</head>
<body>
    <textarea placeholder="输入评论" name="comment"></textarea>
    <button>发布</button>
    <ul>
    </ul>

    <!-- 点击按钮，获取文本域，然后添加li -->
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');

        btn.onclick = function(){
            // 获取文本域文本
            var textContent = text.value;
            //创建li节点
            var newLi = document.createElement('li');
            //添加li节点
            var ul = document.querySelector('ul');
            ul.appendChild(newLi);
            // 向li节点中添加内容 innerHTML
            newLi.innerHTML = textContent;
            // 清空文本
            text.value = '';
        }
    </script>
</body>
</html>

5-4 Eliminar nodo

ejemplo de código

5-5 nodos de replicación

ejemplo de código

| Caso completo: Generación dinámica de formularios

Todavía no he aprendido Ajax y no puedo obtener datos dinámicamente a través de la base de datos. Así que escribimos los datos en el objeto.

Preste atención al uso integral de los conocimientos anteriores:

Conocimientos de CSS y Html
objeto de almacenamiento de matriz
Loop crea eventos
Cómo insertar filas y columnas en el cuerpo de una tabla
Tenga en cuenta que la escritura del botón Eliminar debe usar el método innerHTML para representar la etiqueta html
Tenga en cuenta que al eliminar, lo que se elimina es el padre (td) relativo al padre (tr) de a, es decir, el nodo del elemento de la fila eliminada.

Código de muestra:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  a的爸爸是tr，tr的爸爸是td，因此删除的是td。注意使用的是this 
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
    </script>
</body>

</html>