DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动

问题:两个节点之间可能存在哪些关系?以及如何在节点之间任意移动?


  1.DOM中两个节点存在的关系无非3种:
    1.1.包含与被包含,IE率先引入的contains()方法可检测,例 A.contains(B),
          即检查节点B是否是节点A的子节点,返回布尔值,现大多数浏览器都支持;
        DOM level 3引入的compareDocumentPosition(),确定节点之间的关系,
          返回值为一个表示关系的位掩码(见图-1)的合(或者是按位或的值,并不知道具体实现),
          通过按位与操作符“&”可确定关系。例:节点A(例:<html>)在节点B(例:<body>)前--位掩码为4,
          且节点A包含节点B--位掩码为16,则返回值为20,通过"!!(20&16)"这种方式即可返回一个布尔值,
          解析:“20&16”返回16证明节点A包含节点B(即:16),通过!!取得16的布尔值true。
    1.2父与子
        获取父节点:node.parentNode, node.parentElement,两者的区别在于后者只能获取元素,例如:图-2;
        获取子节点:childNodes(以NodeList对象存在的子节点集合),firstChild,lastChild
    1.3同辈(兄弟节点)
        nextSibling,previousSibling  
    1.4Element Travel API给DOM添加的属性
        childElementCount,firstElementChild,lastElementChild,nextElementSibling,
        previousElementSibling  ,他们与之前的方法之间的区别是多了Element,保证只返回元素节点,而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素间的空白符当文本节点返回。
    1.5children属性(IE9以后)
        与childNodes不同的地方在于:children只包含元素子节点(IE8及之前的版本可能会包含注释节点)。
  
        

  2.如何在节点之间任意移动?
    根据上面提到的属性值移动就好了(感觉这句话水水的)
   来吧, 给我一个支点(节点)让我撬起地球(任意移动)啊!

每个位掩码对应的含义:

图-1

parentElement 与parentNode的对比

图-2
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容