JavaScript DOM 元素查找
DOM 操作流程
查找元素
- 直接获取
- 按关系查找
- 按 HTML 查找
- 按选择器查找
直接获取
DOM中不需要查找可以直接获取的节点:
- document:document
- html:document.documElement
- head:document.head
- body:document.body
//直接获取
console.log(document) // document
console.log(document.documentElement) // html
console.log(document.head) // head
console.log(document.body) // body
按节点间的关系查找
Node 类型中定义了节点树中所有节点彼此间关系属性。
- 父节点(parent node)
- 子节点(child node)
- 兄弟节点(sibling)
节点树的节点彼此拥有层级关系,Node类型使用如下属性关联节点树上的内阁节点对象:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<span>hello</span>
<h1>标题一</h1>
<ul>
<li><a>查看全部</a></li>
</ul>
<script src="mJS.js"></script>
</body>
</html>
JavaScript
// 按节点关系查找
// parentNode 父节点
// childNodes 父节点集合
// firstNode 第一个子节点
// lastNode 最后一个子节点
// previousSibling 前一个兄弟节点
// nextSilbing 下一个兄弟节点
//查看body的父节点
console.log(document.body.parentNode) // html
//查看HTML的直接子节点
console.log(document.documentElement.childNodes) // 类数组集合
console.log(document.documentElement.childNodes[0]) //
console.log(document.documentElement.childNodes[1]) //
console.log(document.documentElement.childNodes[2]) //
// 查看 body 的直接子节点
console.log(document.body.childNodes)
// 查看body下的span
console.log(document.body.firstChild.nextSibling)
// 从body访问head
console.log(document.body.previousSibling.previousSibling)
按元素间关系查找
仅包含元素节点不包含文字节点的树结构,我们称之为元素树。
元素树不是一颗新的树,仅是节点树中所有元素节点组成的子集。
通过元素树选取元素,可以吧空字符节点和文本节点忽略掉,只选取元素节点。
通过元素树来选取元素,他和节点树的属性是一一对应的
html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<span>hello</span>
<h1>标题一</h1>
<ul>
<li><a>查看全部</a></li>
</ul>
<script src="mJS.js"></script>
</body>
</html>
JavaScript
// 按元素关系查找
// parentElement 父元素
// children 子元素集合
// firstElementChild 第一个子元素
// lastElementChild 最后一个子元素
// previousElementSibling 前一个兄弟元素
// nextElementSilbing 下一个兄弟元素
//查看body的父元素
console.log(document.body.parentElement) // html
//查看HTML的直接子元素
console.log(document.documentElement.children) // 类数组集合
console.log(document.documentElement.children[0]) //
console.log(document.documentElement.children[1]) //
// 查看 body 的直接子元素
console.log(document.body.children)
// 查看body下的span
console.log(document.body.firstElementChild)
// 从body访问head
console.log(document.body.previousElementSibling)
按 HTML 查找
按 HTML 查找元素,可以快速的定位到目标元素上。
四种方式:
- 按 id 查找
- 按 name 查找
- 按 标签名 查找
- 按 class 查找
按 id 查找
可查找具有某个 id 属性的元素。
- document.getElementById(" id 值 ");
返回一个元素对象。
如果没有找到,返回 null。
只能在 document 上调用。
按 name 查找
可查找具有某个 name 属性值得元素,用于表单元素和具有 name 属性的锚点元素。
- document.getElementsByName(" name 值 ");
返回一个动态元素集合。
如果没有找到,则返回空集合。
只能在 document 上调用。
按 标签名 查找
可查找某个父元素下,具有指定标签名的后代元素。
- parent.getElementsByTagName(" 标签名 ");
返回一个动态元素集合。
如果没有找到,返回空集合。
可在任意父元素上调用。
按 class 查找
可查找某个父元素下,具有指定 class 属性值得后代元素。
- parent.getElementsByClassName(" class 名 ")
返回一个动态的元素集合。
如果没找到,返回空集合。
可在任意父元素上调用。
代码案例
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<span>Hello Word!</span>
<ul id="nav">
<li>电影</li>
<li>综艺
<ul id="subnav">
<li class="hot active">跑男</li>
<li>奇葩说</li>
</ul>
</li>
<li>电视剧</li>
</ul>
<div class="active">
<input name="gender" type="radio">男
<input name="gender" type="radio">女
</div>
<script src="mJS.js"></script>
</body>
</html>
JavaScript
/* 按 HTML 查找
document.getElementById("id")
document.getElementsByName("name")
parent.getElementsByTagName("tagName")
parent.getElementsByClassName("class")
*/
// 查找id为nav的元素
console.log(document.getElementById("nav"));
// 查找id为n的元素 ,没有输出为 null
console.log(document.getElementById("n"));
// 查找name 为 gender的元素
console.log(document.getElementsByName("gender"))
console.log(document.getElementsByName("gender")[0])
console.log(document.getElementsByName("gender").length)
// 查找所有的 li 元素
console.log(document.getElementsByTagName("li"))
// 查找 id 为subnav 下所有的的li
console.log(document.getElementById("subnav").getElementsByTagName("li"))
var subnav = document.getElementById("subnav")
var subli = subnav.getElementsByTagName("li")
console.log(subli)
// 查找所有class为 active 的元素
console.log(document.getElementsByClassName("active"))
console.log(document.getElementsByClassName("a"))
元素遍历
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<span>Hello Word!</span>
<ul id="nav">
<li>电影</li>
<li>综艺
<ul id="subnav">
<li class="hot active">跑男</li>
<li>奇葩说</li>
</ul>
</li>
<li>电视剧</li>
</ul>
<div class="active">
<input name="gender" type="radio">男
<input name="gender" type="radio">女
</div>
<script src="mJS.js"></script>
</body>
</html>
JavaScript
// 遍历所有的 li 元素
var lis = document.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
console.log(lis[i])
}
如何遍历
遍历代码优化:
// 遍历所有的 li 元素
var lis = document.getElementsByTagName("li")
for (var i = 0, len = lis.length; i < len; i++) {
console.log(lis[i])
}
实现显示和隐藏
HTML
<style>
.show{
display: block ;
}
.hide{
display: none;
}
</style>
<div id="tree">
<h3>考勤管理</h3>
<ul>
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</div>
操作流程
案例代码
HTML
<style>
.show{
display: block ;
}
.hide{
display: none;
}
</style>
<div id="tree">
<h3>考勤管理</h3>
<ul>
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</div>
JavaScript
// 1.构建 DOM 树
// 2.查找触发事件的元素
var tree = document.getElementById("tree");
var h3 = tree.firstElementChild;
console.log(h3)
// 3.绑定事件 elem.onclick = function(){/* 处理程序 */}
h3.onclick = function () {
// 4.查找要修改的元素
var ul = h3.nextElementSibling;
// 5.修改 获取或修改 class : elem.className = 新值
if (ul.className == "show" || ul.className == "") {
ul.className = "hide"; // 改为 隐藏
} else {
ul.className = "show"; // 改为 显示
}
}
安 选择器 查找
可以按 css 的选择器查找,查找父元素下的后代元素。
- parent.querySelector(" selector ");
- 返回匹配到的第一个元素。
- parent.querySelectorAll(" selector ");
- 返回一个非动态元素集合。
- 若没找到,返回空集合。
案例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*修改calss为active的li元素的背景颜色*/
li.active{ background: lightblue;}
</style>
</head>
<body>
<span>Hello World!</span>
<ul>
<li class="active"></li>
</ul>
<ul id="nav">
<li>电影</li>
<li>综艺
<ul id="subnav">
<li class="hot active">跑男</li>
<li>奇葩说</li>
</ul>
</li>
<li>电视剧</li>
</ul>
<div class="active">
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
</div>
<input type="text" value="请输入用户名">
<script src="01.js"></script>
</body>
</html>
JavaScript
//查找所有class为active的li元素
console.log(document.getElementsByTagName("li"));//li
console.log(document.getElementsByClassName("active"));//active
console.log(document.querySelector("li.active"))
console.log(document.querySelectorAll("li.active"))