互聯網 - 大數據

isEqualNode()

isEqualNode方法可以用來判斷兩個DOM節點是否相同，給我的第一感覺是沒用，因為兩個DOM的比較很容易讓人想成是字符串的比較，心想直接用兩個等號不就可以了嗎，但馬上感覺不對，因為DOM是對象！兩個不同的對象是不可能相等的，比如這段

var obj = {};
var obj2 = {};
console.log(obj==obj2);//false

可以看到兩個對象是不等的，就算是長得一模一樣，那么DOM是不是對象呢？我們打印一下

<div id="div1">11111</div>
<div id="div2">22222</div>
<script>
  var div1 = document.getElementById("div1");
  console.log(typeof div1); //object
</script>

也就是說DOM確實是對象，因此是不能直接比較兩個DOM是否相同的，下面用isEqualNode函數來比較一下

<div>11111</div>
<div>11111</div>
<script>
  var divs = document.getElementsByTagName("div");
  console.log(divs[0].isEqualNode(divs[1])); //true
</script>

這個函數和一般的比較還有所不同，它比較智能，元素的屬性順序可以不同，如下

<div data-a="a" data-b="b">11111</div>
<div data-b="b" data-a="a">11111</div>
<script>
  var divs = document.getElementsByTagName("div");
  console.log(divs[0].isEqualNode(divs[1])); //true
</script>

盡管元素的屬性位置不一樣，但isEqualNode函數依然返回true

要說這個isEqualNode沒用呢，還真有用的地方，我們知道DOM渲染是比較消耗性能的，如果我們用這個屬性事先判斷一下這兩個DOM是否相同，如果相同就不更新DOM，代碼如下

<input type="text" id="text">
<div>111</div>
<script>
  var oDiv = document.getElementsByTagName("div");
  var text = document.getElementById("text");
  
  text.addEventListener("blur",function(){
    var div = document.createElement("div");
    div.innerHTML = this.value;
    if(!(oDiv[0].isEqualNode(div))){
      document.body.appendChild(div);
    }
  },false);
</script>

React中的虛擬DOM，就可以用這個函數來判斷，通過這個函數，我們可以做到只更新需要更新的DOM，而不必去把所有的DOM都給更新。

matches()

matches方法可以用來判斷當前元素是否能被指定的css選擇器查找到，也就是我們寫的css選擇器是否能夠找到當前這個元素，舉個例子

  <div id="box">
    <p>
      <em></em>
    </p>
  </div>
  <script>
    var em = document.querySelector("em");
    console.log(em.matches("#box p > em")); //true;
    console.log(em.matches("#box div em")); //false;
  </script>

在事件委托中，我們經常需要去過濾某些元素，而這時這個方法就可以派上用場，比如下面這個例子

<div id="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<script>
  var box = document.querySelector("#box");
  box.addEventListener("click",function(event){
    if(event.target.matches("#box .left")){
      console.log(event.target);
    }
  });
</script>

雖然通過判斷標簽名，class等等也可以實現同樣的效果，但有了這個方法，實現起來就簡單的多了，如果你覺得這個例子不感冒，那么下面這段代碼，你應該用過吧？

$(document).on("click","#box a",function(){

});

其中第二個參數就是用來過濾元素的，如果要實現這個方法，我們就可以用matches。

normalize()

normalize() 方法移除空的文本節點，并連接相鄰的文本節點。

這個方法將遍歷當前節點的所有子孫節點，通過刪除空的 Text 節點，已經合并所有相鄰的 Text 節點來規范化文檔。該方法在進行節點的插入或刪除操作后，對于簡化文檔樹的結構很有用。

lastModified

document.lastModified可以返回文檔最后修改的日期，不過你很快會發現它并不準，因為對于動態網站來說，這個屬性返回的是當前時間，也正是因為這個原因，我們可以用它來判斷一個頁面是靜態的還是動態的，以下是在本地頁面測試的結果

而如果是一個動態的網站，則會出現下面這種情況

因此我們可以用這個屬性來判斷一個網站是靜態的還是動態的，但這個屬性獲取到的值也并不是特別準確，如果要求不是特別高的話，可以用這個方法試試。

scrollIntoView()

Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區域內，使用請看MDN上的教程

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView