DOM编程（2）操作节点

---

一、操作DOM

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

1.DOM元素特性和属性的区别

特性(attribute)与属性(property)是两个不同的概念，特性(attribute)是DOM元素的子节点，属性(property)是DOM元素的特性映射到JS后对应对象的属性(property)

（1）获取元素特性

方法	描述
element.attributes	返回元素的所有特性，以数组形式返回
element.getAttribute(name)	获取元素的指定特性
element.setAttribute(name,value)	设置元素的指定特性
element.removeAttribute(name)	删除元素的指定特性

element.attributes 代码实例如下：

<input type="text" name="a1" id="b1" value="要显示的文字" />
		<script type="text/javascript">
	console.log(document.querySelector('input').attributes)//获取全部特有属性
		</script>

运行结果如下

element.setAttribute(name,value) 示例代码如下：

<input type="text" name="a1" id="b1" value="要显示的文字" />
		<script type="text/javascript">
document.querySelector('input').setAttribute("value","更改文字")//更改value
		</script>

运行结果如下

2. table对象特有方法

（1）table对象方法

方法名	描述
rows	返回table对象中所有行的集合，集合中每一个元素为tableRow对象
insertRow(index)	在表格中插入一行并返回该行 参数为索引值，如不输入，则在末尾添加
deleteRow(index)	在表格中删除一行 参数为索引值，必选

<table></table>
		<script>
				var tables=document.querySelector("table");
				tables.insertRow();		
		</script>

运行结果如下

（2）tableRow对象方法

项目	Value
cells	返回tableRow对象中所有行的集合，集合中每一个元素为tableCell对象
rowIndex	返回该行在表格中的索引位置
insertCell(index)	在行中插入一列并返回该列 参数为索引值，如不输入，则在末尾添加
deleteCell(index)	在行中删除一列 参数为索引值，必选

<table></table>
		<script>
				var tables=document.querySelector("table");
				var tableRow=tables.insertRow();  //添加行
				var tableCell=tableRow.insertCell(); //添加列
		</script>

运行结果如下

（3）tableCell对象方法

方法	描述
cellIndex	返回该单元格在行中的索引位置

3.节点操作

（1）创建添加节点

项目	Value
document.createElement(TagName)	创建一个元素节点
document.createTextNode(文本内容)	创建一个文本节点
element.appendChild(子节点)	向父元素末尾添加子节点
element.insertBefore(新节点, 已有节点)	在已有的子节点前插入一个新的子节点

var div=document.createElement("div");
				var text=document.createTextNode("div标签");
				div.appendChild(text);
				document.body.appendChild(div);

（2）删除替换节点

方法名	描述
element.removeChild(子节点)	删除一个子节点
element.replaceChild(新节点,旧节点)	替换一个子节点

代码如下（示例）：

<script>
				var div=document.createElement("div");
				var text=document.createTextNode("div标签");
				div.appendChild(text);
				document.body.appendChild(div);
				document.body.removeChild(document.querySelector("div")); //删除了添加的div标签
		</script>

（3）删除元素节点

方法名	描述
element.remove()	删除element元素

总结

注意节点创建和添加方法