DOM基本操作
1、获取元素
(1)docuent.getElementById()通过id获取元素
(2)docuent.getElementsByName()通过name属性获取元素
(3)docuent.getElementsByTagName()通过标签名获取元素
2、节点指针
(1)父找子:
①firstChild()获取元素的首个子节点
father.firstChild()
②lastChild()获取元素的最后一个子节点
father.lastChild()
(2)子找父:
parentNode()获取已知节点的父节点
son.parentNode()
(3)兄弟节点:
①previousSilbing()获取已知节点的前一个兄弟节点
brother.previousSibling()
②nextSibling()获取已知节点的后面一个兄弟节点
brother.nextSibling()
(4)childNodes()获取元素的子节点列表,获得的是一个类数组对象
father.childNodes()
3、节点操作
①创建元素节点
document.createElement("元素标签")
②创建属性节点
dcument.createAttribute("元素属性")
③创建文本节点
document.creaeTextNode("文本内容")
4、插入节点
①appendChild()向节点的子节点列表的末位追加节点
father.appendhild(添加的新节点)
参数:要添加的新节点
返回值:要插入的元素
②insertBefore()在已知子节点前面插入一个新的子节点
father.insertBefore(new,ref)
参数:new表示新的子节点,ref表示已知子节点;当第二个参数为null时,会插入到最后面
返回值:要插入的元素
③removeChild()删除指定的节点
father.removehild(要删除的节点)
参数:要删除的节点
返回值:删除的节点
④replaceChild()替换节点
replaceChild(要替换的元素,被替换的元素)
参数:第一个参数替换后的新节点,第二个参数需要被替换的旧节点
返回值:替换掉的旧元素
⑤cloneNode()复制节点
cloneNode(bool)
参数:布尔值,如果是1或true则复制当前节点和子节点;如果是0或false则只复制本身
5、属性操作
①getAttribute()获取属性
元素节点.getAttribute(属性名)获取节点中指定属性的属性值
②setAttribute()创建或改变元素节点属性
元素节点.setAttribute(属性名,属性值)
③removeAttribute()删除属性
元素节点.removeAttribute(属性名)