2020-04-17

  1. Node类型
    DOM1级定义为一个Node接口,该接口将由DOM中的所有节点类型实现。除了IE之外,在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法。
    1. 节点关系
      属性:
      nodeType 获取节点类型
      Document 9 文档对象document
      Element 1 元素节点
      TextNode 3 文本节点
      Comment 8 注释节点
      document 是Document构造函数的实例
      document.body是Element构造函数的实例
      document.body.firstChild 是Comment构造函数的实例
      nodeName 获取节点名称
      该属性取决于节点类型,如果是元素类型,值为元素的标签名
      nodeValue 获取节点值
      该属性取决于节点类型,如果是元素类型,值有null
      childNodes 获取孩子节点
      该属性保存一个NodeList对象,NodeList是一种类数组对象,用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问,也可以通过item()方法访问。可以使用slice方法将NodeList类数组转换为数组。
      var arr = Array.prototype.slice.call(nodes,0);
      parentNode
      指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点,每个节点之间都是同胞/兄弟节点。
      previousSibling 前一个兄弟节点
      nextSibling 下一个兄弟节点
      firstChild childNodes列表中的第一个孩子节点
      lastChild childNodes列表中的最后一个节点
      ownerDocument
      指向表示整个文档的文档节点。任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。
      方法:
      hasChildNodes()
      在包含一个或多个子节点的情况下返回true
      2. 操作节点
      以下四个方法都需要父节点对象进行调用!
      appendChild()
      向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分,位置更新而不插入,dom树可以看做是由一系列的指针连接起来的,任何DOM节点不能同时出现在文档中的多个位置。
      insertBefore()
      第一个参数:要插入的节点;
      第二个参数:作为参照的节点;
      被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面
      replaceChild()
      第一个参数:要插入的节点;
      第二个参数:要替换的节点;
      要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。
      removeChild()
      一个参数,即要移除的节点。
      移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。

      其他方法
      cloneNode()
      用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时,表示深复制,即复制节点以及整个子节点数。参数为false的时候,表示浅复制,只复制节点本身。该方法不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序等。该方法只复制特定,子节点,其他一切都不复制。但是IE中可以复制,建议标准相同,在复制之前,移除所有事件处理程序。
      normalize()
      处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点,当在某个节点上调用了该方法,会删除空白节点,会找到相邻的两个文本节点,并将他们合并为一个文本节点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值