1、通过ID获取(getElementById)
根据指定的 id 属性值得到对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>通过id查找HTML元素</h1>
<div id="box"></div>
</body>
<script type="text/javascript">
//获取id值为box的元素
var box=document.getElementsByTagName("box");
//给其添加内容
box.innerHTML="我是div";
</script>
</html>
2、通过标签名查找 HTML 元素(getElementsByTagName)
根据标签名得到对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>通过标签名查找HTML元素</h1>
<div></div>
</body>
<script type="text/javascript">
//获取div标签
var div=document.getElementsByTagName("div")[0];
//在div标签里添加内容
div.innerHTML="我是div";
</script>
</html>
3、通过类名查找 HTML 元素(getElementsByClassName)
根据类名得到对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>通过类名查找HTML元素</h1>
<p class="text"></p>
</body>
<script type="text/javascript">
//获取class值为text的元素
var text=document.getElementsByClassName("text")[0];
//给其添加内容
text.innerHTML="我是p标签";
</script>
</html>
4、通过name属性查找 HTML 元素(getElementsByName)
根据name属性得到对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>通过name属性查找HTML元素</h1>
<div name="text"></div>
</body>
<script type="text/javascript">
//获取有name属性的元素
var div=document.getElementsByName("text")[0];
//将其打印出来
console.log(div);
</script>
</html>
5、通过选择器获取一个元素(querySelector)
根据css选择器得到对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>通过CSS选择器查找HTML元素</h1>
<div class="div"></div>
<p id="p"></p>
</body>
<script type="text/javascript">
//获取div标签
var div=document.querySelector(".div");
//获取p标签
var p=document.querySelector("#p");
//将其打印出来
console.log(div);
console.log(p);
</script>
</html>
6、通过选择器获取一组元素(querySelectorAll)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>通过CSS选择器查找所有HTML元素</h1>
<p class="text">我是p1</p>
<p class="text">我是p2</p>
<p class="text">我是p3</p>
</body>
<script>
// 获取文档中所有 class="text" 的 <p> 元素
var text = document.querySelectorAll(".text");
// 设置 class="text" 的第一个 <p> 元素的背景颜色
text[0].style.backgroundColor = "red";
</script>
</html>