javascript基础系列：DOM相关的技术知识点

DOM及其基础操作

DOM: document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素

获取DOM元素的方法

1. document.getElementById() 指定在文档中，基于元素的ID或者这个元素对象
2. [context].getElementsByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合
3. [context].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合（不兼容ie6-8）
4. [context].getElementsByName() 在整个文档中，通过标签的name属性值获取一组元素集合（在ie中只有表单元素的name才能识别，所以一般只用于表单元素的处理）
5. document.head/ document.body/docuementElement获取页面中的head/body/html元素
6. [context].querySelector([selector]) （不兼容ie6-8）在指定的上下文中，通过选择器获取指定的元素对象
7. [context].querySelectorAll([selector]) （不兼容ie6-8） 在指定的上下文中，通过选择器获取指定的元素集合

js中的节点和描述节点之间关系的属性

1. 节点：Node（页面中所有的东西都是节点）
2. 节点集合： NodeList(getElementsByName/querySelectorAll获取的都是节点集合)

• 元素节点（元素标签）

nodeType: 1
nodeName: 大写的标签名
nodeValue: null

• 文本节点

nodeType: 3
nodeName: '#text'
nodeValue: 文本内容

• 注释节点

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

• 文档节点document

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

3. 描述节点之间的关系的属性

• childNodes: 获取所有的子节点（非ie6-8）中会把空格和换行当做文本节点
• children: 获取所有的元素子节点（子元素标签）（ie6-8下会把注释也当元素节点）
• firstChild：获取第一个子节点
• lastChild: 获取最后一个子节点
• firstElemeentChild/lastElementChild(不兼容ie6-8)
• previousSibling: 获取上一个哥哥的节点
• nextSibling: 获取下一个弟弟节点
• previousElementSibling/nextElementSibling： 获取兄弟元素节点(不兼容ie6-8)

/**
    * children: 获取指定上下文中，所有元素子节点
  * @params
  * context [element object]指定的上下文元素信息
  * @return
  *  [array] 返回所有的元素子节点集合
**/

function children(context) {
  // 1. 先获取所有的子节点
    var res = [],
      nodeList = context.childNodes
  // 2. 循环遍历所有的子节点，找出元素子节点，存储到res中即可
  for(var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    item.nodeType === 1? res.push(item) : null
  }
  return res
}

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

在js中动态增删改元素

1. createElement 创建元素对象
2. createTextNode 创建文本对象
3. appendChild 把元素添加到容器的末尾
4. insertBefore 把元素添加到指定容器元素的前面

// 动态创建一个div元素对象，把其赋给box
let box = document.createElement('div');
box.id = 'box'
box.style.width = '200px'
box.style.height = '200px'
box.className = 'red'
let text = document.createTextNode('珠峰培训');

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

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

5. cloneNode(true) 克隆元素或者节点
6. removeChild 移除容器中的某个元素

设置自定义属性的其它方式

setAttribute/getAttribute/removeAttribute 设置/获取/删除属性