自己實現三個API(getSiblings,addCLass,text)

東方來客發表於2018-07-19
API
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>
    <li id="item5">5</li>
  </ul>
</body>
</html>
複製程式碼
window.myAPI = function(nodeOrSelector){
    let nodes;
    //如果傳進來的是字串(選擇器)則返回一個偽陣列
    if(typeof nodeOrSelector === 'string'){
        nodes = document.querySelectorAll(nodeOrSelector)  //偽陣列(一致性)
    }//如果傳進來的是一個節點則直接將該節點賦給nodes
    else if(nodeOrSelector instanceof Node){
        nodes = {                                          //偽陣列(一致性)
            0: nodeOrselector,
            length:1
        }
    }
    //為選擇器對應的所有元素新增類
    nodes.addClass = function(value){
        for(let i=0; i<nodes.length; i++){
            nodes[i].classList.add(value);
        }
    }
    //來吧，我的兄弟們
    nodes.getSiblings = function () {
        var allChildren = nodes[0].parentNode.children;
        var array = {
            length: 0
        }
        for (let i = 0; i < allChildren.length; i++)
            if (allChildren[i] !== nodes[0]) {
                array[array.length] = allChildren[i];  //不能用array[i]哦，這樣長度就不對了
                array.length += 1;
        }
        return array;
  }
    //注意兩個判斷語句的區別哦~~
    nodes.text = function(value){
        if(typeof value === 'string'){     //如果傳入了字串則覆蓋當前選擇器對應的內容
            for(let i=0; i<nodes.length; i++){
                nodes[i].textContent = value;
            }
        }else if(value === undefined){    //如果沒傳值則獲取當前選擇器對應的內容
            var array = [];
            for(let i=0; i<nodes.length; i++){
                array.push(nodes[i].textContent)
            }
            return array;
        }
    }
    return nodes;
}
複製程式碼

附:

  1. textContent 會獲取所有元素的內容，包括 < script> 和 < style> 元素，然而 innerText 不會。
  2. innerText 受 CSS 樣式的影響，並且不會返回隱藏元素的文字，而textContent會。 由於 innerText 受 CSS 樣式的影響，它會觸發重排（reflow），但textContent 不會。
  3. 與 textContent 不同的是, 在 Internet Explorer (對於小於等於 IE11 的版本) 中對 innerText 進行修改， 不僅會移除當前元素的子節點，而且還會永久性地破壞所有後代文字節點（所以不可能再次將節點再次插入到任何其他元素或同一元素中）。
    4. 摘抄自MDN

相關文章