JS获取子节点

最新推荐文章于 2024-05-12 06:39:14 发布

东方求败、

最新推荐文章于 2024-05-12 06:39:14 发布

阅读量1k

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： JavaScript DOM 子节点元素节点属性

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120011011

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

JS获取子节点

childNodes 访问当前节点下所有的子节点
firstChild 访问子节点中的首位
lastChild 访问子节点中的最后一位
parentNode 访问当前节点的父节点
nextSibling 访问当前节点兄弟节点中的下个节点
perviousSibling 访问当前节点兄弟节点中的上个节点

【注】上述这些属性都包含文本节点

【注】下述这些方法值获取字节点中的元素节点

children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
        nodeType    nodeName    nodeValue
元素节点    1        标签名        null
属性节点    2        属性名       属性值
文本节点    3        #text       文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
	   window.onload = function() {
		   var oDiv = document.getElementById("div1");
		   alert(oDiv.childNodes[0].nodeType); //3
		   alert(oDiv.childNodes[0].nodeName); //#text
		   alert(oDiv.childNodes[0].nodeValue);//div文本
		   
		   alert(oDiv.childNodes[1].nodeType); //1
		   alert(oDiv.childNodes[1].nodeName); //EM
		   alert(oDiv.childNodes[1].nodeValue);//null
		   
		   alert(oDiv.childNodes[2].nodeType); //1
		   alert(oDiv.childNodes[2].nodeName); //STRONG
		   alert(oDiv.childNodes[2].nodeValue);//null
	   }
    </script>
</head>
<body>
    <div id="div1">div文本<em>em文本</em><strong>strong文本</strong></div>
</body>
</html>

东方求败、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS获取子节点

JS获取子节点childNodes 访问当前节点下所有的子节点firstChild 访问子节点中的首位lastChild 访问子节点中的最后一位parentNode 访问当前节点的父节点nextSibling 访问当前节点兄弟节点中的下个节点perviousSibling 访问当前节点兄弟节点中的上个节点【注】上述这些属性都包含文本节点【注】下述这些方法值获取字节点中的元素节点childrenfirstElementChildlastElementChildnextElemen
复制链接

扫一扫