@[TOC]
获取 DOM 节点
HTML 中的 Element 对象可以通过 Document 对象获取,而 Document 对象是通过 window 对象获取。
Document 对象中提供了以下获取 Element 元素对象的函数
getElementById() :根据id属性值获取,返回单个Element对象
getElementsByTagName() :根据标签名称获取,返回Element对象数组
getElementsByName() :根据name属性值获取,返回Element对象数组
getElementsByClassName() :根据class属性值获取,返回Element对象数组
querySelector() 返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。 如果找不到匹配项,则返回 null 。
querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
1.getElementById() 根据 id 属性值获取元素对象,返回单个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id">学习学习</div>
<script>
var res = document.getElementById("id");
window.alert(res);
</script>
</body>
</html>
结果:
2.getElementsByTagName() 根据标签名称获取所有的 div 元素对象
<script>
var divs = document.getElementsByTagName("div"); // 返回一个数组,数组中存储的是 div 元素对象
// alert(divs.length); //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
</script>
3.getElementsByName:根据name属性值获取,返回Element对象数组
<body>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<script>
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}
</script>
</body>
4. getElementsByClassName:根据class属性值获取,返回Element对象数组
<body>
<div class="cls">小腾</div> <br>
<div class="cls">学习前端</div> <br>
<p class="cls">加油</p>
<script>
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}
</script>
</body>
5.querySelector() 返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。
<body>
<div class="list"> 我可以被改变 </div>
<br>
<script>
var listEle = document.querySelector('.list');
listEle.innerHTML = "nihao";
</script>
</body>
如果显示应该显示 我应该被改变 不过经过操作,已经被改成了:
6.querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表
<body>
<ul>
<li>GOOD1</li>
<li>GOOD2</li>
<li>GOOD3</li>
<li>GOOD4</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>
</body>