获取元素的方法
getElementById
<body>
<div id="dv"></div>
<script>
// 获取页面的id为dv的元素
// get(获取) Element(元素) By(通过) Id
var dv = document.getElementById('dv')
console.log(dv); // 返回的是一个对象
console.log(typeof dv); // 验证是不是对象
console.dir(dv) // 查看对象的结构
console.log(dv.nodeName) // 对象: 通过键: nodeName => 值: DIV
// typeof缺点: 无法判断具体对象
console.log(typeof []); // object
// 判断的对象 instanceof 判断的类型 || isArray()
console.log([] instanceof Array); // object
</script>
</body>
getElementsByTagName
<body>
<div class="dv">蒙奇D.路飞</div>
<div class="dv">罗罗诺亚.索隆</div>
<div class="dv">娜美</div>
<div class="dv">乌索普</div>
<div class="dv">山治</div>
<div class="dv">乔巴</div>
<div class="dv">罗宾</div>
<div class="dv">弗兰奇</div>
<div class="dv">布鲁克</div>
<div class="dv">甚平</div>
<div class="dv">大和</div>
<div class="dv">原来一群人的梦想可以成为几亿人的期待</div>
<ul id="uu">
<div>艾斯</div>
</ul>
<script>
// get(获取) Elemnts(多个元素) By(通过) TagName(标签名)
var arr = document.getElementsByTagName('div')
console.log(arr); // 返回的是一个伪数组
// 伪数组: 可以存储元素 有length属性 能遍历 但是不能调用数组的方法
// arr.push('111') // 报错: arr.push is not a function
// console.log(arr.length);
// for (var i = 0; i < arr.length; i++) {
// console.log(i); // 输出所有下标
// console.log(arr[i]); // 输出所有元素 => 通过下标获取元素
// }
// 如何将伪数组转成真正的数组Array.from()
// 通过类名调用的方式称之为静态方法
// 通过实例化对象调用的方法称之为实例方法
var newArr = Array.from(arr)
newArr.push(111)
console.log(newArr);
// 获取指定元素下的元素
var uu = document.getElementById('uu')
var dvs = uu.getElementsByTagName('div')
console.log(dvs);
// 链式调用
var dvs2 = document.getElementById('uu').getElementsByTagName('div')
console.log(dvs2);
</script>
</body>
下面是：
getElementsByClassName
<body>
<div class="dv">橘右京</div>
<div class="dv">赵云</div>
<div class="dv">澜</div>
<div class="dv">李白</div>
<div class="dv">马超</div>
<div class="dv">兰陵王</div>
<div class="dv">百里守约</div>
<ul>
<div></div>
</ul>
<script>
// H5新增
// get(获取) Elements(多个元素) By(通过) ClassName(class对应的值)
// 返回值: 伪数组
var arr = document.getElementsByClassName('dv')
console.log(arr);
</script>
</body>
querySelector
<body>
<div class="dv" id="dv">疫情防控 人人有责</div>
<!-- <div class="dv">从我做起</div> -->
<script>
// querySelector('选择器') 和css中选择器一样
// var dv = document.querySelector('.dv')
// console.log(dv);
// document.querySelector('div')
// document.querySelector('#dv')
// document.querySelectorAll('选择器')
// 返回的是一个伪数组
// var arr = document.querySelectorAll('div')
// console.log(arr);
// 获取body
// console.log(document.body);
// 获取html根元素
console.log(document.documentElement);
</script>
</body>
最后一个小总结！
