持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
节点node
nodeType 节点类型 元素节点:1 属性节点:2 文本节点:3
nodeName 节点名称
nodeValue 节点值
父级节点
node.parentNode //最近的一个父节点,如果指定的节点没有父节点则返回null
子节点
所有子节点 parentNode.childNodes(标准) //获取元素节点需要专门处理,不提倡
子元素节点 parentNode.children(非标准) //只读属性
第一个子节点 parentNode.firstChild
最后一个子节点 parentNode.lastChild
//兼容性问题ie9以上才支持,找不到返回null
第一个子元素节点 parentNode.firstElementChild
最后一个子元素节点 parentNode.lastElementChild
//解决方案
第一个子元素节点 parentNode.children[0]
最后一个子元素节点 parentNode.children[parentNode.children.length -1]
其他节点
node.nextSibling //当前元素的下一个兄弟节点
node.previousSibling //返回当前元素上一个兄弟节点
//兼容性问题ie9以上
node.nextElementSibling //返回当前元素下一个兄弟元素节点
node.previousElementSibling //返回当前元素上一个兄弟节点
//封装一个兼容性函数
function gerNextElementSibling(element) {
var el = element;
while(el = el.nextSibling) {
if(el.nodeType === 1) {
return el;
}
}
return null;
}
创建节点
var li = document.createElement("li"); //创建元素节点
var ul = document.querySelector('ul''); //后面追加元素
ul.appendChild(li);
//添加节点node.insertBefore(child,指定元素); 在此节点之前
ul.insertBefore(li, ul.children[0]);
//删除节点
node.removeChild()()
//克隆节点
node.cloneNode()
!如果括号参数为空或者false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的节点
js执行机制(事件循环)
js是单线程 导致执行时间过长,页面渲染加载阻塞
HTML5提出Web Woker标准, 允许javascript脚本创建多个线程,但是子线程完全受主线程控制,于是js就出现了同步任务和异步任务
1.先执行执行栈中的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中所有同步任务执行完毕,系统会按照次序读取任务队列中的异步任务
于是被读取的异步任务结束等待状态,进入执行栈,开始执行
