JavaScript--DOM筆記

• DOM基礎
  • 什麼是DOM
  • 瀏覽器支持狀況

• DOM節點
  • childNodes nodeType
    • 獲取子節點
    • children
  • parentNode
    • 例子：點擊連接，隱藏整個li
  • offsetParent
    • 例子：獲取元素在頁面上的實際位置

• DOM節點(2)
  • 首尾子節點
    • 有兼容性問題
    • firstChild、firstElementChild
    • lastChild 、lastElementChild
  • 兄弟節點
    • 有兼容性問題
    • nextSibling、nextElementSibling
    • previousSibling、previousElementSibling

• 操縱元素屬性

• • 元素屬性操做

• • • 第一種：oDiv.style.display=「block」;

    • 第二種：oDiv.style[「display」]=「block」;

    • 第三種：Dom方式

• •  DOM方式操做元素屬性
    • 獲取：getAttribute(名稱)
    • 設置：setAttribute(名稱, 值)
    • 刪除：removeAttribute(名稱)

• 用className選擇元素
  • 如何用className選擇元素
    • 選出全部元素
    • 經過className條件篩選
  • 封裝成函數

function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;
}

window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var aBox=getByClass(oUl, 'box');
    var i=0;
    
    for(i=0;i<aBox.length;i++)
    {
        aBox[i].style.background='yellow';
    }
}

 

• 建立DOM元素 createElement(標籤名)
  • 建立一個節點 appendChild(節點) 追加一個節點
  • 例子：爲ul插入li 插入元素

• insertBefore(節點, 原有節點) 在已有元素前插入
  • 例子：倒序插入li

• 刪除DOM元素 removeChild(節點) 刪除一個節點
  • 例子：刪除li

• 文檔碎片
  • 文檔碎片能夠提升DOM操做性能(理論上)
  • 文檔碎片原理 document.createDocumentFragment()