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

JavaScript获取元素子节点技巧
本文介绍了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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值