【JS】Dom节点操作常用方法

1.访问/获取节点

1.1 通过顶层document节点获取：

(id);　 //返回对拥有指定id的第一个对象

document.getElementsByName(name); //返回带有指定名称的节点集合

(tagname); 　　//返回带有指定标签名的对象集合　

document.getElementsByClassName(classname); //返回带有指定class名称的对象集合

() // 返回第一个匹配的节点，好用

document.querySelectorAll() //可以选择多个节点,以","分隔开,返回的是个数组；

注意：query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。

1.2 通过父节点获取：

：获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持 ...的形式，如此就可以获得更深层次的节点。

：获取父节点下的第一个子元素节点

：获取父节点下的最后一个子节点（会将空格和换行计入）与firstChild一样，它也可以递归使用

：获取父节点下的最后一个子元素节点

：获取父节点下的所有直接子节点（会将空格和换行计入）

：获取父节点下的直接子元素节点。

("tagName")

("className")

1.3 通过子节点获取：

: 获取子节点的直接父节点。w3c标准

: 获取子节点的直接父节点。IE标准

1.4 通过兄弟节点获取：

[..] : 通过父节点间接获取已知节点的兄弟节点

：获取已知节点的上一个兄弟节点（会将空格和换行计入）

: 获取已知节点的上一个兄弟元素节点

：获取已知节点的下一个兄弟节点（会将空格和换行计入）

: 获取已知节点的下一个兄弟元素节点

2.创建节点/属性

(eName);　　//创建一个节点

(attrName); //对某个节点创建属性

(text);　 //创建文本节点

3.添加节点

(newNode,referenceNode);　 //在某个节点前插入节点

(newNode);//给某个节点添加子节点

4.复制节点

cloneNode(true | false);　　//复制某个节点参数：是否复制原节点的所有属性

true深拷贝，false浅拷贝

5.删除节点

remove() //删除父节点上的所有元素，包括所有文本和子节点。

(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>

秒客网