JavaScript DOM文件物件

追逐。發表於2019-02-19
JavaScript物件

一、節點

  1. 文字節點，IE8以下空格節點獲取不到。
  2. 元素節點 div。
  3. 屬性節點 class、id、value。
  4. 註釋節點
<div id="wrap">
    <div class="position">
        <div id="box" class="box1" data-title="這也是節點" abc="133">
            <!-- <div>
                <img src="1.jpg" />
            </div> -->
            你好嗎！！！
            <span id="my-span">這是個span</span>
            <p>這是一個p標籤</p>
            <ul>
                <li>這是li標籤1</li>
                <li>這是li標籤2</li>
                <li>這是li標籤3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</div>
複製程式碼

二、獲取節點

  1. 獲取子代節點（動態獲取）。ele.childNodes：文字節點、元素節點。ele.children：只獲取元素節點。
  2. 獲取第一個子代節點。ele.firstChild：返回第一個包括文字節點和註釋節點。ele.firstElementChild：獲取第一個元素節點。
  3. 獲取最後一個子代節點。ele.lastChild：獲取到文字和註釋節點。ele.lastElementChild：獲取最後一個元素節點。
  4. 獲取父親節點。ele.parentNode：獲取父親節點。ele.offsetParent：找到定位父級。
  5. 下一個兄弟節點。ele.nextSibling：獲取到下一個節點，包括文字、註釋節點。ele.nextElementSibling：只獲取元素節點。
  6. 上一個兄弟節點。ele.previousSibling：獲取到下一個節點，包括文字、註釋節點。ele.previousElementSibling：只獲取元素節點。
  7. 獲取子元素節點的數量。ele.childElementCount。

三、節點的操作

  1. 建立節點：document.createElement('nodename')，放標籤名，建立元素節點，建立節點是document的方法，建立完的節點可以直接進行dom操作。
  2. 建立文字節點：createTextNode。
  3. 刪除節點：parentNode.removeChild(node)，刪除節點只能從父級開始刪除，不能自己刪除自己。
  4. 克隆節點：cloneNode()，克隆只克隆元素本身還有元素節點，不會克隆事件，可以接受一個布林型別，若是true，則克隆子孫元素。
  5. 新增節點：parentNode.appendChild(node)，只能從父級節點開始新增，新增位置在最後的子節點後面。
  6. 替換節點：parentNode.replaceChild(new, old)，第一個用來替換新元素，第二個被替換元素。
  7. 在節點前新增節點：parentNode.insertBefore(new, old)，第一個用來插入的新元素，第二個在這個元素前插入。
var oBox = document.getElementById('box'),
    oSpan = document.getElementById('my-span');
    oBox.onclick = function(){
        alert(1)
    }

    var oBox2 = oBox.cloneNode(true);
    wrap.appendChild(oBox2);
    console.log(oBox2)
複製程式碼
var oP = document.createElement('p');
oP.innerHTML = '我是一個p標籤';

oP.onclick = function() {
    alert('我是p標籤的點選事件')
}
oBox.appendChild(oP);
		
var oText = document.createTextNode('我很好！！！');
oBox.appendChild(oText);
console.log(oText)
複製程式碼

四、節點屬性

  1. 獲取節點屬性。ele.getAttribute(key)，節點名稱，直接返回值。ele.getAttributeNode，返回節點物件。
  2. 設定節點屬性。ele.setAttribute(key, value)，不要用數字來當做key。ele.setAttributeNode(node)，node是一個節點物件。
  3. 建立節點物件。document.createAttribute("nodeName")，建立完之後要設定value值。
  4. 刪除節點物件。ele.removeAttribute(key)
  5. 節點型別。1--element--元素節點、3--#text--文字節點、8--#comment--註釋節點、9--document--文件節點。
  6. tagName是隻有元素節點才有，nodeName是所有節點都有。
var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);
複製程式碼

相關文章