DOM操作HTML
DOM操作HTML
1、获取节点
-->>1.利用节点关系获取节点
childNodes - 获取所有子节点。
firstChild - 获取第一个子节点。
.....
-->>2、直接获取节点
document.getElementById("id") -- 根据id获取节点。
document.getElementsByTagName("div") -- 根据标签名称获取节点。
document.getElementsByClassName("class") -- 根据类名获取节点。
document.getElementsByName("name") -- 根据名称获取节点。
2、创建的节点
-->>1.创建新的节点
createElement("div") - 创建div的元素节点。
createTextNode("text") - 创建包含“text”的文本节点。
-->>2.克隆节点
cloneNode(bool) - 克隆节点,bool为false时只克隆该元素节点,而bool为true时会克隆该节点和该节点的所有子节点。
3、 添加节点
-->>appendChild(node) - 在所有子节点之后添加一个node。
insertBefore(node, refnode) - 在refnode之前添加一个node,记住此次添加是发生在某元素的子节点上的,即在某元素的refnode子节点前面加一个node。
4 、删除节点
-->>removeChild(node) - 删除node子节点。
5、 替换节点
-->>raplaceChild(newnode, oldnode) - 把oldnode替换为newnode,记住此次替换是发生在某元素的子节点上的,即是把某元素的oldnode子节点替换为newnode。
6 、通用操作(增删改)
-->>innerHTML - 某元素节点所包含的所有HTML,包括所有元素节点 、 文本节点 以及属性节点。