DOM节点的基本属性（一）

来源：互联网发布：picplaypost同类软件编辑：程序博客网时间：2024/06/11 06:00

Node类型

每个节点类型都共享着相同的基本属性和方法。

基本属性有：
nodeType: 用于表明节点的类型。
nodeName: 对于元素节点，则保存标签名
nodeValue：对于元素节点，始终为null

childNodes属性

每个节点都有的属性，保存着一个NodeList对象。例如：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>关于dom节点</title>    </head>    <body>        <!-- 这里有换行操作 -->        <p>            <span id="a">sss</span>        </p>        <script type="text/javascript">            console.log(document.getElementsByTagName("p")[0].childNodes);        </script>    </body></html>

输出结果为下图所示，一共有三个节点子节点。
这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>关于dom节点</title>    </head>    <body>        <!-- 这里没有换行操作 -->        <p><span id="a">sss</span></p>        <script type="text/javascript">            console.log(document.getElementsByTagName("p")[0].childNodes);        </script>    </body></html>

输出结果则为：
这里写图片描述
两张图可以清楚地看到，有换行的时候，会有3个子节点，而没有换行的时候就只有1个子节点。这是因为浏览器解析的时候会将换行或者空格都会认为是一个子节点，所以才会出现这样的一个情况。所以用原生js写获取子节点的时候，要注意这种情况，避免取错节点。
获取NodeList中的节点——可以通过方括号，也可以使用item()方法，例如：

/* 下面这两句话是等价的都是获取第一个子节点 */var a = document.getElementsByTagName("p")[0].childNodes[0];var b = document.getElementsByTagName("p")[0].childNodes.item(0);

parentNode属性

每个节点都有该属性，指向文档树中的父节点。同一个NodeList中的子节点都有相同的父节点，即它们的parentNode属性都指向同一个节点。

var a = document.getElementsByTagName("p")[0].childNodes;for(var i=0; i < a.length ; i++) {    console.log(a[i].nodeName + ":" + a[i].parentNode.nodeName);}

输出结果：
这里写图片描述

previousSibling属性

访问同一个childNodes列表中的上一个节点，没有则为null。

var a = document.getElementsByTagName("p")[0].childNodes;console.log(a[1].previousSibling);    // text文本节点

nextSibling属性

访问同一个childNodes列表中的下一个节点，没有则为null。

var a = document.getElementsByTagName("p")[0].childNodes;console.log(a[0].nextSibling);    // span节点

firstChild属性

表示childNodes列表中的第一个节点

lastChild属性

表示childNodes列表中的最后一个节点

hasChildNodes()方法

这是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回true，否则返回false.

<!-- 返回false --><body>    <p></p>    <script type="text/javascript">        var a = document.getElementsByTagName("p")[0];        console.log(a.hasChildNodes());  // false    </script></body><!-- 返回true --><body>    <p>    </p>    <script type="text/javascript">        var a = document.getElementsByTagName("p")[0];        console.log(a.hasChildNodes());  // true，因为浏览器解析时，会将换行或者空格当成一个文本节点    </script></body>

ownerDocument属性

所有节点都有的属性，指向表示整个文档的文档节点，而不需要一层层回溯到达顶端。

var a = document.getElementsByTagName("p")[0];console.log(a.ownerDocument);

这里写图片描述

阅读全文

0 0