获取DOM的方式
- document。getElementById():在document上下文中获取元素（通过Id获取的元素是一个元素对象，获取不到就是null）
- context.getElementsByTagName('标签名')：在指定的上下文中通过标签名获取元素，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合
- context.getElementsByClassName('class名')：在指定的上下文中通过class名获取元素，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合【在IE6~8下不兼容】
- document.body/document.head/document.documentElement（获取body、头部、html）
- context.querySelector() : 在指定上下文中通过选择器获取第一个元素, 获取不到就是null【在IE6~8下不兼容】
- context.querySelectorAll():在指定上下文中通过选择器获取一组元素集合，获取不到就是空元素集合【在IE6~8下不兼容】
节点
获取节点的方式
childNodes:获取的所有的子节点
children:获取所有的元素子节点【在IE6~8下不兼容】
firstChild: 获取第一个子节点
firstElementChild: 获取第一个元素子节点【在IE6~8下不兼容】
lastChild:获取最后一个子节点
lastElementChild：获取最后一个元素子节点【在IE6~8下不兼容】
previousSibling: 获取上一个哥哥节点
previousElementSibling:获取上一个哥哥元素节点【在IE6~8下不兼容】
nextSibling：获取下一个兄弟节点
nextElementSibling获取下一个兄弟元素节点【在IE6~8下不兼容】
parentNode:获取父节点
关于DOM获取元素的封装（包括获取所有子元素，获取所有弟弟元素，所有兄弟元素，当前元素在兄弟元素节点中的索引）
//a 代表选择器
//b 的传参:1 获取所有子元素 2 获取弟弟元素节点 3 当前元素所有的兄弟元素节点 4 获取当前元素在兄弟元素节点中索引
function chilAll(a, b) {
let curEle = document.querySelectorAll(a)[0];
let arr = [];
if (b === 1) {//获取当前元素所有子元素节点
let childs = curEle.childNodes;
for (var i = 0; i < childs.length; i++) {
if (childs[i].nodeType === 1) {
arr.push(childs[i]);
}
}
return arr;
} else if (b === 2) {//获取弟弟元素节点
return nextAll(curEle);
}else if(b === 3){//当前元素所有的兄弟元素节点
broAll(curEle);
nextAll(curEle);
return arr;
}else if(b === 4){//获取当前元素在兄弟元素节点中索引
let parent = curEle.parentNode;
let arr = [...parent.children];
let index = arr.indexOf(curEle);
return index;
}
function nextAll(a) {
let next = a.nextSibling;
if (next !== null) {// 文本或者标签
if(next.nodeType==1){
arr.push(next);
}
nextAll(next);
}
return arr;
}
function broAll(curEle){
let brother = curEle.previousSibling;
if(brother !== null){
if(brother.nodeType === 1){
arr.push(brother);
}
broAll(brother);
}
return arr;
}
}
// chilAll('.box', 3);
console.log(chilAll('.box', 4))
节点的增删改,克隆
-
createElement:创建元素节点
-
createTextNode:创建文本节点
-
容器.appendChild(节点)：把节点插入到容器的末尾
-
容器.insertBefore(新节点, 老节点)：把节点插入到老节点的前面
-
容器.removeChild(节点)：移除容器中的节点
-
节点.cloneNode(true/false);克隆节点，如果传参是true就是深克隆，如果不传参或者传false就是浅克隆（只复制外层元素，不复制里边的内容
仅供参考，个人整理的笔记，有问题可以留言提出（感谢）！！！
