Js获取元素

2021/3/6 01:22:51admin0 阅读0 评论

<head>
<meta charset=“UTF-8”>
<title>Document</title>
</head>

<body>
<div id=“box” class=“box1”>
<a href=“#”>html</a>
<a href=“#”>css</a>
<a href=“#”>javascript</a>
</div>
</body>

</html>
</code></pre>

<h2>getElementById </h2>
通过<code>id</code>去获取元素
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
document.getElementById(‘box’)
</code></pre>

<h2>querySelector</h2>
可以使用它们的 <code>id</code>, <code>类</code>, <code>类型</code>, <code>属性</code>, <code>属性值</code>等来选取元素

<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 使用id去选中
document.querySelector(‘#box’)

// 使用class去选中
document.querySelector(‘.box1’)

// 使用元素去选中
document.querySelector(‘div’)

// 使用父子元素去选中的写法
document.querySelector(‘body div’)
// 使用父子元素去选中div下的a元素时，querySelector只返回匹配的第一个元素
document.querySelector(‘.box1 a’)

</code></pre>

<h2>querySelectorAll</h2>
<code>document.querySelectorAll()</code>方法返回文档中与指定的<code>CSS选择器</code>或者<code>标签</code>等匹配的所有元素
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 获取页面中所有的 <a> 元素
document.querySelectorAll(‘a’);

// 获取id为box元素下所有的 <a> 元素
let oAs = document.querySelectorAll(‘#box a’);
console.log(oAs.length);

// 获取class为box1元素下所有的 <a> 元素
let oAs = document.querySelectorAll(‘.box1 a’);
// 设置第二个a元素的字体颜色为白色
oAs[1].style.color = ‘#fff’;
</code></pre>