要进行DOM的增删改查的操作，首先要先搞懂：

什么是dom?

Document Object Model，即文档对象模型。DOM把一份文档表示为一棵树，这是理解DOM模型的关键。是由节点（node）构成的一棵节点树。那么问题又来了：

节点是什么？

DOM中有许多不同类型的节点。其中最重要的有三种：元素节点（element node），文本节点（text node）和属性节点（attribute node）。有了节点，我们就可以很方便地通过定位节点，快速的对节点进行增删改查的操作。

查：

以下是一些查找节点的方法：
getElementById()、getElementsByTagName()、getElementsByName()、getElementsByClassName()、
querySelector()、querySelectorAll()

getElementById()：

getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的 HTMLDivElement对象，如果不存在，则返回null。id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6. </head>
  7. <body>
  8. <div id="content"name="va" class="n1" style="color:blue">内容</div>
  9. <p id="main" name="va" class="n2">正文</p>
  10. <span id="foot" name="va" class="n1">结尾</span>
  11.   <script>
  12.     var tag = document.getElementsById("content").innerHTML
  13.     console.log(tag)
  14.   </script>
  15. </body>
  16. </html>

最后console.log((id.innerHTML)得到的结果是"内容"

getElementsByTagName():

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。接上举例：

  1. <script>
  2.     var tag = document.getElementsByTagName("p").length
  3.     console.log(tag)
  4.   </script>

最后document.getElementsByTagName("p").length返回了页面中总共有1个p。

getElementsByName():

getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。举例：

  1. <script>
  2.     var tag = document.getElementsByName("va")[1].innerHTML
  3.     console.log(tag)
  4.   </script>

最后document.getElementsByName("va")[1].innerHTML返回了第二个name的值为va的元素的innerHTML:"正文"

getElementsByClassName():

getElementsByClassName()方法接受类名参数返回一个具有相同类名的元素的数组，返回一个对象数组HTMLCollection(NodeList)。举例：

  1. <script>
  2.     var tag = document.getElementsByClassName("n1")[1].innerHTML
  3.     console.log(tag)
  4.   </script>

最后 document.getElementsByClassName("n1")[1].innerHTML返回了第二个class为n1的元素的innerHTML:"结尾"

getAttribute():

getAttribute()方法将获取元素中某个属性的值。举例：

  1. <script>
  2.     var tag = document.getElementById("content").getAttribute("name")
  3.     console.log(tag)
  4.  </script>

最后document.getElementById("content").getAttribute("name")获得了id=content元素的name值："va"

querySelector():

querySelector()方法返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。举例：

  1. <script>
  2.     var tag = document.querySelector(".n1").innerHTML
  3.     console.log(tag)
  4.   </script>

最后document.querySelector(".n1").innerHTML获得class=n1的第一个元素的innerHTML:"内容"

querySelectorAll():

querySelectorAll()方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList。

  1. <script>
  2.     var tag = document.querySelectorAll(".n1")[1].innerHTML
  3.     console.log(tag)
  4.   </script>

最后document.querySelectorAll(".n1")[1].innerHTML返回所有符合class=n1的元素中，第二个元素的innerHTML:"结尾"

改：

修改HTML元素：

修改元素内容：

document.getElementById(id).innerHTML=new value，如修改id为content元素的文本内容，可以这样：

  1. var text = document.getElementById('content').innerHTML="修改内容"
  2.    console.log(text)
  3.   </script>

于是content的文本内容就会替换成"修改内容"

修改元素属性：

document.getElementById(id).attribute=new value，如修改id为content的元素的name值：

  1. <script><br />var name = document.getElementById('content').name="new name"<br />console.log(name)<br /></script><br />

content的name值就会替换成"new name"

修改元素CSS：

document.getElementById(id).style.property=new style，如修改id为content的元素的color值:

  1. <script><br />var name = document.getElementById('content').style.color="red"<br /></script><br />

content的文本内容会变成红色。

setAttribute()方法：

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

  1. <script><br />var content = document.getElementById('content')<br />content.setAttribute('style','color:red')<br /></script><br />

上面例子中id为content的元素文本会被修改成红色。

增：

添加元素节点

如需向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

  1. <script><br />var div = document.createElement('div')<br />var node=document.createTextNode("这是新内容。");<br />div.appendChild(node)<br />var content = document.getElementById('content')<br />content.appendChild(div)<br /></script><br />
添加元素节点的方法还有以下这些：

A.append(B) : 把B追加到A内部（所有的A元素，以下类似） A.appendTo(B) : 把A追加到B内部 A.prepend(B) : 把B追加到A内部的内容前(即B成为A第一个子元素) A.prependTo(B) : 把A追加到B的内容前（即A成为B第一个子元素） A.after(B) : 在A后追加B A.before(B): 在A前追加B node.insertBefore(A,B): 在父节点node里面的B节点前面追加A PS:没有 insertAfter 方法.不过可以使用 insertBefore方法和 nextSibling来模拟它。 在前一个例子中，可使用下面代码将 A插入到 B后面： node.insertBefore(A, B.nextSibling)

替换节点：

parent.replaceChild(child,oldElem);

  1. <script><br />var p = document.getElementById('main')<br />var span = document.createElement('span')<br />span.setAttribute("id", "newSpan")<br />var span_content = document.createTextNode("新的span元素内容.")<br />span.appendChild(span_content)<br />var parentDiv = p.parentNode;<br />parentDiv.replaceChild(span,p);<br /></script><br />

上例中原本的P标签及里面的内容被替换成<span id="newSpan">新的span元素内容.</span>

添加class:

  1. <script><br />var div = document.getElementById('content')<br />div.className+=" nn"<br /></script><br />

最后输出结果<div id="content" name="va" class="n1 nn" style="color:blue">内容</div> 重要PS: 在这种方法追加class的过程中，要注意被添加的class” nn”前面有一个空格，否则最后添加成功之后，原class会变成”n1nn”连成了一个新的class造成错误。

第二种添加class的方法：

  1. var element = document.getElementById("content");<br />element.classList.add("nn");<br />

PS:这种方法class前面不需要添加空格，最后的结果跟上面的方法相同。

删：

remove()：

删除该元素。

  1. <script><br />var div = document.getElementById('content')<br />div.remove()<br /></script><br />

上面例子中id为content的整个元素被删除了。

parent.removeChild(child):

  1. <script><br />var div = document.getElementById('content')<br />var p = document.getElementById('p1')<br />div.removeChild(p);<br /></script><br />

上例中父元素content下的子元素P被删除了。

child.parentNode.removeChild(child)：

在不确定子元素的父元素是哪一个的时候，可以这样做：

  1. <script><br />var p = document.getElementById('p1')<br />p.parentNode.removeChild(p)<br /></script><br />

一样可以达到上面的移除子元素P的效果，而且不需要考虑获取其具体的父元素。 ```