3.节点的属性
2022-09-26 本文已影响0人
未路过
1.节点的属性-nodeType
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 我是注释 -->
我是文本
<div class="box">
<h2>我是标题</h2>
<p>我是内容, 哈哈哈哈</p>
</div>
<script>
// 1.获取三个节点
var bodyChildNodes = document.body.childNodes;
var textNode0 = bodyChildNodes[0];
//文字节点的nodeType是3
console.log(textNode0); //\n
var commentNode = bodyChildNodes[1]; //comment节点的nodeType是8
var textNode1 = bodyChildNodes[2];
//文字节点的nodeType是3
console.log(commentNode);
var divNode = bodyChildNodes[3];
//元素节点的nodeType是1
// 2.节点属性
// 2.1.nodeType 节点的类型
for (var node of bodyChildNodes) {
if (node.nodeType === 8) {
} else if (node.nodeType === 3) {
} else if (node.nodeType === 1) {
}
}
console.log(commentNode.nodeType, textNode0.nodeType, divNode.nodeType); // 8 3 1
console.log(Node.COMMENT_NODE); //8
</script>
</body>
</html>
2. 节点的属性 – nodeName、tagName
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 我是注释 -->
我是文本
<div class="box">
<h2>我是标题</h2>
<p>我是内容, 哈哈哈哈</p>
</div>
<script>
// 1.获取三个节点
var bodyChildNodes = document.body.childNodes;
var commentNode = bodyChildNodes[1]; //
var textNode = bodyChildNodes[2];
var divNode = bodyChildNodes[3];
// 2.2.nodeName 节点的名称
// tagName: 针对元素(element)
//只要是节点，就有nodeName,但只有元素节点才有tagName
console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName);
//#comment #text DIV
console.log(commentNode.tagName, divNode.tagName);
//undefined 'DIV'
</script>
</body>
</html>
3.节点的属性 - innerHTML、textContent
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 我是注释 -->
我是文本
<div class="box">
<h2>我是标题</h2>
<p>我是内容, 哈哈哈哈</p>
</div>
<script>
// 1.获取三个节点
var bodyChildNodes = document.body.childNodes;
var commentNode = bodyChildNodes[1];
var textNode = bodyChildNodes[2];
var divNode = bodyChildNodes[3];
// 2.3. data(nodeValue)/innerHTML/textContent
// data针对非元素的节点获取数据
// innerHTML: 对应的html元素也会获取
// textContent: 只会获取文本内容
console.log(commentNode.data, textNode.data, divNode.data);
console.log(divNode.innerHTML);
console.log(divNode.textContent);
</script>
</body>
</html>
image.png
// 设置文本, 作用是一样
// 设置文本中包含元素内容, 那么innerHTML浏览器会解析,
//textContent会当成文本的一部分
divNode.innerHTML = "<h2>呵呵呵呵</h2>"
divNode.textContent = "<h2>嘿嘿嘿嘿</h2>"
// 2.4.outerHTML
console.log(divNode.outerHTML);
image.png
4.节点的属性 - nodeValue
image.png
5.节点的其他属性
image.png
hidden的本质是设置display：none
<body>
<button class="btn">切换</button>
<!-- hidden属性 -->
<div id="box" class="cba" title="aaa" style="color: red">
哈哈哈哈哈
</div>
<script>
// 1.获取元素
var boxEl = document.querySelector("#box")
var btnEl = document.querySelector(".btn")
// 2.监听btn的点击
btnEl.onclick = function() {
// 1.只是隐藏
// boxEl.hidden = true
// boxEl.style.display = "none"
// 2.切换
// boxEl.hidden = false
// if (boxEl.hidden === false) {
// boxEl.hidden = true
// } else {
// boxEl.hidden = false
// }
// 3.直接取反
boxEl.hidden = !boxEl.hidden
}
</script>
</body>
