1. 通过id名选取元素：document.getElementById(id名);
// 找到id返回： 元素
// id不存在： 返回 null
例：
<div id="aaa" >啊啊啊</div>
<script>
var div = document.getElementById('aaa')
console.log('div')
// <div id="aaa" >啊啊啊</div>
</script>
2. 通过类名选取元素：document.getElementsByClassName(class名);
// 找到class返回： 元素组成的伪数组
// class不存在： 返回 空数组
例：
<div class="aaa" >啊啊啊</div>
<script>
var div = document.getElementsByClassName('aaa')
console.log('div[0]')
// <div class="aaa">啊啊啊</div>
</script>
3. 通过标签名选取元素：document.getElementsByTagName(标签名);
// 找到tag返回： 元素组成的伪数组
// tag不存在： 返回 空数组
例：
<div>啊啊啊</div>
<script>
var div = document.getElementsByTagName('div')
console.log('div[0]')
// <div>啊啊啊</div>
</script>
4. 通过name属性选择元素：document.getElementsByName(name值);
// 找到name返回： 元素组成的伪数组
// name不存在： 返回 空数组
例：
<div name="aaa" >啊啊啊</div>
<script>
var div = document.getElementsByName('aaa')
console.log('div[0]')
// <div name="aaa">啊啊啊</div>
</script>
5. 采用css选取器语法来选取元素：document.querySelector(css选择器);
只会选取符合条件的第一个元素
①、document.querySelector('div'); // 通过标签名
例：
<div>啊啊啊</div>
<script>
var div = document.document.querySelector('div')
console.log('div[0]')
// <div>啊啊啊</div>
</script>
②、document.querySelector('#div'); // 通过id名
<div id="aaa">啊啊啊</div>
<script>
var div = document.document.querySelector('#aaa')
console.log('div[0]')
// <div id="aaa">啊啊啊</div>
</script>
③、document.querySelector('.div'); // 通过类名
例：
<div class="aaa">啊啊啊</div>
<script>
var div = document.document.querySelector('.aaa')
console.log('div[0]')
// <div class="aaa">啊啊啊</div>
</script>
④、document.querySelector('div>span'); // 通过子选择器
例：
<div>
<span>啊啊啊</span>
</div>
<script>
var div = document.querySelector('div>span')
console.log('span[0]')
// <div>
<span>啊啊啊</span>
</div>
</script>
6. 采用css选取器语法来选取元素：document.querySelectorAll(选择器语法);
会选取所有符合条件的元素
①、document.querySelectorAll('div'); // 通过标签名
例：
<div>啊啊啊</div>
<div>哈哈哈</div>
<script>
var div = document.querySelectorAll('div')
console.log('div')
// <div>啊啊啊</div>
// <div>哈哈哈</div>
</script>
②、document.querySelectorAll('.div'); // 通过类名
例：
<div class="aaa">啊啊啊</div>
<div class="aaa">哈哈哈</div>
<script>
var div = document.querySelectorAll('.aaa')
console.log('div')
// <div class="aaa">啊啊啊</div>
// <div class="aaa">哈哈哈</div>
</script>
7. 通过相对于当前窗口左上角的横纵坐标：document.elementFromPoint(x,y);
返回位于页面指定位置的元素，如果该元素不可返回则返回它的父元素，
坐标值负值无意义，返回null
ps：如果发现打印不出来的情况多半是没有获取到元素，记得检查一下。
