javascript基础系列：DOM相关的技术知识点
DOM及其基础操作
DOM: document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素
获取DOM元素的方法
- document.getElementById() 指定在文档中，基于元素的ID或者这个元素对象
- [context].getElementsByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合
- [context].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合（不兼容ie6-8）
- [context].getElementsByName() 在整个文档中，通过标签的name属性值获取一组元素集合（在ie中只有表单元素的name才能识别，所以一般只用于表单元素的处理）
- document.head/ document.body/docuementElement获取页面中的head/body/html元素
- [context].querySelector([selector]) （不兼容ie6-8）在指定的上下文中，通过选择器获取指定的元素对象
- [context].querySelectorAll([selector]) （不兼容ie6-8） 在指定的上下文中，通过选择器获取指定的元素集合
js中的节点和描述节点之间关系的属性
- 节点：Node（页面中所有的东西都是节点）
- 节点集合： 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
- 描述节点之间的关系的属性
- 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中动态增删改元素
- createElement 创建元素对象
- createTextNode 创建文本对象
- appendChild 把元素添加到容器的末尾
- 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([新增元素],[指定元素])
- cloneNode(true) 克隆元素或者节点
- removeChild 移除容器中的某个元素
设置自定义属性的其它方式
setAttribute/getAttribute/removeAttribute 设置/获取/删除属性
