DOM (javascript DOM节点操作)

DOM (javascript DOM节点操作)

---

本节目录

1. 查找DOM元素
2. DOM节点操作
3. javascript操作样式的三种方法

本节重点

DOM 操作的重点：找到节点对节点（元素/文本/属性节点）增删改查

各方法和属性之间的结合操作才会使得DOM 文档活跃起来

注意方法与属性的不同。 注意属性的返回值

注意javascript操作样式的可读可写性

查找元素：查找元素的节点(包括节点的属性)<p id="searchElement"></p>

---

1. DOM节点

   元素节点 + 属性节点 + 文本节点

   DOM节点类型

   nodeName

   nodeType

   nodeValue

2. 定位节点三个方法

    getElementByID()            得到单个节点
    getElementsByTagName()      得到节点数组 NodeList
    getElementsByName()         得到节点数组 NodeList
   

   NodeList 不同于 Array

   关于NodeList数组的方法

3. 定位属性（以已经定位的节点为基础）

   定位并设置节点的属性

    attributes                  作为属性
    getAttribute()
    setAttribute()
    removeAttribute()
   

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

   • 元素节点的属性：

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

   • HTML文本的属性

       id  
        title  
         style(内联样式)
          className（内联class）
     

   • 层次节点的属性

       1. 子节点 childNodes               得到节点数组 NodeList
               firstChild              得到节点    Node
               lastChild
       2. 父节点 parentNode               Node
          根节点 ownerDocument            Node
       3. 同级节点 previousSibling 
                    nextSibling
     

节点的操作增删改查<p id="opratingElement"><p>

---

1. 创建节点

    1. wirte()              创建普通节点      不返回任何值
   
    2. createElement()      创建元素节点      返回节点对象 Node(object)
    3. createTextNode()     创建文本节点      创建文本节点  返回节点对象
   

2. 节点操作

    3. cloneNode            复制节点        返回节点 Node(Object)
   

3. 子节点操作

    1. appendChild()        追加节点        parentNode.appendChild(childNode)
    
    2. removeChild()        删除节点        parentNode.removeChild(childNode)
    
    3. insertBefore()       向前插入节点
                            parentNode.insertBefore(newNode,targetNode)
                        
    4. replaceChild()   替换节点
                            parentNode.replaceChild(newNode,targetNode)
   

DOM操作样式三种方法<p id="oprationStyle"></p>

---

对于 行内 内联 链接 的三种样式的操作需要不同的方法

对于 可读 可写 读写 的要求不同

判断浏览器对CSS2 能力的支持document.implementation.hasFeature('CSS2', '2.0');

1. style 行内操作 （只能操作行内样式 + 特点：可读可写）

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

       style.color         （读写）    单属性的调用（可读写）
       style.fontSize      （读写）    复合属性的调用
       style.cssFloat / style.styleFloat   （读写）    复合属性的调用
     

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

       node.style.cssText          获取 + 设置 style中的 CSS 代码。
       node.style.length           内联CSS的属性的数量
       node.style.item(index)      获取CSS中指定位置的属性
       
       node.style.removeProperty(index)    移除指定位置的CSS属性
       node.style.setProperty(name,value,[power])   设置CSS属性 并设置优先权
     

2. getComputedStyle/currentStyle (行内 + 内联 + 链接 + 特点：可读不可写)

   • 获取 style 对象

       1. window.getComputedStyle 首先判断`是否支持` + `存在性`
     
       2. window.getComputedStyle(node, null / :hover / :focus / :active);
     
       *getComputedStyle 是window对象*
     
       *第二个参数表示一个伪类 没有伪类 需要写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 （内联 + 链接 + 特点：可读可写）

   cssRules/rules 是 CSSStyleSheet 对象的属性

   获取样式的节点对象

   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),我们可以获得样式表的规则集合列表
    
            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);