获取元素的方法

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：如果发现打印不出来的情况多半是没有获取到元素，记得检查一下。