文章目录
一、主要方法
- getElementById()
- querySelector()
二、两种方法的区别
一、主要方法：
1.getElementById()
代码如下（示例）：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
border: 0;
padding: 0;
}
#box {
height: 200px;
width: 200px;
background-color: #FFA500;
text-align: center;
}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<script type="text/javascript">
document.getElementById('box')
</script>
</body>
</html>
document.getElementById();
????????document -文档? (范围)
????????.? ? ?的
????????get? ?获取
????????Element 元素
????????by? ? 通过
????????id? ? id选择器
????????通过id来获取当前文档中的元素。
?? ??? ?js区分大小写！！！！！
2.querySelector()
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
button {
width: 100px;
height: 35px;
text-align: center;
font: 22px/35px "微软雅黑";
/* 文字大小/行高 */
}
</style>
</head>
<body>
<button type="button" id="btn1">按钮</button>
<!-- <button type="button" class="btn2">按钮</button> -->
</body>
<script type="text/javascript">
console.log(document.querySelector('#btn1'));
// console.log(document.querySelector('.btn2'));
</script>
</html>
可以使用id或者class两种css的选择器。
二、两种方法的区别：
1.getElementById('id')
????????(1)只能获取id的元素
????????(2)如果获取一个不存在的元素，检查元素时的结果时null
????????(3)这个方法只有document下有，id是当前页面的唯一的 不存在使用父级下面的id
????????(4) 遇到第一个符合条件的元素就返回第一个元素
2.querySelector('选择器')
????????(1)如果获取一个不存在的元素，检查元素时的结果时null
????????(2)遇到第一个符合条件的元素就返回第一个元素
? ? ? ? (3)可以在父级元素下找到某个元素（指定父级来精确获取）
console.log(document.querySelector('.div1').querySelector('div2'));
console.log(document.querySelector('.div1 div2');(符合css里面的包含选择器)
????????(4)缺点：IE8以下不可使用
|