节点的访问关系,是以属性的方式存在的。
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点 ( parentNode )

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

兄弟节点

sibling:就是兄弟的意思。
next:下一个的意思。
previous:前一个的意思。
nextSibling:调用者是节点。IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling:调用者是节点。IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。
总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild:调用者是父节点。IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点
nodeType == 3 是文本节点
子节点数组 = 父节点.childNodes; 获取所有节点。
children:非标准属性,它返回指定元素的子元素集合。
但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中,注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。

得到自己的所有兄弟节点

节点自己.parentNode.children[index];随意得到兄弟节点。

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

定义一个函数。必须传递自己。定义一个数组,获得自己的父亲,在获得自己父亲的所有儿子(包括自己)。遍历所哟与的儿子,只要不是自己就放进数组中。

Last modification:March 22, 2018
If you think my article is useful to you, please feel free to appreciate