DOM (javascript DOM节点操作)

本节目录

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

本节重点

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

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

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

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

查找元素：查找元素的节点(包括节点的属性)

DOM节点

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

DOM节点类型

nodeName

nodeType

nodeValue

定位节点三个方法

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

NodeList 不同于 Array

关于NodeList数组的方法

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

定位并设置节点的属性

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

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

元素节点的属性：

  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

节点的操作`增删改查`

创建节点

 1. wirte()              创建普通节点      不返回任何值

 2. createElement()      创建元素节点      返回节点对象 Node(object)
 3. createTextNode()     创建文本节点      创建文本节点  返回节点对象

节点操作

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

子节点操作

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

DOM操作样式`三种方法`

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

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

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

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属性 并设置优先权

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    只可读不可写

操作样式表 ~~[需要封装操作样式表的方法]~~

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);

最后编辑于：2017.11.27 04:25:12

DOM (javascript DOM节点操作)

DOM (javascript DOM节点操作)