文章目录
一、操作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元素 |
总结
注意节点创建和添加方法