文章目录
- DOM选择器
- 传统原生JavaScript选择器
- querySelector和querySelectorAll
DOM是文档对象类型,使用了一个逻辑树来表示文档,树的么一个分支终点都是一个节点,每一个节点都包含对象。通过绑定不同的事件,就可以修改文档的结构、样式喝内容。
DOM选择器
DOM选择器用于快速定位DOM元素,在原生JavaScript中,提供了根据ID、name这些属性来查找元素,后来提供了更高效的querySelector和querySelectorAll选择器,支持丰富的元素、属性和内容选择等等
传统原生JavaScript选择器
一、通过id定位元素,JavaScript提供了getElementById()函数来来查找对应的ID的元素的,返回的是匹配到ID的第一个元素。所以我们在便携html页面的时候,强调一个页面保持每一个id都是唯一的,不应该出现相同的id。
语法:document.getElementById('id')
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li id="li1">id="li1"</li>
<li id="li2"> id="li2"</li>
<li id="li3"> id="li3"</li>
<li id="li4"> id="li4"</li>
<li id="li5"> id="li5"</li>
</ul>
<script>const li1 = document.getElementById('li1')
console.log("li1", li1)</script>
</body>
</html>
二、通过class定位元素,语法:document.getElementsByClassName("classname");
,返回的是匹配到由元素组成的HTMLCollection对象,是一个类数组结构;比如:
const li2 = document.getElementsByClassName("li2");
console.log("li2", li2)
结果:匹配到只有一个class为li2的元素
三、通过name属性定位元素,语法:document.getElementsByName('name');
,返回的是NodeList对象,也是一个类数组结构,结果如图:
四、通过标签名来获取元素,语法:document.getElementsByTagName('tagName');
,在前面的html页面中获取li元素,结果为:
querySelector和querySelectorAll
在通过id、name、class或者标签名来获取元素的时候,只能通过document来调用对应函数,在查找特定元素的时候可能不太方便,比如获取p元素的子元素。为乐更高效的使用选择器,定位到特定的元素或者子元素的时候,后来新增的querySelectorAll和querySelector选择器。
一、querySelector选择器返回的在基准元素下匹配到的元素元素集合的第一个元素,语法: const element = baseElement.querySelector(selectors)
,baseElement表示的是基准元素,常见的基准元素有document和element,selectors表示是一个标准的css选择器,
在前面的id.html中获取ul元素,
const element = document.querySelector('ul');
console.log("element", element)
结果如下图:
获取ul的第一个li元素:
const element = document.querySelector('ul li');
获取第一个li或者h5,代码为:document.querySelector('li,h5)
。
二、querySelectorAll选择器和querySelector类似,区别是返回基准元素匹配的所有元素的集合,代码:
const element = document.querySelectorAll('li')
console.log("element", element)
结果如图:
这就是JavaScript的选择器