1. document.querySelector
document.querySelector 可以获取文档中的第一个匹配的元素。
这个函数返回匹配的元素（如果找到了匹配项），否则返回 null
1.1 语法：
const element = document.querySelector(selector);
1.2 示例
以下示例， 包含根据标签名选择，类名选择，属性名等选择元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Node-Link Tree</title> </head> <body> <div class="container"> <h1>你好，2024！</h1> <h2>你好.冬天</h2> <p>龙马精神</p> <span class="first">龙年大吉</span> <p class="first">龙凤呈祥</p> <br /> <a target="self">1.龙年行大运，祥瑞照门庭。岁月悠悠，情谊绵长，感恩有您相伴。愿您在新的一年里，如龙腾飞，事业兴旺；如龙入海，生活美满。祝您龙年吉祥如意！ </a> <br> <a target="_blank">龙年到来，祥瑞满天。愿您如龙般矫健，事业腾飞；如龙鳞闪耀，生活美满。祝您龙年大吉，万事如意！ </a> </div> <script> // 标签名为 p 的第一个元素 document.querySelector("p").style.color = "red"; // class="first" 的第一个元素: document.querySelector(".first").style.color = "green"; //签名为 p，且class="first" 的第一个元素 document.querySelector("p.first").style.background = "pink"; //带target属性的第一个a元素 document.querySelector("a[target]").style.background = "skyblue"; //target属性为_blank的第一个a元素 document.querySelector("a[target='_blank']").style.background = "skyblue"; //多元素选择时，根据文档，哪个在前面就先匹配哪个 document.querySelector("h1,h2").style.backgroundColor = "yellow"; </script> </body> </html>
2.querySelectorAll()
当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ---->querySelectorAll 得到一个伪数组 DOM。
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Node-Link Tree</title> </head> <body> <div class="container"> <p>龙马精神</p> <p class="first">龙凤呈祥</p> </div> <script> // 标签名为 p 的第一个元素 var pAll = document.querySelectorAll("p") pAll[0].style.color = 'pink' console.log(pAll) </script> </body> </html>
3.document.querySelector.bind和document.querySelectorAll.bind
定义全局的变量，方便直接获取dom
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Node-Link Tree</title> </head> <body> <div class="container"> <p>龙马精神</p> <span class="first">龙年大吉</span> <p class="first">龙凤呈祥</p> </div> <script> var query = document.querySelector.bind(document); var query_tagname = query('p') console.log(query_tagname) query_tagname.style.color = 'red' </script> </body> </html>
