JavaScript--元素节点之间关系

最新推荐文章于 2022-08-22 09:44:13 发布

快乐的小火猴

最新推荐文章于 2022-08-22 09:44:13 发布

阅读量208

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/look857857/article/details/123783854

版权

本文介绍了JavaScript中元素节点之间的关系，包括父元素、子元素和兄弟元素的操作。通过示例详细讲解了如何获取和操作这些节点，如使用parentNode、children、childNodes、nextSibling等属性。同时，还探讨了元素节点的创建、添加、删除和替换方法，以及onScroll滚动事件的处理。

摘要由CSDN通过智能技术生成

元素节点之间的关系

主要划分为父元素子元素兄弟元素（同胞元素）

//box 里面包含了div和对应的p和a标签
//innerbox里面包含了b标签
var innerBox = document.getElementById('innerBox') //获取innerbox这个元素

// 父节点 parentNode （只有一个）
console.log( innerBox.parentNode); //获取父节点就是box 返回Node
console.log(innerBox.parentElement); //获取父元素返回element

//子节点 children 获取子节点（获取的是多个）返回的是一个htmlCollection
console.log(innerBox.children); //获取所有的子元素节点
console.log(innerBox.children[0]); //获取第一个子元素（常用的）

//节点集合
consle.log(innerBOX.childNodes); //返回所有的子节点（会包含元素节点文本节点属性节点）

//获取第一个/最后一个子节点（相当于 innerBo