【前端07_JS_Dom】节点创建、插入、替换、删除、克隆、获取及修改节点属性

本文链接：https://blog.csdn.net/u010263423/article/details/98188085

Dom 文件对象

概述
- 节点操作

概述

通过 Dom 可以找到 Html 里的所有内容，并实现相应的操作

节点操作

创建

我们可以通过 document.createElement("tagName"); 来创建一个游离的标签。
所谓的游离，是没有固定的位置，需要我们插入到页面中

插入

插入分很多种位置

在指定节点之前插入 insertBefore

<body>
    <ul>
        <li id="li1">0</li>
        <li id="li2">1</li>
    </ul>
</body>
<script>
    var creat_li = document.createElement("li");
    var ul = document.querySelector("ul");

    var li1 = document.querySelector("#li1");
    var li2 = document.querySelector("#li2");

    creat_li.innerText = "新插入";

    //在指定节点之前插入
    //ul.insertBefore(creat_li,li1);
    ul.insertBefore(creat_li,li2);
</script>

替换、删除、克隆

替换

<body>
    <ul>
        <li id="li1">0</li>
        <li id="li2">1</li>
    </ul>
</body>
<script>
    var creat_li = document.createElement("li");
    var ul = document.querySelector("ul");
    var li1 = document.querySelector("#li1");

    creat_li.innerText =  "newLi";
    //注意写法，ul的子元素包括creat_li和li1
    ul.replaceChild(creat_li,li1);
</script>

删除

<body>
    <ul>
        <li id="li1">0</li>
        <li id="li2">1</li>
    </ul>
</body>
<script>
    var creat_li = document.createElement("li");
    var ul = document.querySelector("ul");
    var li1 = document.querySelector("#li1");

    //页面中只剩1了
    ul.removeChild(li1);

    //document.body.removeChild(li1);
    //Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
</script>

克隆有参数的，默认为 false，代表不克隆标签里面的内容，如果参数为 true ，那么就克隆标签种的内容

	console.log(li1.cloneNode());
    //<li id="li1"></li>
	console.log(li1.cloneNode(true));
    //<li id="li1">0</li>

总结

描述	关键字	实例	补充
创建：节点	createElement()	`var div = document.createElement("div");`	创建一个游离节点，需要你指定插入位置
插入：末尾追加	appendChild()	`document.body.appendChild(div);`	向末尾追加元素
插入：在指定结点之前	insertBefore()	`ul.insertBefore(creat_li,li2);`	在 `li2` 前面插入 `creat_li`，注意 `ul` 和 `cerat_li`是父子关系
克隆	cloneNode()	`ul.appendChild(li1.cloneNode(true));`	克隆有参数，true的话标签内容也会克隆，克隆的元素是游离的
替换	replaceChild()	`ul.replaceChild(creat_li,li1);`	层级关系跟 `insertBefore`类似
删除	removeChild()	`ul.removeChild(li1);`	—

指定节点

指定节点的方法如下

通过 ID：document.getElementById();
通过类名：document.getElementsByClassName();
通过标签名：document.getElementsByTagName();
通过 Name ：document.getElementsByName(); 比方说 input 框里就有 Name
var div1 = document.querySelector(".div"); 这个只找body中第一个出现的 div，里面可以写选择器，写啥找啥
document.querySelectorAll("")[] 这个是找所有的

节点查找 & 选择

优点：可以不用频繁的给id，和类名

找子节点 ul.firstChild
这个是找 ul 的子节点，包括空格，如果是空格或者换行符的话就会返回 #text ，没有空格的话就是标签元素 <li></li>
如果想跳过空格直接找标签元素的话用 ul.firstElementChild
在前端中，有 First 就会有 Last
如果想找所有子节点的列表，就用 ul.childNodes[](伪数组)
找父节点 ul.parentNode (因为父亲只有一个)
找同级的下一个兄弟节点 ul.nextSibling 可能找的还是空格 #text，同上，找下一个标签应该找元素，加上单词 Element ul.nextElementSibling；如果想找上一个兄弟节点就这样写 ul.previousElementSibling ，如果上一个找不到元素的话会返回 NULL

获取及修改标签内容、属性

提取标签中的文本：div1.innerText = 1; 这个是提取对象 div1 中的文本，并把 1 赋值给他，div1 中原来的东西将会被覆盖
提取标签中的所有(包括标签) ：div1.innerHTML = "<ul><li></li></ul>" 这个是把一个 ul 无需列表也放到了 div1 里了，可以用这个做聊天框
修改属性：用 setAttribute();

li1.setAttribute("style","color:red");

获取属性用 getAttribute();

<script>
    var li1 = document.querySelector("#li1");
    li1.setAttribute("style","color:red");
    console.log(li1.getAttribute("style"));
    //color:red
</script>

样式改变

如果想用 JS 改 CSS 中的属性，其中原先 CSS 的属性名字内有 - (中间杠杠的)，在 JS 中，后面单词的首字母就要大写，比方说css中的 font-size,在 JS 中就要写成 div.style.fontSize (单词Size首字母大写)
组合属性 cssText ，用这个可以一次改很多 style 样式用法如下：div.style.cssText="height:111px;width:111px

注意：
- 没有代码提示，注意英语单词的拼写
- 这个 会替换掉原来的行内样式，所以原先有行内样式的话就会被抹去
- 如果想保留原来的样式，只需换成加等 div.style.cssText += "height:111px;width:111px"
- 频繁的操作 dom 可能引起重排，重绘，追求效率 的话用 cssText
JS 切换类 class
div.className = "div2" div2是个类名，里面规定了样式
如果想保留两个类的属性，只需换成加等 div.className += " div2" (个人感觉跟字符串的操做差不多)

批量修改样式

比方我想修改如下 ul 中每个 li 的样式

<ul>
        <li>1</li>
        <li>22</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
    </ul>

有如下方法，第一种直接改 ul 的属性，因为很多属性都是可继承的，color 就是个可继承的属性，所以我改 ul color 的属性，li 的 color 属性也会变

var ul1 = document.getElementsByTagName("ul")[0];
    ul1.style.color = "red";

另一个办法，通过循环处理所有的 li，引入了 for 循环，和检测数组长度 li.length,声明：li1是个数组

var li1 = document.getElementsByTagName("li");

    for(var i = 0 ;i < li1.length ;i++){
        li1[i].style.color = "red";  /*下标7，长度8*/
        /*批量处理，设置事件等等操作*/
    }

动态添加点击事件

在想要发生点击事件的元素上添加 onclick 和事件函数，使用 匿名函数，比如点击 div 就会弹出 1,代码片如下

var div = document.getElementsByClassName("div")[0];
    /*行内js，内部js，外部js，语法规范*/
    /*动态添加点击事件*/
    div.onclick = function () {     /*这个函数没有函数名，是个匿名函数*/
        alert(1);
    }