javascript_DOM操作

DOM (Document Object Model)

DOM 節點類型

Document     #document       => null
DocumentTpe  doctype名稱      => null
Element      elementName     => null
Attr         屬性名稱         => 屬性值
Text         #text           => 節點內容
Comment      #comment        => 注釋文本

DOM 獲取節點

// 查詢id元素
const node = document.getElementById(element)
// 查詢className元素，返回的是一個node list，是一個集合
const node = document.getElementsByClassName(className)
// 查詢標簽元素,返回的是一個node list，是一個集合
const node = document.getElementsByTagName(tagname)
// 查詢元素的 name 屬性
document.getElementsByName(name)

// h5 出的
// 獲取selector選擇器元素
const node = document.querySelector(selector)
// 獲取所有selector選擇器元素
const node = document.querySelectorAll(selector)

// 查詢第一個子節點/最后一個
const node = document.querySelector(selector).firstChild(lastChild)
// 查詢第一個元素子節點
const node = document.querySelector(selector).firstElementChild(lastElementChild)
// 查詢第幾個子元素節點，返回一個node list集合,通過下標獲取第幾個元素節點
const node = document.querySelector(selector).children[1]
// 查詢第幾個子節點，包括文本節點等...
const node = document.querySelector(selector).childNodes[1]

// 查詢自己是父元素的第幾個元素節點
const node = document.querySelector('.three')
Object.prototype.index = function () {
let index;
const nodeList = this.parentElement.children
// 使用foreach遍歷報錯
for (let i = 0; i < nodeList.length; i++) {
  if (nodeList[i] == this) index = i
}
return index
}
console.log(node.index())

DOM 設置/獲取內容

.innerHTML 和.innerText // 獲取內容
.innerHTML = 'tet' // 設置內容
// 區別就是innerHTMl可以渲染html標簽

DOM 設置/獲取元素特性

• id

elementNode.id // 獲取
elementNode.id = 'value' //設置

• class

elementNode.className // 獲取， 返回一個字符串
element.classList // 獲取,返回一個集合
elementNode.className = 'className' // 設置
elementNode.classList.add('className') // 添加樣式
elementNode.classList.remove('className') // 移除樣式

• getAttribute 屬性

<span value="test" name="jack"></span>
span.getAttribute('value') // 獲取特性
span.setAttribute('class', 'value') // 設置class特性

• data-value 自定義特性

// 標簽自定義特性必須以data-開頭
<span data-value="test" data-name="jack" ....></span>
span.dataset //獲取data-開頭的值，返回一個對象 {value: 'test', name: 'jack'}
span.dataset.test // 獲取或設置

DOM節點操作

// 創建節點
const div = document.createElement('div')
div.className = 'box1' // 創建屬性節點

// 添加節點
cosnt html = '<span>11</span>' // 並不是節點元素，不能通過appendChild添加
document.body.innerHTML = html

// 刪除子節點
div.removeChild(node) // 刪除指定子節點，返回被刪除的節點
div.parentElement.removeChild(div) // 刪除自身元素

// 替換節點
div.replaceChild(newNode, currentNode)

// 克隆節點
div.cloneNode([boolean])
boolean: false   // 淺克隆， 只會克隆節點結構
boolean: true    // 深克隆， 克隆節點所有子節點，也克隆通過AddEventListener監聽的事件

// 在指定的子節點之前插入節點
div.appendChild(newNode)  // 在元素末尾添加一個新節點
div.insertBefore(newNode, div.firstChild) // 在第一個元素之前添加一個新元素
div.insertBefore(newNode, null) // 等同於div.appendChild(newNode)

DOM 遍歷

// forEach()
const array = ['one', 'two', 'three', 'four']
array.forEach((currentValue, index, array)=>{
  currentCalue => //數組當前的值 'one', 'two', 'three', 'four'
  inext => // 數組下標 0, 1, 2, 3
  array => // 數組本身 ['one', 'two', 'three', 'four']
  return => // 循環無法中途跳出
})

// for...in遍歷
const array = ['one', 'two', 'three', 'four']
array.__proto__.result = () => console.log('result')
for (let index in array) {
  console.log('index:', index)  => // 對象只能獲得key，數組只能獲取下標
  array[index] => // 獲取當前的值
  // 能遍歷對象原型上的方法, 也會打印result
}

// for...of 遍歷
對於普通對象，沒有部署原生的 iterator 接口，直接使用 for...of 會報錯
var obj = {
   'name': 'Jim Green',
   'age': 12
 }
 for(let key of obj) {
   console.log('for of obj', key)
 }
 // Uncaught TypeError: obj is not iterable
 
 
 // map 遍歷
 let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
 for (let [key, value] of iterable) {
   console.log(value) => // 1, 2, 3
   console.log(key) => // a, b, c
 }