JS DOM节点（父级元素、父级节点、子级元素、子级节点、..之间的关系）

最新推荐文章于 2024-03-08 21:31:58 发布

原创最新推荐文章于 2024-03-08 21:31:58 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

HTML 同时被 2 个专栏收录

55 篇文章

订阅专栏

41 篇文章

订阅专栏

这篇博客介绍了JavaScript中DOM节点的相关属性，包括NodeType、NodeName和NodeValue。同时，详细讲解了如何获取父级元素和父级节点、子级元素和子级节点，以及兄弟元素的方法，如firstElementChild、lastElementChild、previousElementSibling和nextElementSibling，并指出在IE8中的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节点属性
1.NodeType: 节点类型:1-----表示标签 2-----表示属性 2---文本
2.NodeName: 节点的名字标签----大写标签名属性----小写的属性文本节点
3.NodeValue: 节点值: 标签--null 属性--属性值文本---文本内容

<div id="dv">
    <span id="sp">这是span标签</span>
    <div>儿子div</div>
    <ul id="uu">
        <li>略略略</li>
        <li id="ll">啦啦啦</li>
        <li>嘿嘿嘿</li>
    </ul>
</div>

父级元素和节点
//获取父级元素和父级节点
var parentObj=document.getElementById('sp');
//获取父级元素
console.log(spObj.parentElement);
//获取父级节点
console.log(spObj.parentNode);

//父级节点属性
console.log(spObj.parentNode.nodeName);
console.log(spObj.parentNode.nodeType);
console.log(spObj.parentNode.nodeValue);

子级元素和节点

var ulObj = document.getElementById('uu');
var liObj = document.getElementById('ll');
//获取第一个子级元素,第一个节点
console.log(ulObj.firstElementChild);//------>ie8不支持
console.log(ulObj.firstChild);//在ie8中得到是第一个子集元素

//获取最后一个子级元素,最后一个节点
console.log(ulObj.lastElementChild);//------>ie8不支持
console.log(ulObj.lastChild);//在ie8中得到是最后一个子集元素

//获取li的上一个兄弟元素,上一个兄弟子级
console.log(liObj.previousElementSibling);//------>ie8不支持
console.log(liObj.previousSibling);//在ie8中得到是上一个兄弟子集元素

//获取li的下一个兄弟元素,下一个兄弟子级
console.log(liObj.nextElementSibling);//------>ie8不支持
console.log(liObj.nextSibling);//在ie8中得到是下一个兄弟集元素