DOM 二 节点操作

作者 Marlous 日期 2018-07-27
DOM 二 节点操作

一 获取节点

1 获取方法

  1. 通过节点关系(父子关系,兄弟关系)获取节点可维护性差。

  2. 通过接口获取节点:
    <p id="Id" class="ClassName"></p>

  • getElementById
  • getElementByTagName
  • getElementByClassName
  • querySelector/All

2 各接口使用

示例

  1. getElementById:

    1
    element=document.getElementById(id)
  2. getElementByTagName:

    1
    2
    3
    collection=element.getElementByTagName(tagName)

    collection=element.getElementByTagName("*") //获取指定元素所有后代元素。
  3. getElementByClassName:

    1
    collection=element.getElementByClassName(className)
  4. querySelector/All:
    其返回的值是静态的。

    1
    2
    var users=document.querySelector("#users")  //选择第一个 id 为 users 的节点。
    users.querySelectorAll(".user") //选择所有类名为 user 的节点。

3 IE 兼容

IE 兼容

4 小结

小结

二 创建节点

示例:
创建节点示例

1
2
3
element=document.createElement(tagName)

var li=document.creatElement("li")

三 修改节点

element.textContent 节点及其后代节点的文本内容。
element.innerText 节点及其后代节点的文本内容,不规范,ff 不支持。

1
2
var a=document.createElement("a");
a.innerText="Xiaoming";

四 插入节点

  1. appendChild:
    追加一个节点。
    1
    var achild=element.appendChild(achild);

追加一个节点

  1. insertBefore:
    在指定节点(referenceChild)前插入一个节点(achild)。

    1
    2
    3
    var achild=element.insertBefore(achild,referenceChild);

    ul.insertBefore(li,ul.firstChild);
  2. 创建,修改,插入,设置属性:
    创建,修改,插入,设置属性

五 删除节点

1
2
3
4
child=element.removeChild(child)

var user2=users.getElementByClassName('user')[1]; //先获取准备删除的节点。
user2.parentNode.removeChild(user2); //删除获取到的节点。

六 innerHTML

修改某节点的 HTML。可以直接创建插入节点,批量删除节点。

  1. 示例:
    先追加一个空 li 节点,后向里加内容。
    修改某节点的 HTML

  2. 问题:
    问题
    直接插入整个 HTML 代码会刷新页面,可能导致之前的效果失效。
    也可能导致内存泄漏,安全问题。