JavaScript 的 contains() 的判定

javascript contains()

hypons 2020-08-01 11:26:57 ‧ 1934 瀏覽

分享至

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

listennn08 iT邦高手 5 級 ‧ 2020-08-01 11:56:41 檢舉

你仔細看一下會發現問題
你 div 一個跟 div 比
另一個跟 p 比

hypons iT邦新手 5 級 ‧ 2020-08-01 13:10:36 檢舉

呀。不好意思。四號那個console是沒關係的。我換一下那張圖。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

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文字內容完全一樣，他在這個樹上還是兩個不同的物件。

回應 2
分享
檢舉

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

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

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

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

登入發表回應

通靈亡

iT邦高手 1 級 ‧ 2020-08-01 13:44:09

你在兩個<p>裡面，分別加上123-1、123-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>

輸出：