首页 / 更多教程 / WebAPI- DOM节点查找
WebAPI- DOM节点查找
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了WebAPI- DOM节点查找，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3361字，纯文字阅读大概需要5分钟。
内容图文
1. 节点概念
网页一切皆节点
- 节点：html中所有内容都是节点
- 元素：也叫元素节点，html中的标签都是元素
- 节点三要素
- nodeName：节点名字
- nodeValue：节点值
- nodeType：节点类型
元素节点的三个要素的特点： nodeType值为1、nodeName为标签名全大写、nodeValue为 null
2. 查找子节点
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<ul>
<!-- 这里是li标签 -->
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
</ul>
<script>
// 获取子节点，先应该拿到父节点
let ul = document.querySelector("ul");
// 1. 所有子节点（全部包含）：childNodes
console.log(ul.childNodes); //一个换行表示一个text节点，一个注释表示一个comment节点，
// 2. 所有子元素：children
console.log(ul.children); //不能使用forEach
// 3. 获取第一个孩子节点：firstChild
console.log(ul.firstChild);
// 4. 获取第一个孩子元素：firstElementChild
console.log(ul.firstElementChild);
// 5. 最后一个孩子节点：lastChild
console.log(ul.lastChild);
// 6. 最后一个孩子元素：lastElementChild
console.log(ul.lastElementChild);
// 父节点查找子节点：寻找效率高
</script>
</body>
</html>
3. 获取兄弟节点
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li class="current">隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
// 获取目标元素
let current = document.querySelector(".current");
// 1. 前一个兄弟节点：previousSibling
console.log(current.previousSibling);
// 2. 前一个兄弟元素：previousElementSibling
console.log(current.previousElementSibling);
// 3. 后一个兄弟节点：nextSibling
console.log(current.nextSibling);
//4. 后一个兄弟元素：nextElementSibling
console.log(current.nextElementSibling);
</script>
</body>
</html>
4. 获取父节点
◆ 父节点：parentNode
◆ 顶级父节点：document
◆ 父元素：parentElement
◆ 顶级父元素：html
<!DOCTYPE html>
<html lang="zh-CN">
<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">我是小绵羊</div>
<script>
let box = document.querySelector(".box");
//在实际开发中:找节点最多找到body.parentNode和parentElement都没有区别
// 获取父节点
console.log(box.parentNode);
// 获取父元素
console.log(box.parentElement);
//二者有区别:找节点,顶级节点是document; 找元素,顶级元素是html
</script>
</body>
</html>
总结：
5. 案例
点击符号，关闭二维码
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
.box {
position: relative;
width: 107px;
height: 127px;
margin: 100px auto;
}
span {
position: absolute;
width: 22px;
height: 22px;
text-align: center;
left: -24px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<span>X</span>
<img src="images/taobao.jpg" alt="" />
</div>
<script>
// 需求：点击X隐藏图片和按钮本身
// 1. 获取事件源X
// 2. 增加点击事件
// 3. 事件处理：隐藏box父元素
document.querySelector("span").onclick = function () {
this.parentElement.style.display = "none";
};
</script>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的WebAPI- DOM节点查找全部内容，希望文章能够帮你解决WebAPI- DOM节点查找所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】