DOM 让我们可以对元素和它们中的内容做任何事,但是首先我们需要获取到对应的 DOM 对象。

对 DOM 的所有操作都是以 document 对象开始。它是 DOM 的主“入口点”。从它我们可以访问任何节点。

documentElement 和 body

最顶层的树节点可以直接作为 document 的属性来使用:

  • <html> = document.documentElement: 最顶层的 document 节点是 document.documentElement。这是对应 <html> 标签。

  • <body> = document.body: 另一个被广泛使用的 DOM 节点是 <body> 元素 — document.body

  • <head> = document.head: <head> 标签可以通过 document.head 访问。

父子兄关系

节点的访问关系,是以属性的方式存在的。

获取父节点

elem.parentNode;

获取兄弟节点

1、下一个节点 | 下一个元素节点

Sibling 的中文是兄弟

(1)nextSibling

  • 火狐、谷歌、IE9+版本:都指的是下一个节点(包括标签、空文档和换行节点)。

  • IE678 版本:指下一个元素节点(标签)。

(2)nextElementSibling

  • 火狐、谷歌、IE9+版本:都指的是下一个元素节点(标签)。

总结:为了获取下一个元素节点,我们可以这样做:在 IE678 中用 nextSibling,在火狐谷歌 IE9+以后用 nextElementSibling,于是,综合这两个属性,可以这样写:

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling;

2、前一个节点 | 前一个元素节点

previous 的中文是:前一个。

(1)previousSibling

  • 火狐、谷歌、IE9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。

  • IE678 版本:指前一个元素节点(标签)。

(2)previousElementSibling

  • 火狐、谷歌、IE9+版本:都指的是前一个元素节点(标签)。

总结:为了获取前一个元素节点,我们可以这样做:在 IE678 中用 previousSibling,在火狐谷歌 IE9+以后用 previousElementSibling,于是,综合这两个属性,可以这样写:

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling;

获取子节点

获取单个的子节点

1、第一个子节点 | 第一个子元素节点

(1)firstChild

  • 火狐、谷歌、IE9+版本:都指的是第一个子节点(包括标签、空文档和换行节点)。

  • IE678 版本:指第一个子元素节点(标签)。

(2)firstElementChild

  • 火狐、谷歌、IE9+版本:都指的是第一个子元素节点(标签)。

总结:为了获取第一个子元素节点,我们可以这样做:在 IE678 中用 firstChild,在火狐谷歌 IE9+以后用 firstElementChild,于是,综合这两个属性,可以这样写:

第一个子元素节点 = 节点.firstElementChild || 节点.firstChild;

2、最后一个子节点 | 最后一个子元素节点

(1)lastChild

  • 火狐、谷歌、IE9+版本:都指的是最后一个子节点(包括标签、空文档和换行节点)。

  • IE678 版本:指最后一个子元素节点(标签)。

(2)lastElementChild

  • 火狐、谷歌、IE9+版本:都指的是最后一个子元素节点(标签)。

总结:为了获取最后一个子元素节点,我们可以这样做:在 IE678 中用 lastChild,在火狐谷歌 IE9+以后用 lastElementChild,于是,综合这两个属性,可以这样写:

最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild;

获取所有的子节点

(1)childNodes :标准属性。返回的是指定元素的**所有子节点的集合(包括元素节点、所有属性、文本节点)。

用法:

子节点数组 = 父节点.childNodes; //获取所有节点。

(2)children:非标准属性。返回的是指定元素的子元素节点的集合。(标签节点)

用法:(用的最多

子节点数组 = 父节点.children; //获取所有节点。用的最多。

获取除自己以外的所有兄弟节点

function getSiblings(el) {
    var siblings = [];
    var pNode = el.parentNode;
    var children = pNode.children;
    for (var i = 0; i < children.length; i++) {
            // 不是el再push
            if (children[i] !== el) {
                siblings.push(children[i]);
            }
    }
    return siblings;
}

nodeType 属性

这里讲一下 nodeType 属性。

  • nodeType == 1 表示的是元素节点(标签) 。记住:元素就是标签。

  • nodeType == 2 表示是属性节点(该类型已弃用)。

  • nodeType == 3 是文本节点。

  • nodeType == 8 注释节点

文档更新时间: 2021-08-04 07:48   作者:张老师