创建节点

createElement()

:::info 该用法用于创建元素节点 :::

  1. var div = document.createElement("div"); // 创建DOM对象后，放在堆内存当中
  2. div.innerHTML = "123";
  3. document.body.appendChild(div);

image.png

createTextNode()

:::info 该方法用于创建文本节点 :::

  1. var text = document.createTextNode("这是创建的文本节点");
  2. document.body.appendChild(text);

image.png

createComment()

:::info 该方法用于创建注释节点 :::

  1. var comment = document.createComment("这是创建的注释节点");
  2. document.body.appendChild(comment);

image.png

createDocumentFragment()

:::info 该方法用于创建一个「文档片段」
fragment 是一个指向空DocumentFragment对象的引用，该对象不在DOM节点中，就是一个临时的容器，所以操作的时候不会频繁的引起页面回流 ::: 来看个案例：
现在我有1000个数据我想添加到ul下面

  1. <body>
  2.   <ul id="list"></ul>
  3. </body>
  1. var oUl = document.getElementById("list");
  3. for (let i = 0; i < 1000; i++) {
  4.   var oLi = document.createElement("li");
  5.   oLi.innerHTML = "这是第" + i + "个项目";
  6.   oLi.className = "list-item";
  7.   oUl.appendChild(oLi); // 循环循环，重复的回流
  8. }

但是这样动态的操作ul会引起页面重复的回流，那我们可以创建一个空的div，该空div没有在节点树当中，最后把所有的元素添加到空div后再把内容赋值给ul

  1. var oUl = document.getElementById("list");
  2. var oDiv = document.createElement("div");
  4. for (let i = 0; i < 1000; i++) {
  5.   var oLi = document.createElement("li");
  6.   oLi.innerHTML = "这是第" + i + "个项目";
  7.   oLi.className = "list-item";
  8.   oDiv.appendChild(oLi);
  9. }
  11. oUl.appendChild(oDiv);

image.png
但是此时还是不太理想，因为多了个div元素。

那么我们就可以创建一个fragment对象来替换div

  1. var oUl = document.getElementById("list");
  2. // var oDiv = document.createElement("div");
  3. var oFrag = document.createDocumentFragment("div");
  5. for (let i = 0; i < 1000; i++) {
  6.   var oLi = document.createElement("li");
  7.   oLi.innerHTML = "这是第" + i + "个项目";
  8.   oLi.className = "list-item";
  9.   // oDiv.appendChild(oLi);
  10.   oFrag.appendChild(oLi);
  11. }
  13. // oUl.appendChild(oDiv);
  14. oUl.appendChild(oFrag);

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

增加节点

appendChild()

:::info 该方法用于父节点将子节点插入到父节点最后 :::

  1. var div = document.getElementsByTagName("div")[0];
  2. var p = document.createElement("p");
  3. p.innerHTML = "创建的P标签";
  4. var text = document.createTextNode("创建的文本节点");
  5. var comment = document.createComment("创建的注释节点");
  7. div.appendChild(p);
  8. div.appendChild(text);
  9. div.appendChild(comment);

image.png

appendChild()还可以「剪切」节点。

  1. <body>
  2.   <a href=""></a>
  3.   <div></div>
  4. </body>
  1. var a = document.getElementsByTagName("a")[0];
  2. var div = document.getElementsByTagName("div")[0];
  3. div.appendChild(a);

image.png

insertBefore()

:::info 该方法用于父节点将子节点插入到某个子节点之前 :::

  1. <body>
  2.   <div>
  3.     <p></p>
  4.   </div>
  5. </body>
  1. var div = document.getElementsByTagName("div")[0];
  2. var p = document.getElementsByTagName("p")[0];
  4. var a = document.createElement("a");
  5. div.insertBefore(a, p);
  7. var h1 = document.createElement("h1");
  8. h1.innerHTML = "创建的H1";
  9. div.insertBefore(h1, a);

image.png

删除节点

removeChild()

:::info 该方法用于父节点将子节点从父节点中删除
📌 该方法删除子节点后只是从DOM文档结构中删除，但无法从内存当中删除 :::

  1. var div = document.getElementsByTagName("div")[0];
  2. var p = document.getElementsByTagName("p")[0];
  4. div.removeChild(p);

remove()

:::info 该方法用于节点将自己删除
📌 该方法是真正的删除，会从内存中删除 :::

  1. var p = document.getElementsByTagName("p")[0];
  2. p.remove();

其他方法

replaceChild()

:::info 该方法用于把新节点替换旧节点 :::

  1. var div = document.getElementsByTagName("div")[0];
  2. var h1 = document.getElementsByTagName("h1")[0];
  3. var h2 = document.createElement("h2");
  5. div.replaceChild(h2, h1);

image.png

cloneNode()

:::info 复制节点及其整个子 DOM 树。
接收一个布尔值参数，表示是否深复制。在传入true参数时，会进行深复制，如果传入false，则只会复制调用该方法的节点。 :::

  1. var oP = document.getElementsByTagName("p")[0];
  2. var newP = oP.cloneNode(); // 只克隆 p 节点
  3. var newP = oP.cloneNode(true); // 克隆 p 节点和底下的内容

文档写入

write()

:::info 该方法接收一个字符串参数，可以将这个字符串写入网页中。 :::

  1. <html> 
  2.   <head>
  3.     <title>document.write() Example</title> 
  4.   </head> 
  5.   <body>
  6.     <p>
  7.       The current date and time is:
  8.       <script type="text/javascript">
  9.         document.write("<strong>" + (new Date()).toString() + "</strong>");
  10.       </script> 
  11.     </p> 
  12.   </body> 
  13. </html>

如果是在页面加载完之后再调用**document.write()**，则输出的内容会重写整个页面。

插入值

innerHTML

:::info 该属性访问的时候返回元素下所有的节点内容
在写入时会根据提供的字符串值以新的DOM子节点替代元素中原来包含的所有节点。 :::

  1. <body>
  2.   <div>
  3.     <h1></h1>
  4.   </div>
  5. </body>
  1. var div = document.getElementsByTagName("div")[0];
  2. console.log(div.innerHTML); // <h1></h1>
  4. div.innerHTML = "123";
  5. console.log(div.innerHTML); // 123
  7. div.innerHTML += "456";
  8. console.log(div.innerHTML); // 123456

image.png

案例 🌰 ：

  1. <body>
  2.   <div>
  3.     <ul id="list"></ul>
  4.   </div>
  5. </body>
  1. var list = document.getElementById("list");
  2. var data = [
  3.   {
  4.     title: "天下无贼",
  5.     area: "中国🇨🇳",
  6.   },
  7.   {
  8.     title: "复仇者联盟",
  9.     area: "美国🇺🇸",
  10.   },
  11.   {
  12.     title: "千与千寻",
  13.     area: "日本🇯🇵",
  14.   },
  15. ];
  16. data.forEach((item, index) => {
  17.   list.innerHTML += `<li>${item.title}--${item.area}</li>`;
  18. });

image.png

innerText

:::info 该属性在读取的时候会返回节点下所有的文本节点
在用于写入值时，innerText会移除元素的所有后代并插入一个包含该值的文本节点，包括标签字符串。 :::

  1. <body>
  2.   <div>
  3.     文本节点1
  4.     <p>
  5.       文本节点2
  6.       <span>文本节点3
  7.         <a href="">文本节点4</a>
  8.       </span>
  9.     </p>
  10.   </div>
  11. </body>
  1. var div = document.getElementsByTagName("div")[0];
  2. console.log(div.innerText)

image.png

插入标签字符串：

  1. div.innerText = "<a>a标签内容</a>"

image.png

操作元素的属性

setAttribute()

:::info 该方法可以设置元素的属性 :::

  1. var div = document.getElementsByTagName("div")[0];
  2. div.setAttribute("id", "box");

image.png

getAttribute()

:::info 该方法用于获取元素的属性 :::

  1.  console.log(div.getAttribute("id")); // box

HTML5版本后给元素新增了规范，自定义应该以data-*开头

  1. div.setAttribute("data-name", "aixiaoye");
  2. div.setAttribute("data-age", "18");
  4. // 这样设置自定义属性后，可以用 dataset 属性访问到
  5. // dataset 管理了自定义属性，必须是 data- 开头 
  6. console.log(div.dataset); 
  7. // DOMStringMap {name: 'aixiaoye', age: '18'}

removeAttribute()

:::info 用于从元素中删除属性。这样不单单是清除属性的值，而是会把整个属性完全从元素中去掉。 :::

  1. div.removeAttribute("class");