操作dom_DOM節點型別及DOM操作

阿新 • • 發佈：2021-01-21

技術標籤：操作dom

1.元素節點 Node.ELEMENT_NODE(1)

2.屬性節點 Node.ATTRIBUTE_NODE(2)

3.文字節點 Node.TEXT_NODE(3)

元素節點

對應HTML標籤元素。元素節點的型別nodeType值是1，節點名稱nodeName值是大寫標籤名

nodeValue的標籤名，nodeValue 值是null

console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)

1 'BODY' null

特性節點

元素特性節點attribute對應網頁中的HTML標籤屬性，它只存在於元素的attributes屬性中，並不是DOM文件樹的一部分。特性節點型別的nodeType值是2 ，節點名稱nodeName值是屬性名，nodeValue值是屬性值

<div id="text"></div>
<script>
var attr = text.attributes.id
console.log(attr.nodeTpye,attr.nodeName,attr.nodeValue)
// 2 'id' 'test'
</script>

文字節點

文字節點text 代表網頁中的HTML標籤內容。文字節點的節點型別nodeType值是3

節點名稱nodeName值是"#text"，nodeValue值是標籤內容值

現在，div元素內容為測試

<div id="test">測試</div>
<script>
var txt = test.firstChild;
//3 '#text' '測試'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>

DOM節點

1.元素節點+屬性節點+文字節點

2.定位節點的三個方法

getElementByID() 得到單個節點

getElementsByTagName() 得到節點陣列NodeList

getElementsByName 得到節點陣列 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

層次節點的屬性

1.子節點 childNodes    得到節點陣列 NodeList
     firstChild     得到節點
      lastChild       
2.父節點 parentNode      Node
        ownerDocument   Node
3.同級節點  previousSlibing 
           nextSlibling

節點的操作(增刪改查)

1.建立節點

1.wirte()  建立普通節點  不返回任何值
2.createElement() 建立元素節點 返回節點物件Node(object)
3.createTextNode()  建立文字節點  建立文字節點 返回節點物件

2.節點操作

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 操作樣式三種方法

1.style行內操作(只能操作行內樣式+特點:可讀可寫)

css的基本屬性，操作css的js

style.color  (讀寫)
style.fontsize （）

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

getComputeddStyle 是window物件*

*第二個引數表示一個偽類沒有偽類需要些null

ie 獲取style物件

IE使用node.currentStyle()

方法的使用

1.得到style物件

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