querySelector（）⽅法
众多js库中最长⽤的⼀项功能，就是根据css选择符选择与某个模式匹配的DOM元素，jq的核⼼就是通过css选择付查询DOM⽂档取得元素的引⽤，从⽽抛开了
getElementById()和getElementsByTagName()queryselectorall用法
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');//类选择
lor = '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');        lor = 'red';
lor = 'yellow';
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。