孙肖宁

javascript中DOM节点的操作
节点的访问关系都是属性。节点的操作都是函数或者方法。创建节点新的标签(节点) = document.createE...
扫描右侧二维码阅读全文
24
2018/03

javascript中DOM节点的操作

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

创建节点

  • 新的标签(节点) = 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 2nd, 2018 at 01:23 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 学习笔记Blog

    路过,来看看!留个脚印先!

Leave a Comment