众多js库中最长用的一项功能,就是根据css选择符选择与某个模式匹配的DOM元素,jq的核心就是通过css选择付查询DOM文档取得元素的引用,从而抛开了
getElementById()和getElementsByTagName()
querySelector()方法
调用的对象包括:Document(文档) DocumentFragment(文档片段) Element(元素)
接受一个css选择符,返回与该模式匹配的第一个元素,如果没有找到则返回null;
<div id='div1' class='div2'>123 <div class='div3'>456</div> </div> <script> var body = document.querySelector('body');//类型选择 var div1 = document.querySelector('#div1');//id选择 div1.style.borderColor = 'black'; var div2 = document.querySelector('.div2');//类选择 div1.style.color = 'black'; var div3 = document.body.querySelector('div.div3');//类选择内的第一个div元素 div3.style.borderColor = 'red'; </script>
获取文档中第一个<p>元素:
document.querySelector('p');
获取文档中class='example'的第一个元素:
获取文档中id='example'的第一个元素:
document.querySelector('.example');
document.querySelector('#example');
获取文档中有‘target’属性的第一个<a>元素
document.querySelector('a[target]');
假定你选择了两个选择器:<h2>和<h3>元素
以下代码将为文档的第一个<h2>元素添加背景元素
<h2>A h2 element</h2> <h3>A h3 element</h3> document.querySelector('h2,h3').style.backgroundColor = 'red';
如果<h3> 元素位于<h2>元素之前,h3元素仙贝更改元素
<h3>A h2 element</h3> <h2>A h3 element</h2> document.querySelector('h2,h3').style.backgroundColor = 'red';
获取文档中 class="example" 的第一个 <p> 元素:
<h2 class="example">class="example" 的标题</h2> <p class="example">class="example" 的段落。</p> <p>点击按钮为第一个带有 class="example" 的 p 元素添加背景颜色。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.querySelector("p.example").style.backgroundColor = "red"; } </script>
实例:属性选择符和class(或ID)选择符的区别
<body> <p index='klkx'>456</p> <a index='klkx' class='p1' id='p2'>123</a> <div index='klkx' class='p1' id='p2'>789</div> <script> var s1 = document.querySelector('a[index]'); var s2 = document.querySelector('div.p1');//ID选择var s2 = document.querySelector('div#p2'); s1.style.color = 'red'; s2.style.color = 'yellow'; </script> </body>