DOM操作（增删改查）详解

一、DOM操作

1.DOM概念

• 当网页被加载时，浏览器会创建页面的文档对象模型DOM
• DOM：Document Object Model
  注:DOM说明
  在DOM中，每个东西都是节点：
• 文档本身就是一个文档对象
• 所有html元素都是元素节点
• 所有html属性都是属性节点
• 插入到html元素文本是文本节点（包括空格，回车，换行等）
• 注释是注释节点
  

2. DOM操作
注：在DOM加载完之后再执行相关js操作

• DOM四大操作：查找、更新、添加、删除
• 通过DOM，JavaScript 可创建动态的 HTML：
  能够改变页面中的所有 HTML 元素
  能够改变页面中的所有 HTML 属性
  能够改变页面中的所有 CSS 样式
  能够对页面中的所有事件做出反应
  （前提：首先找到相关元素）

2.1 DOM查找
查找 DOM 节点方法：

• 返回指定 id 的第一个节点元素

document.getElementById("id值");

• 返回指定 标签名 的节点集合 (HTMLCollection集合)

document.getElementsByTagName("标签名")

• 返回指定 类名 的节点集合 (HTMLCollection集合)

document.getElementsByClassName("样式类名")

示例：

<p>hello1</p>
<div id="main">
<p>hello2</p>
<p>hello3</p>
</div>
<script>
var x=document.getElementById("main").getElementsByTagName("p");
document.write("长度: " + x.length+"<br>"); // 长度: 2
document.write("p为: " + x[0].innerHTML+"<br>"); //hello2
</script> 

• 获取某节点下其他相关节点

var test = document.getElementById('demo');
// 获取test节点下所有直属儿子节点：
var children = test.children;
// 获取test节点下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
// 获取test节点的父节点
var parent=test.parentElement;
// 获取test节点的上一个兄弟、下一个兄弟元素节点
var pre=test.previousElementSibling;
var next=test.nextElementSibling;

例：

<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>

var div1 =
document.getElementsByClassName('c-red c-green');
var arr= div1[0].children; //获得第一个div的所有直属儿子
for (let i = 0; i < arr.length; i++) { //背景设置为黄色
arr[i].style.backgroundColor = "yellow";
}

选择<p>Haskell</p>

var div2 = document.getElementsByClassName('c-green');
var haskell=div2[1].lastElementChild //获取第二个div
haskell.style.backgroundColor = 'yellow'; 

2.2 DOM更新
（1）修改 DOM 节点内容
主要方法：修改innerHTML属性（注意大小写），不但可以修改DOM节点本文内容，还可以直接修改DOM节点内部子树
（2）修改DOM节点的属性

• 修改 DOM 节点属性值：
  document.getElementById(id).属性名 = 属性值
  或者：document.getElementById(id).setAttribute(属性名，属性值)
  补充：getAttribute(属性名)：获取属性值

<img id="img1" src="images/img1.jpg">
<a id="link" href="#">网易</a>
<script>
document.getElementById("img1").src="images/img2.jpg";
document.getElementById("link").setAttribute("href","http://www.163.com");
</script> 

（3）修改 DOM 节点样式

• 修改 DOM 节点的样式：使用style对象完成
  document.getElementById(id).style.样式属性 = 样式值(字符串)
  说明：驼峰式命名 例如：样式名为: font-size，对应的style属性名用: fontSize（去掉连接线,首字母变大写）

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.fontSize="20px";
</script>

• 修改 DOM 节点样式类
  修改 DOM 节点的样式类：使用class属性完成

document.getElementById(id).setAttribute("class","class名");
document.getElementById(id).className = "class名"

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p1").className = "strong";
document.getElementById("p2").setAttribute("class","normal");
</script>

2.3 DOM添加

说明：

• 如果DOM节点是空的，例如：<div></div>，那么，直接使用：节点.innerHTML='child’相当于插入了新的DOM节点。
• 如果DOM节点不是空的，那么就不能这么做，因为innerHTML会直接换掉原来所有的子节点。
  **两个办法可以插入新的节点：

1. 节点.appendChild(newnode)：向节点添加最后一个新子节点newnode
2. 节点.insertBefore(newnode,existingnode) ：在节点的existingnode子节点前
   插入一个新的子节点newnode。
   示例：从零创建一个新的节点，然后插入到指定位置
   (1) 创建新元素：document.createElement()
   (2) 找到父级元素 ：通过id等
   (3) 在指定位置插入元素：父级元素.appendChild() / insertBefore()

<ul id="menu">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
</ul>
<script>
var item = document.createElement("li");
item.innerHTML="<a href='#'>a3</a>";
document.getElementById("menu").appendChild(item);//尾部添加
</script>

注意：父级元素.appendChild() / insertBefore() ；都会将元素先自动在原来位置删除，然后在添加进要添加的位置。（不用我们手动删除）

<ul id="menu">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
</ul>
<script>
var item = document.createElement("li");
item.innerHTML="<a href='#'>a3</a>";
// 如要插入到a1之前：
var menu=document.getElementById("menu");
menu.insertBefore( item, menu.firstElementChild );
// 如要插入到a2之前：
// var menu=document.getElementById("menu");
// menu.insertBefore( item, menu.children[1] );
</script>

2.4 DOM删除

• 要删除一个节点，首先要获得该节点本身以及它的父节点(parentElement)，
  然后，调用父节点的 removeChild 把自己删掉。

删除节点过程如下：
// 拿到待删除节点：
var self = document.getElementById('to-be-removed');
// 拿到父节点：
var parent = self.parentElement;
// 删除：
var removed = parent.removeChild(self);
removed === self; // true 说明待删除节点虽不在文档树中，但还在内存里

DOM删除注意：
删除多个节点时，要注意children属性时刻都在变化