1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JavaScript-DOM-获取节点父 兄 子节点or元素

JavaScript-DOM-获取节点父 兄 子节点or元素

时间:2024-06-30 05:39:36

相关推荐

JavaScript-DOM-获取节点父 兄 子节点or元素

JavaScript-DOM-获取节点父、兄、子节点or元素

首先先来解释一下节点与元素的区别,不然真的会看的很懵啊!什么是节点?DOM规定:整个文档是一个文档节点,每个标签就是一个元素节点,也就是我们这里所说的元素,元素包含的文本是文本节点,元素的属性是属性节点,注释属于注释节点,等等这些都称之为节点。那什么是元素?元素就是节点中的元素节点,也就是文档中的标签。

上一篇文章中介绍了document对象访问元素的三种方法。那当我们获取到相应的元素对象后又想获得其父、兄、子节点or元素的信息该当如何获取?那接下来就分别来介绍一下都有哪些方法及属性可以帮我们获取想要的信息。

获取子节点

获取父兄节点

获取子元素

获取兄弟元素

亲自试一试

<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM-元素节点示例</title><script>window.onload = function(){let demo1=document.getElementById('demo1');// nextSibling属性获取下一个相邻节点let next = demo1.nextSibling;// 这里demo1的下一相邻节点为换行,所以打印信息为undefinedconsole.log(next.innerText);// nextSibling属性获取下一个相邻元素let nextElement = demo1.nextElementSibling;// 这里demo1的下一相邻节点为换行,所以打印信息为“欲穷千里目”console.log(nextElement.innerText);}</script></head><body><ul><li>白日依山尽</li><li id="demo1">黄河入海流</li><li>欲穷千里目</li><li>更上一层楼</li></ul></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。