dom操作

document代表整个文档

var div = document.getElementById(‘id名’)；//返回是一个，不是数组
var div = document.getElementsByTagName(‘标签名’)；//返回数组 （实时）
var div = document.getElementsByClassName(‘class名’);//（带s的都是数组）
var div = document.getElementsByName(‘name’)；//name名
var div = quarySelector();//css选择器 选择一个 里面放’id’，‘class’…
var div - quarySelectorAll();//css选择器 选择一个（静态的，不实时。用途受局限）

遍历节点数

parentNode–>父节点（最顶端的父节点为#document）
childNodes–>子节点们（文本节点，注释节点，元素节点）
firstChild–>第一个子节点
nextSibling–>后一个兄弟节点
previousSibling–>前一个兄弟节点

基于元素节点数的遍历

parentElement–>返回当前元素的父元素节点（ie不兼容）最顶端为html
children–>只返回当前元素的元素子节点
node.childElementCount===node.children.length 当前元素节点的子元素个数
firstElementChild–>返回的是第一个元素节点(ie不兼容)
lastElementChild–>返回的是最后一个元素节点（ie不兼容）
nextElementSibling/previousElementSibling–>返回后一个/前一个兄弟元素节点

节点的四个属性

nodeName
元素的标签名，以大写形式表示，只读
nodeValue
Text节点或Comment节点的文本内容，可读写
attributes
Element节点的属性集合
节点的一个方法 Node.hasChildNodes();

节点类型
元素节点–1
属性节点–2
文本节点–3
注释节点–8
document-9
DocumentFragment–11

dom基本操作（元素）

增
document.createElement(’’);
document.cteateTextNode(’’);
document.createComment(’’);//创建注释节点（感觉用处不大）
document.createDocumentFragment(’’);

删
parent.removeChild();
child.remove();
插
parentnode.appendChild();(任何元素节点都有，剪切操作)
parentnode.insertBefore(newElement,targetElement);
替换
parent.replaceChild(new,origin);

dom操作（属性）

ELement节点的一些属性
innerHTML （覆盖掉原先的）想追加用+=
innerText(火狐不兼容)/textContent(老版本ie不好使)
Element节点的一些方法
element.setAttribute(“属性名”,“属性值”);//设置属性
element.getAttribute(“属性名”);//获取属性值
修改样式 节点.style.样式=value；
克隆节点 cloneNode();

表格操作

获取表格的行和列
行 列表对象.rows
列 行.cells
新增行
列表对象.insertRow();
新增列
行.insertCell();
删除行
deleteRow();
删除列
deleteCell();

计时器

setInterval(函数名，间隔时间);
setTimeout(函数名,延时时间);
清空定时器
clearInterval(计时器);
clearTimeout(计时器);
--------------------- 
作者：有脑子的搬砖工 
来源：优快云 
原文：https://blog.youkuaiyun.com/qq_43580281/article/details/84308139 
版权声明：本文为博主原创文章，转载请附上博文链接！