js中的document.querySelector()方法舉例詳解

更新時間：2024年01月17日 11:52:21 作者：linlinlove2

這篇文章主要給大家介紹了關于js中document.querySelector()方法的相關資料,document.querySelector是JavaScript中的一個內(nèi)置方法,用于通過CSS選擇器選擇文檔中的第一個匹配元素,需要的朋友可以參考下

1、常用的三種獲取元素的js方式

1 document.getElementById("");
2 document.getElementsByClassName();
3 document.getElementsByTagName();

var doc=document;
var box=doc.getElementById("box");
var li=box.getElementsByTagName("li");
var surfaces=box.getElementsByClassName("surfaces");

querySelector()可以直接加點擊事件，而querySelectorAll()不能直接加點擊事件

2、querySelector()

var node = document.querySelector(“#lover”); 
// 獲取文檔中的第一個id=lover的元素
var node = document.querySelector(“.lover”); 
// 獲取文檔中的第一個class=“l(fā)over"的元素
var node = document.querySelector(“p.lover”); 
// 獲取class=“l(fā)over” 的第一個p元素
var node = document.querySelector(“a[target]”);
// 獲取第一個帶target屬性的a元素
var element = document.querySelector(‘.foo,.bar');
//返回帶有foo或者bar樣式類的首個元素
document.querySelector(“body”).style=”"; 
// 移除style屬性
document.querySelector(“h2,h3”).style.backgroundColor = “blue”;
//為文檔的第一個h2元素添加背景顏色，但是，如果文檔中

位于元素之前，元素將會被設置指定的背景顏色，總結(jié)，多元素選擇時，哪個先匹配就是誰咯，只有一個被選中。
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。

3、querySelectorAll

elementList = document.querySelectorAll(selectors);

elementList 是一個靜態(tài)的 NodeList 類型的對象。

selectors 是一個由逗號連接的包含一個或多個 CSS 選擇器的字符串。

查找文檔中共包含 “target” 屬性的標簽，并為其設置邊框:

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

-------------------------------------------
let t0 = window.performance.now();
let li = document.querySelectorAll('li');
console.log("li 的數(shù)量", li.length);
for (let i = 0; i < li.length; i++) {
    li[i].textContent = i;
}
let t1 = window.performance.now();
console.log("耗時" + (t1 - t0) + "毫秒");

當頁面中出現(xiàn)多個相同class標簽(或者多個相同標簽(比如多個div))時，如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

該方法返回所有滿足條件的元素，結(jié)果是個nodeList集合。查找規(guī)則與前面所述一樣。 ---->querySelectorAll 得到一個偽數(shù)組 DOM。

ParentNode.querySelectorAll()的結(jié)果是NodeList數(shù)組，但是又不是一般的js數(shù)組（Array），所以也不能直接調(diào)用Array的方法

<div id="box">

<ul>
<li data->tagname 111</li>
<li class="surfaces">這是clase? 222</li>
<li class="surfaces">這是class333</li>
<li class="surfaces" data->這是class444</li>
</ul>

</div>
<br>

document.getElementById("box").addEventListener("click", function(){
var attr=document.querySelectorAll('[data-href]');
console.log(attr);
},!1);

<input type="checkbox" name="gender" value="male" checked>
<input type="checkbox" name="gender" value="female">

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

<input type="text" placeholder="我是占位符">
<input type="text" placeholder="我是占位符" value="我的 value 遮蓋了占位符">

let target = document.querySelector('input[type="checkbox"]:checked');
console.log('使用 querySelector 查找 ', target)

let fr = document.querySelector('div:lang(fr)');
console.log('使用 querySelector 查找 ', fr);

let pl = document.querySelector('input:placeholder-shown');
console.log('使用 querySelector 查找 ', pl);

document.querySelector.bind和document.querySelectorAll.bind

<div id="box">
<ul>
<li >tagname 111</li>
<li class="surfaces">這是clase 222</li>
<li class="surfaces">這是class333</li>
<li class="surfaces">這是class444</li>
</ul>
</div>

--------------------------------------------------------------------------

var query_id=query('#box'); //dom id 
var query_class=query('.surfaces'); // dom class 
var query_tagname=query('li') //dom 標簽

console.log('query'+query_id.innerHTML); //

console.log('query'+query_class.innerHTML); 第一個222

console.log('query'+query_tagname.innerHTML); 第一個222

--------------------------------------------------------------------------

1 var query = document.querySelector.bind(document); //單個的
var query_id=query('#box'); //dom id
var query_class=query('.surfaces'); // dom class
var query_tagname=query('li') //dom 標簽
query_id.addEventListener('click',function(){
console.log('click_query_id'+this.innerHTML);   //click surfaces 2222
});

query_class.addEventListener('click',function(){
var e=e||window.event;
console.log('click_query_class'+this.innerHTML); //click surfaces 2222
e.stopPropagation();
});

query_tagname.addEventListener('click', function(e){
var e=e||window.event;
console.log('click_query_tagname' + this.innerHTML); //click surfaces 2222
e.stopPropagation();
});