亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用querySelector時的怪異行為

使用querySelector時的怪異行為

幕布斯6054654 2021-04-02 14:15:06
據我了解,使用時element.querySelector(),查詢應從特定元素開始。但是,當我使用下面的代碼運行時,它會繼續選擇DIV特定元素中的第一個標簽。const rootDiv = document.getElementById('test');console.log(rootDiv.querySelector('div').innerHTML);console.log(rootDiv.querySelector('div > div').innerHTML);console.log(rootDiv.querySelector('div > div > div').innerHTML);console.log(rootDiv.querySelector('div > div > div > div').innerHTML);console.log(rootDiv.querySelector('div > div > div > div > div').innerHTML);<div>  <div>    <div id="test">      <div>        <div>        This is content        </div>      </div>    </div>  </div></div>如您所見,前幾個結果是相同的。這是一個錯誤嗎?還是會從文件開始處查詢?
查看完整描述

3 回答

?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

什么querySelector做的是找到一個元素在文檔中的某個地方的CSS選擇器過去了,匹配然后將檢查發現的元素是你叫元素的后代querySelector上。它不是從被調用的元素開始并向下搜索-而是始終從文檔級別開始,查找與選擇器匹配的元素,并檢查該元素是否也是調用上下文元素的后代。這有點不直觀。


所以:


someElement.querySelector(selectorStr)

就好像


[...document.querySelectorAll(selectorStr)]

  .find(elm => someElement.contains(elm));

一個可能的解決方案是使用:scope來指示您希望選擇從處開始rootDiv,而不是從處開始document:


const rootDiv = document.getElementById('test');

console.log(rootDiv.querySelector(':scope > div').innerHTML);

console.log(rootDiv.querySelector(':scope > div > div').innerHTML);

console.log(rootDiv.querySelector(':scope > div > div > div').innerHTML);

<div>

  <div>

    <div id="test">

      <div>

        <div>

        This is content

        </div>

      </div>

    </div>

  </div>

</div>

:scope 除Edge之外,所有現代瀏覽器均支持該功能。


查看完整回答
反對 回復 2021-04-22
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

查詢選擇器div > div > div僅表示:

查找具有父級和祖父母級的div,它們也都是div。

而且,如果您從測試的第一個孩子開始并檢查選擇器,那么它是正確的。這就是為什么只有最后一個查詢才選擇最里面的div的原因,因為它具有第一個謂詞(用一個great-great-grandparent-div查找div),而test的第一個孩子不能滿足該謂詞。

查詢選擇器將僅測試后代,但它將評估整個文檔范圍內的表達式。試想一下,選擇器就像檢查元素的屬性一樣-即使您僅查看子元素,它仍然是其父元素的子元素。


查看完整回答
反對 回復 2021-04-22
  • 3 回答
  • 0 關注
  • 208 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號