目录
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>
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
