DOM基本操作

Posted 筱小鹏仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(属性名)

以上是关于DOM基本操作的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript操作DOM与jQuyer操作DOM的对比

操作DOM

DOM操作元素

web性能优化--减少DOM操作

DOM的基本操作

JQuery中Dom的基本操作