节点的访问关系都是属性。节点的操作都是函数或者方法。

创建节点

  • 新的标签(节点) = document.createElement("标签名");
  • document.write();
  • 直接利用元素的innerHTNL方法。(innerText方法不识别标签)

插入节点(使用节点)

  • 使用方法: 父节点.appendChild();
    父节点.appendChild(新节点); 父节点的最后插入一个新节点
  • 使用方法:父节点.insertBefore(要插入的节点,参考节点);
    父节点.insertBefore(新节点,参考节点)在参考节点前插入;
    如果参考节点为null,那么他将在节点最后插入一个节点。

    删除节点

    用法:用父节点删除子节点。
    父节点.removeChild(子节点);必须制定要删除的子节点
    节点自己删除自己:
    不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)

    复制节点

    用法:oldNode.cloneNode(true)
    注意:想要复制的节点调用这个函数cloneNode(),得到一个新节点。 方法内部可以传参,入股是true,深层复制,如果是false,只复制节点本身。
    新节点=要复制的节点.cloneNode(参数) ;
    注意:

  • 参数可选复制节点
  • 用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

    节点属性(节点.属性)

    获取:getAttribute(名称)
    设置:setAttribute(名称, 值)
    删除:removeAttribute(名称)
    注意:

  • IE6、7不支持。
  • 调用者:节点。
  • 有参数,但是没有返回值。
  • 每一个方法意义不同。

附录:DOM元素

  • DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
  • 节点就是DOM的组成。是一个对象,有属性和方法。获取方式有很多种。
  • 节点分为元素节点(标签),文本节点,属性节点。
    区分方法:nodeType: 1是标签,2是属性,3是文本
Last modification:April 2, 2018
If you think my article is useful to you, please feel free to appreciate