DOM操作HTML

1.利用节点关系获取节点

childNodes - 获取所有子节点。
firstChild - 获取第一个子节点。
lastChild - 获取最后一个子节点。
previousSibling - 获取上一个兄弟节点。
nextSibling - 获取下一个兄弟节点。
parentNode - 获取父节点。

2.直接获取节点
document.getElementById("id") - 根据id获取节点。
document.getElementsByTagName("div") - 根据标签名称获取节点。
document.getElementsByClassName("class") - 根据类名获取节点。
document.getElementsByName("name") - 根据名称获取节点。

3.创建新的节点
createElement("div") - 创建div的元素节点。
createTextNode("text") - 创建包含“text”的文本节点。

4.克隆节点
cloneNode(bool) - 克隆节点。

5. 添加节点
appendChild(node) - 在所有子节点之后添加一个node。
insertBefore(node, refnode) - 在refnode之前添加一个node。

6. 删除节点
removeChild(node) - 删除node子节点。

7. 替换节点
raplaceChild(newnode, oldnode) - 把oldnode替换为newnode。

8.通用操作（万种风情）
innerHTML

表格操作

1.新增
tableElement.insertRow(position) - 新增一行
rowElement.insertCell(position) - 新增一个单元格

2.删除
tableElement.deleteRow(position) - 删除某行，position从0开始计数。
rowElement.deleteCell(position) - 删除某行，position从0开始计数。

3.tableElement.rows - 获取表格所包含的的所有tr元素节点所组成的集合数组。
rowElement.cells - 获取行元素节点所包含的所有td元素节点所组成的集合数组。

4.通用属性
value - 值。
text - 文本内容。

5.select下拉框
访问option节点,selectElement.options - 返回该select节点内子节点option节点所组成的数组。
删除option节点,selectElement.remove(position) - 基于select节点的remove方法，删除指定位置的option节点，从0开始计数。
select节点直接取值,value - 使用通用属性value来取值，来获取选中的值。
selectedIndex - 获取被选中的option节点的位置。

6.option节点取值
value - 使用通用属性来获取值。
text - 使用通用属性来获取文本。
selected - 是否被选中。
defaultSelected - 是否默认被选中

7.radio单选框和checkbox复选框
value - 使用通用属性获取值。
checked - 是否被选中。

8.input输入框
value - 使用通用的属性来取值。
text - 使用通用属性来获取文本。

9.操作元素属性
node.setAttribute("attrName", "val") - 修改或新增某属性"attrName"的值为"val"。
node.getAttribute("attrName") - 获取某属性"attrName"的值。
node.removeAttribute("attrName") - 删除某属性。

10.内联样式的操作
CSS样式属性DOM写法
background-color node.style.backgroundColor
color node.style.color
font node.style.font
font-family node.style.fontFamily

 

转载于:https://www.cnblogs.com/WXSWSS/p/5409933.html