DOM基本操作

Posted 2020-11-10 筱小鹏仔

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(属性名)