1.document对象查找Html元素
以下表格是获取Html元素的常用方法:
(1.)getElementById方法:返回值是元素对象,如果没有符合的条件对象,则返回为null;
(2.)getElementsByTagName: 返回值是数组对象,如果没有符合条件的对象,则返回为空数组
(3.)getElementsByName: 返回的是指定标签名的元素对象集合,如果无符合条件的对象,则返回为空数组。
(4.)getElementsByClassName: 返回值为指定类名的元素集合,元素集合中的顺序以其中在代码中出现的次序排序,可通过下标方式来访问指定的元素 (索引号从0开始)
2.Html新增的获取元素方法
以下代码作为案例复习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<script>
//使用getElementsByClassName方法返回指定类名元素集合
var obj = document.getElementsByClassName('box');
console.log(obj);
//使用querySelector方法返回指定选择器第一个元素对象
// 切记 里面的选择器需要加符号,这样开发工具和网站会自动识别 如.box #box
var obj2 = document.querySelector('.box');
console.log(obj2); //返回的是盒子1元素对象
//使用querySelectorAll方法返回指定选择器元素对象集合
var obj3 = document.querySelectorAll('li');
console.log(obj3);
</script>
</body>
</html>