1. 元素的获取。
常见的有四种方法。
（1）document.getElementById()：获取对应ID的元素。ID是不能有重复的。所以返回的是一个元素。
(2) document.getElementsByTagName():获取对应的标签元素。返回一个数组。
(3) document.getElementsByClassName()：通过class来获取元素。返回的也是一个数组。注：此方法在IE8浏览器下是不兼容的。
(4) document.getElementsByName():通过name属性来获取元素，返回的也是一个数组。
不常用的两种方法。
（5）document.documentElement():获取html标签。
（6）document.body():获取body标签。
特别的两种
(7) document.querySelector("#demo")：获取文档中 id=‘demo‘ 的元素。返回匹配指定选择器的第一个元素。
(8) document.querySelectorAll("#demo")：使用方式和 document.querySelector() 方法一样，只是可以获取css选择器匹配的所有元素。
2.元素的操作方法。
(1)node.appendChild(node1)：向某个节点添加一个子节点，这个添加的节点会被放在最后，成为这个节点的最后一个子节点；
(2)node.removeChild(node1)：移除某个节点 。
(3)insertBefore(nodo1, node2),将node1作为当前元素的子节点，插入到当前元素的节点node2的前面。
(4)replaceChild(newnode, oldnode);新节点，代替旧结点。
3.获取节点。
(1)hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素。
(2)childNodes 返回当前指定元素所有子元素(包括被注释掉的元素)的数组: document.body.childNodes。它返回指定元素的子元素集合，包括HTML节点(元素节点），文本节点(空格也是文本节点)。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3 是文本节点。
(3)children返回当前指定元素所有子元素，但是与childNodes 不同的是，他只会返回HTML节点(元素节点)，不返回文本节点。
(4)firstChildelem.firstChild 返回当前元素下的第一个子节点。这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点。
(5)lastChildelem.lastChild返回当前元素下的最后一个子节点。
这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点。
(6)nextSbilingelem.nextSbiling 返回紧跟在当前节点后的那一个同级节点(同级元素，不是子元素)。 这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点
(7)previousSiblingelem.previousSibling 返回前一个同级节点，跟nextSbiling类似，只不过nextSbiling是返回后一个。
(8)parentNodeelem.parentNode 返回父节点。
4.属性操作。
(1)elem.getAttribute(name); 获取元素属性。
(2)elem.setAttribute(name, value); 设置元素属性。
5. 创建元素，文本节点。
(1) var p = document.createElement("p")。创建元素，里面的“p”，就是代表创建p元素
div.appendChild(p);就是向div中添加一个p元素，在div的最后面。
(2) var txt = document.createTextNode("这是文本"); 这是创建文本元素
p.appendChild(txt);向p元素中添加值。
6.获取元素，节点的值。
<p id="test">123</p> 要获取p之下的文本值
(1), document.getElementById("test").childNodes[0].nodeValue;(这里不能用children替换childNodes，因为children获取不到 文本节点)。
(2), document.getElementById("test").innerTEXT;
(3), document.getElementById("test").innerHTML;
（2）和（3）的区别：将上面的标签改为：“ <p id="test"><a href="#">123</a></p> ”
那么（2）的值还是 123， 但是（3）的值就是<a href="#">123</a>，就是说innerHTML会连html标签也拿到，但是innerText不会。
参考链接：https://blog.csdn.net/yuling__ting/article/details/51490302
：https://blog.csdn.net/change_any_time/article/details/79721554
原文地址：https://www.cnblogs.com/xu-xiao-jin/p/9907439.html