【JS】Dom节点操作常用方法
目录
1.访问/获取节点
1.1 通过顶层document节点获取：
1.2 通过父节点获取：
1.3 通过子节点获取：
1.4 通过兄弟节点获取：
2.创建节点/属性
3.添加节点
4.复制节点
5.删除节点
6.添加文本
1.访问/获取节点
1.1 通过顶层document节点获取：
document.getElementById(id); //返回对拥有指定id的第一个对象
document.getElementsByName(name); //返回带有指定名称的节点集合
document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合
document.querySelector() // 返回第一个匹配的节点，好用
document.querySelectorAll() //可以选择多个节点,以","分隔开,返回的是个数组；
注意：query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
1.2 通过父节点获取：
parentObj.firstChild ： 获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持 parentObj.firstChild.firstChild... 的形式，如此就可以获得更深层次的节点。
parentObj.firstElementChild ： 获取父节点下的第一个子元素节点
parentObj.lastChild ： 获取父节点下的最后一个子节点（会将空格和 换行计入）与**firstChild** 一样，它也可以递归使用
**parentObj.lastElementChild： **获取父节点下的最后一个子元素节点
parentObj.childNodes ： 获取父节点下的所有直接子节点（会将空格和 换行计入）
**parentObj.children： **获取父节点下的直接子元素节点。
parentObj.getElementsByTagName("tagName")
parentObj.getElementsByClassName("className")
1.3 通过子节点获取：
**childObj.parentNode **: 获取子节点的直接父节点。w3c标准
**childObj.parentElement **: 获取子节点的直接父节点。IE标准
1.4 通过兄弟节点获取：
**neighbourObj.parentNode.children[..] : **通过父节点间接获取已知节点的兄弟节点
**neighbourObj.previousSibling： **获取已知节点的上一个兄弟节点（会将空格和 换行计入）
**neighbourObj.previousElementSibling: **获取已知节点的上一个兄弟元素节点
**neighbourObj.nextSibling： **获取已知节点的下一个兄弟节点（会将空格和 换行计入）
**neighbourObj.nextElementSibling: ** 获取已知节点的下一个兄弟元素节点
2.创建节点/属性
document.createElement(eName); //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text); //创建文本节点
3.添加节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNode.appendChild(newNode); //给某个节点添加子节点
4.复制节点
cloneNode(true | false); //复制某个节点 参数：是否复制原节点的所有属性
true深 拷贝，false浅 拷贝
5.删除节点
remove() //删除父节点上的所有元素，包括所有文本和子节点。
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
6.添加文本
document 对象中有innerHTML 和innerText 两个属性， 这两个属性都是获取document对象的文本内容的
区别：
- innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括Html标签 。
- innerText 指的是从起始位置到终止位置的内容,但它去除html标签 。
- outerHTML 指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。
innerHTML 是符合W3C标准 的属性，而innerText 只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText ，如果要输出不含HTML标签的内容，可以使用innerHTML 取得包含HTML标签的内容后，再用正则表达式 去除HTML标签。
<html>
<head><title>innerHTML</title></head>
<body>
<div id="d1"><p id="p1">hello world </p></div>
<script>
var content = document.getElementById("p1");
alert(content.innerHTML.replace(/& lt;.+?>/gim,''));
</script>
</body>
</html>