JavaScript の 节点操作

节点操作

DOM节点

节点类型

• 元素节点 主要使用

  所有的标签都是元素节点

• 属性节点

  所有的属性 比如class id

• 文本节点

  所有的文本

节点操作

1. 查找节点

   • 父节点查找

     使用 parentNode 属性

     子元素.parentNode 返回的是父节点

   • 子节点查找

     使用 children 属性

     父元素.children 返回的是所有子节点 是个数组

   • 兄弟关系查找

     下一个兄弟

     nextElementSibling 属性

     上一个兄弟

     previousElementSibling 属性

2. 增加节点

   • 创建节点

     document.creatElement(‘元素名称’)

   • 追加节点

     就是将创建的节点添加到页面中去

     父元素.appendChild(节点) 将节点添加到父元素的最后

     父元素.insertBefore(要添加的节点,本来存在的一个节点) 将节点添加到本来存在的一个节点

     实现添加到最前面 父元素.insertBefore(要添加的节点,父元素.children[0])

   • 克隆节点

   元素.cloneNode(布尔值)

   布尔值默认为false

   布尔值为true，则克隆时会包含后代节点

   布尔值为false，则克隆时不包含后代节点

3. 删除节点

   必须通过父元素删除节点

   父元素.removeChild(要删除的元素)