DOM选择符的使用
第一次接触DOM选择符 querySelector,笔记一下 querySelector和 getElementById的使用和区别
两者区别
- 相同点:都是对DOM进行操作,返回HTMLElement对象。
- getElementById:动态对象元素,会随着文档的操作而改变。
- querySelector:静态对象,返回第一个符合匹配条件的对象。可以使用id、target、class,所以在效率上不敌getElementById。
- querySelectorAll:静态对象数组,使用数组返回所有符合条件的对象。
getElementById使用案例
网上太多了,暂时就没有举栗子,后面有空再补吧
querySelector使用案例
<div id="demo" class="demo">
<p class="c_p">DOM选择符使用demo</P>
<a target="t_a1">有target属性的a标签</a><br/>
<a target="t_a2">另一个有target属性的a标签</a>
</div>
- 根据id获取DOM
let element = document.querySelector("#demo");
- 根据元素获取DOM
document.querySelector("p");
- 根据css获取DOM
document.querySelector(".c_p");
- 根据target获取DOM
document.querySelector("a[target]");
复杂css选择
document.querySelector("div.demo a[target='a_t2']");
后面再补充吧!