iT邦幫忙

0

JavaScript 的 contains() 的判定

  • 分享至 

  • xImage

第一行的p和第四行的p是一模一樣的,但為什麼用.contains()檢查時會返回false呢?是因為傳入的值其實是有分別嗎?

https://ithelp.ithome.com.tw/upload/images/20200801/20119815W8cLmDeuuP.png

https://ithelp.ithome.com.tw/upload/images/20200801/20119815jrZlNSd5Js.png

你仔細看一下會發現問題
你 div 一個跟 div 比
另一個跟 p 比
hypons iT邦新手 5 級 ‧ 2020-08-01 13:10:36 檢舉
呀。不好意思。四號那個console是沒關係的。我換一下那張圖。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
fillano
iT邦超人 1 級 ‧ 2020-08-02 08:18:21
最佳解答

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

使用前請詳閱說明:「The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.」

你有兩個p,但是querySelector傳回的是第一個,也就是不在div裡面的那一個。DOM是一個物件樹,既使兩個p文字內容完全一樣,他在這個樹上還是兩個不同的物件。

hypons iT邦新手 5 級 ‧ 2020-08-03 13:43:03 檢舉

所以他是會連在dom tree的位置也傳進去哦

fillano iT邦超人 1 級 ‧ 2020-08-03 14:02:50 檢舉

比較正式的說法是物件的Reference。通常做比對最先就是用Reference,不一樣就出局了。(Reference只是個概念,或者你用記憶體位置來理解也可以,雖然實做不會這麼簡單)

0
通靈亡
iT邦高手 1 級 ‧ 2020-08-01 13:44:09

你在兩個<p>裡面,分別加上123-1123-2
你就會發現document.querySelector('p');
得到的是<p id="123" class="123">123-1</p>
也就是符合<p class="123">當中的第一個DOM

<div>裡面的p是<p id="123" class="123">123-2</p>
因此contains得到的結果為false

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="123" class="123">123-1</p>
    <div id="id" class="class">
        <p id="123" class="123">123-2</p>
    </div>
</body>

<script>
    const div = document.querySelector('div');
    const p = document.querySelector('p');

    console.log("div", div, div.innerHTML);
    console.log("p", p, p.innerHTML);
    console.log(div.contains(p));
</script>
</html>

輸出:
https://ithelp.ithome.com.tw/upload/images/20200801/20120331OXTaLxhkCU.png

看更多先前的回應...收起先前的回應...
hypons iT邦新手 5 級 ‧ 2020-08-01 13:53:35 檢舉

對,我就是這個意思。我知道變數p拿到的是-1的那個。
我問題是在兩個的內容完全一樣的情況下,是甚麼原因導致.contains()認為是false

通靈亡 iT邦高手 1 級 ‧ 2020-08-01 14:04:52 檢舉

我問題是在兩個的內容完全一樣的情況下

第二張圖,拿到的<p><div id="123" class="123"> 裡面的 <p>
因此div.contains(p) 會是true

但是第一張圖,拿到的<p> 不是 <div id="123" class="123"> 裡面的 <p>
因此div.contains(p) 會是false

這邊的div.contains(p)
指的是,檢查傳進去的<p>,是否屬於div裡面的<p>

就算你把123-1和123-2刪掉,讓這兩個p是一模一樣
可是對div來說,這兩個仍是不同的DOM

hypons iT邦新手 5 級 ‧ 2020-08-01 14:23:08 檢舉

那有方法可以看傳到.contains()的p的資料是怎樣的嗎?

通靈亡 iT邦高手 1 級 ‧ 2020-08-01 17:42:09 檢舉

https://ithelp.ithome.com.tw/upload/images/20200801/20120331eKUUaVC0cR.png

你丟到console.log() 展開就可以看到所有DOM的相關資訊

ShawnL iT邦新手 1 級 ‧ 2020-08-03 10:35:29 檢舉

補充個,如果要確認物件詳細屬性可以使用 console.dir,這樣可以避免在 chrome devtools 中直接解析成元素並看到詳細內容

hypons iT邦新手 5 級 ‧ 2020-08-03 13:40:59 檢舉

通靈亡ShawnL
明白了,謝謝你們

我要發表回答

立即登入回答