javascript基礎(chǔ)系列：DOM相關(guān)的技術(shù)知識(shí)點(diǎn)

DOM及其基礎(chǔ)操作

DOM: document object model 文檔對(duì)象模型，提供一些屬性和方法供我們操作頁(yè)面中的元素

獲取DOM元素的方法

1. document.getElementById() 指定在文檔中，基于元素的ID或者這個(gè)元素對(duì)象
2. [context].getElementsByTagName() 在指定上下文（容器）中，通過(guò)標(biāo)簽名獲取一組元素集合
3. [context].getElementsByClassName() 在指定上下文中，通過(guò)樣式類名獲取一組元素集合（不兼容ie6-8）
4. [context].getElementsByName() 在整個(gè)文檔中，通過(guò)標(biāo)簽的name屬性值獲取一組元素集合（在ie中只有表單元素的name才能識(shí)別，所以一般只用于表單元素的處理）
5. document.head/ document.body/docuementElement獲取頁(yè)面中的head/body/html元素
6. [context].querySelector([selector]) （不兼容ie6-8）在指定的上下文中，通過(guò)選擇器獲取指定的元素對(duì)象
7. [context].querySelectorAll([selector]) （不兼容ie6-8） 在指定的上下文中，通過(guò)選擇器獲取指定的元素集合

js中的節(jié)點(diǎn)和描述節(jié)點(diǎn)之間關(guān)系的屬性

1. 節(jié)點(diǎn)：Node（頁(yè)面中所有的東西都是節(jié)點(diǎn)）
2. 節(jié)點(diǎn)集合： NodeList(getElementsByName/querySelectorAll獲取的都是節(jié)點(diǎn)集合)

• 元素節(jié)點(diǎn)（元素標(biāo)簽）

nodeType: 1
nodeName: 大寫的標(biāo)簽名
nodeValue: null

• 文本節(jié)點(diǎn)

nodeType: 3
nodeName: '#text'
nodeValue: 文本內(nèi)容

• 注釋節(jié)點(diǎn)

nodeType: 8
nodeName: '#comment'
nodeValue: null

• 文檔節(jié)點(diǎn)document

nodeType: 9
nodeName: '#document'
nodeValue: null

3. 描述節(jié)點(diǎn)之間的關(guān)系的屬性

• childNodes: 獲取所有的子節(jié)點(diǎn)（非ie6-8）中會(huì)把空格和換行當(dāng)做文本節(jié)點(diǎn)
• children: 獲取所有的元素子節(jié)點(diǎn)（子元素標(biāo)簽）（ie6-8下會(huì)把注釋也當(dāng)元素節(jié)點(diǎn)）
• firstChild：獲取第一個(gè)子節(jié)點(diǎn)
• lastChild: 獲取最后一個(gè)子節(jié)點(diǎn)
• firstElemeentChild/lastElementChild(不兼容ie6-8)
• previousSibling: 獲取上一個(gè)哥哥的節(jié)點(diǎn)
• nextSibling: 獲取下一個(gè)弟弟節(jié)點(diǎn)
• previousElementSibling/nextElementSibling： 獲取兄弟元素節(jié)點(diǎn)(不兼容ie6-8)

/**
    * children: 獲取指定上下文中，所有元素子節(jié)點(diǎn)
  * @params
  * context [element object]指定的上下文元素信息
  * @return
  *  [array] 返回所有的元素子節(jié)點(diǎn)集合
**/

function children(context) {
  // 1. 先獲取所有的子節(jié)點(diǎn)
    var res = [],
      nodeList = context.childNodes
  // 2. 循環(huán)遍歷所有的子節(jié)點(diǎn)，找出元素子節(jié)點(diǎn)，存儲(chǔ)到res中即可
  for(var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    item.nodeType === 1? res.push(item) : null
  }
  return res
}

// 獲取上一個(gè)哥哥元素
function prev(context) {
    var pre = context.previousSibling;
  while(pre.nodeType !== 1) {
    pre = context.previousSibling;
  }
  return pre;
}

在js中動(dòng)態(tài)增刪改元素

1. createElement 創(chuàng)建元素對(duì)象
2. createTextNode 創(chuàng)建文本對(duì)象
3. appendChild 把元素添加到容器的末尾
4. insertBefore 把元素添加到指定容器元素的前面

// 動(dòng)態(tài)創(chuàng)建一個(gè)div元素對(duì)象，把其賦給box
let box = document.createElement('div');
box.id = 'box'
box.style.width = '200px'
box.style.height = '200px'
box.className = 'red'
let text = document.createTextNode('珠峰培訓(xùn)');

// 添加： 容器.appendChild(元素)
box.appendChild(text)
document.body.appendchild(box)

// 放到指定元素前： 容器.insertBefore([新增元素],[指定元素])

5. cloneNode(true) 克隆元素或者節(jié)點(diǎn)
6. removeChild 移除容器中的某個(gè)元素

設(shè)置自定義屬性的其它方式

setAttribute/getAttribute/removeAttribute 設(shè)置/獲取/刪除屬性