dom操作

迷南。 2022-04-15 03:29 276阅读 0赞

### 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(计时器);  
\---------------------   
作者：有脑子的搬砖工   
来源：CSDN   
原文：[https://blog.csdn.net/qq\_43580281/article/details/84308139 ][https_blog.csdn.net_qq_43580281_article_details_84308139]  
版权声明：本文为博主原创文章，转载请附上博文链接！

[https_blog.csdn.net_qq_43580281_article_details_84308139]: https://blog.csdn.net/qq_43580281/article/details/84308139%C2%A0