DOM (javascript DOM節(jié)點操作)

本節(jié)目錄

1. 查找DOM元素
2. DOM節(jié)點操作
3. javascript操作樣式的三種方法

本節(jié)重點

DOM 操作的重點：找到節(jié)點對節(jié)點（元素/文本/屬性節(jié)點）增刪改查

各方法和屬性之間的結(jié)合操作才會使得DOM 文檔活躍起來

注意方法與屬性的不同。 注意屬性的返回值

注意javascript操作樣式的可讀可寫性

查找元素：查找元素的節(jié)點(包括節(jié)點的屬性)<p id="searchElement"></p>

1. DOM節(jié)點

   元素節(jié)點 + 屬性節(jié)點 + 文本節(jié)點

   

   DOM節(jié)點類型

   nodeName

   nodeType

   nodeValue

2. 定位節(jié)點三個方法

    getElementByID()            得到單個節(jié)點
    getElementsByTagName()      得到節(jié)點數(shù)組 NodeList
    getElementsByName()         得到節(jié)點數(shù)組 NodeList
   

   NodeList 不同于 Array

   關(guān)于NodeList數(shù)組的方法

3. 定位屬性（以已經(jīng)定位的節(jié)點為基礎(chǔ)）

   定位并設(shè)置節(jié)點的屬性

    attributes                  作為屬性
    getAttribute()
    setAttribute()
    removeAttribute()
   

4. 屬性的操作注意屬性和方法操作的不同

   • 元素節(jié)點的屬性：

       tagName
       innerHTML/innerText 
       outerHTML/outerText(不建議使用)
     

   • HTML文本的屬性

       id  
        title  
         style(內(nèi)聯(lián)樣式)
          className（內(nèi)聯(lián)class）
     

   • 層次節(jié)點的屬性

       1. 子節(jié)點 childNodes               得到節(jié)點數(shù)組 NodeList
               firstChild              得到節(jié)點    Node
               lastChild
       2. 父節(jié)點 parentNode               Node
          根節(jié)點 ownerDocument            Node
       3. 同級節(jié)點 previousSibling 
                    nextSibling
     

節(jié)點的操作增刪改查<p id="opratingElement"><p>

1. 創(chuàng)建節(jié)點

    1. wirte()              創(chuàng)建普通節(jié)點      不返回任何值
   
    2. createElement()      創(chuàng)建元素節(jié)點      返回節(jié)點對象 Node(object)
    3. createTextNode()     創(chuàng)建文本節(jié)點      創(chuàng)建文本節(jié)點  返回節(jié)點對象
   

2. 節(jié)點操作

    3. cloneNode            復(fù)制節(jié)點        返回節(jié)點 Node(Object)
   

3. 子節(jié)點操作

    1. appendChild()        追加節(jié)點        parentNode.appendChild(childNode)
    
    2. removeChild()        刪除節(jié)點        parentNode.removeChild(childNode)
    
    3. insertBefore()       向前插入節(jié)點
                            parentNode.insertBefore(newNode,targetNode)
                        
    4. replaceChild()   替換節(jié)點
                            parentNode.replaceChild(newNode,targetNode)
   

DOM操作樣式三種方法<p id="oprationStyle"></p>

對于 行內(nèi) 內(nèi)聯(lián) 鏈接 的三種樣式的操作需要不同的方法

對于 可讀 可寫 讀寫 的要求不同

判斷瀏覽器對CSS2 能力的支持document.implementation.hasFeature('CSS2', '2.0');

1. style 行內(nèi)操作 （只能操作行內(nèi)樣式 + 特點：可讀可寫）

   • CSS的基本屬性 + 操作CSS的javascript

       style.color         （讀寫）    單屬性的調(diào)用（可讀寫）
       style.fontSize      （讀寫）    復(fù)合屬性的調(diào)用
       style.cssFloat / style.styleFloat   （讀寫）    復(fù)合屬性的調(diào)用
     

   • CSS的style本身的屬性和方法

       node.style.cssText          獲取 + 設(shè)置 style中的 CSS 代碼。
       node.style.length           內(nèi)聯(lián)CSS的屬性的數(shù)量
       node.style.item(index)      獲取CSS中指定位置的屬性
       
       node.style.removeProperty(index)    移除指定位置的CSS屬性
       node.style.setProperty(name,value,[power])   設(shè)置CSS屬性 并設(shè)置優(yōu)先權(quán)
     

2. getComputedStyle/currentStyle (行內(nèi) + 內(nèi)聯(lián) + 鏈接 + 特點：可讀不可寫)

   • 獲取 style 對象

       1. window.getComputedStyle 首先判斷`是否支持` + `存在性`
     
       2. window.getComputedStyle(node, null / :hover / :focus / :active);
     
       *getComputedStyle 是window對象*
     
       *第二個參數(shù)表示一個偽類 沒有偽類 需要寫null*
     

   • IE獲取 style 對象

       IE 需要使用 node.currentStyle() 獲取style的對象。
     

   • 方法的使用

       1. 得到 style 對象
           var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle;        
       
       2.  style(object).color         只可讀不可寫
       
           style(object).fontFamily    只可讀不可寫
     

   • 操作樣式表 ???[需要封裝操作樣式表的方法]

3. cssRules/rules （內(nèi)聯(lián) + 鏈接 + 特點：可讀可寫）

   cssRules/rules 是 CSSStyleSheet 對象的屬性

   獲取樣式的節(jié)點對象

   document.getElementsByTagName('link')[0]; ??//HTMLLinkElement

   document.getElementsByTagName('style')[0]; ?? //HTMLStyleElement

   • 得到sheet對象 （IE使用link.sheet）

     var link = document.getElementsByTagName('link')[0];

     var sheet = link.sheet || link.styleSheet; //的到CSSStyleSheet對象

   • 對象的屬性和方法

   

   CSSStyleSheet的屬性和方法

        1.通過 `CSSRules` 屬性(非 IE)和 `rules` 屬性(IE),我們可以獲得樣式表的規(guī)則集合列表
    
            var sheet = document.styleSheets[0];   //獲取CSSStyleSheet對象
        
            var rules = sheet.cssRules || sheet.rules;
        
        2.  sheet.deleteRule(index)                //刪除是定位置的CSS
    
        3. sheet.insertRules(rule,index)           //在指定位置添加CSS樣式
    
            sheet.insertRules("body { background-color: red }",10);