JS中的节点

最新推荐文章于 2022-07-28 09:52:04 发布

爱你孤身走安详

最新推荐文章于 2022-07-28 09:52:04 发布

阅读量1.3k

点赞数 2

文章标签： maven

本文链接：https://blog.csdn.net/linlinaitangtang/article/details/124392026

版权

1.什么是节点：

元素节点就是页面中的标签
文本节点包括内容、空格、回车(换行)
注释节点就是你写的注释
文档节点就是整个大文档(整个页面)
localName 小写标签名
tagName 大写标签名

2.节点的属性：

childNodes ：获取的所有的子节点
children ：获取所有的元素子节点（子元素标签集合）（在IE6~8下不兼容）
firstChild ：获取第一个子节点
lastChild ：获取最后一个子节点
firstElementChild ：获取第一个元素子节点（在IE6~8下不兼容）
lastElementChild ：获取最后一个元素子节点（在IE6~8下不兼容）
previousSibling ：获取上一个同级节点（获取上一个哥哥节点）
nextSibling ：获取下一个同级节点（获取下一个弟弟节点）
previousElementSibling：获取上一个同级元素节点（在IE6~8下不兼容）（获取哥哥元素节点）
nextElementSibling ：获取上一个同级元素节点（在IE6~8下不兼容）（获取弟弟元素节点）
parentNode ：获取父节点

3.获取元素节点的通常用到的两种方式：
1.利用DOM提供的方法获取元素(逻辑性不强，繁琐)
2.利用节点层级关系获取元素(逻辑性强，兼容稍差)

父节点：

<div class="box">
<span class="erweima"></span>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回 null
console.log(erweima.parentNode);
</script>

兄弟节点：

<body>

</ul>

</body>

var oUI = document.getElementById("box");

console.log(oUI.id);

console.log(oUI.a);

console.log(oUI.getAttribute("id"));

console.log(oUI.getAttribute("a"));//可以获取自定义属性

兄弟节点：

<body>

</ul>

</body>

var oUI = document.getElementById("box");

console.log(oUI.id);

console.log(oUI.a);

console.log(oUI.getAttribute("id"));

console.log(oUI.getAttribute("a"));//可以获取自定义属性

//设置

// oUI.title = "hello"

// oUI.b = 100;

oUI.setAttribute("title", "hello")

oUI.setAttribute("b", 100);

oUI.removeAttribute("a");

爱你孤身走安详

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS中的节点

1.什么是节点：元素节点就是页面中的标签文本节点包括内容、空格、回车(换行) 注释节点就是你写的注释文档节点就是整个大文档(整个页面) localName 小写标签名 tagName 大写标签名2.节点的属性：childNodes ：获取的所有的子节点children ：获取所有的元素子节点（子元素标签集合）（在IE6~8下不兼容）firstChild ：获取第一个子节点lastChild ：获取最后一个子节点firstElementChild ：获取第一个元素子节点（在
复制链接

扫一扫