js获取一个元素节点的子节点的方法（包括非文本节点）

JavaScript获取元素子节点技巧

最新推荐文章于 2025-07-20 22:47:24 发布

原创最新推荐文章于 2025-07-20 22:47:24 发布 · 8.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #JavaScript

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript中获取元素节点子节点的方法，包括通过`childNodes`属性获取所有子节点，以及利用`previousElementSibling`和`nextElementSibling`获取相邻兄弟节点。内容详细解释了节点对象的`nodeType`、`nodeName`和`nodeValue`等属性，帮助理解元素、属性和文本节点的区别。

先来简单复习一下：

1.文档中每个元素、属性、文字、注释、都被看做一个节点对象。

当网页被加载进了内存时，浏览器会为网页创建一个document对象，所有节点都是document对象的子节点。

Node：所有节点对象的父节点

nodeType：节点的类型元素节点---》1

属性节点---》2

文本节点---》3

nodeName：节点的名称元素节点---》返回全大写标签名

文本节点---》返回#text

nodeValue：节点的值元素节点---》null

文本节点---》返回文本内容

childNodes：获得当前节点对象的所有子节点返回类型是object 可通过下标访问

previousElementSibling：上一个兄弟节点

nextElementSibling：下一个兄弟节点

2.如何获得一个元素下的子节点，看例子：

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var ul=document.getElementById("ul");
    var child=ul.childNodes;    //此方法获取的节点包括了换行的文本节点text
    console.log(child);
    var childElem=ul.getElementsByTagName("li");  //此方法获取的节点只包括元素节点，通过标签名直接查找
    console.log(childElem);
</script>