Dom操作知识点

Bertha 。 2022-05-13 06:16 273阅读 0赞

# Dom操作 #

##    1.如何获取节点元素 ##

getElementById(); //通过id  
   getElementsByTagName(); //通过标签名称获取一组标签集合对象  
   getElementsByClassName();//通过类获取一组标签集合对象  
   querySelector();  //通过选择器（id 类  标签  属性)第一个节点元素

##    2.节点类型 ##

1.元素节点  2属性节点 3.文本节点 4.注释节点

##    3.通过节点获取子节点 ##

1.获取所有节点（1 2 3 4）  
    childNodes;  
  2.只获取元素节点  
    children;   
  3.获取第一个节点  
    firstChild;  
  4.获取第一个元素节点  
    firstElementChild;  
  5.获取最后一个节点  
    lastChild；  
  6.获取最后一个元素节点  
    lastElementChild;

##    4.通过节点获取兄弟节点 ##

下一个节点  
     nextSibling;  
    下一个元素节点  
     nextElementSibling;  
    上一个节点  
    previousSibling;  
    上一个元素节点  
    previousElementSibling;

##    5.获取父元素节点 ##

parentElements

## 6.操作节点   新增  删除  替换 插入 ##

创建元素节点  
     createElement("标签");  
    删除节点  
     removeElement(节点);  
    替换节点  
     replaceElement(src,des);   
    插入节点  
     insertBefore(src,des);  
    属性 添加 修改  
     setAttribute("key",value);  
     removeAttribute("属性");  
    样式修改  
     节点.style.样式="值"；  
    节点内容修改  
     el.innerHTML="";可以转换成html标签  
     el.innerText="";只能以文本显示  
    节点克隆  
      cloneNode(); true 深度克隆 false 浅克隆

## 7. 表格的操作 ##

1.获取的表格的行  列  
    行（row）： tb.rows 返回一个集合对象  
    列 (cell):  行.cells; 返回集合对象

2.新增一行  
     tb.insertRow(下标);  
   //新增列  
     行.insertCell(下标);

//3.删除一行  
      deleteRow(下标);  
      //删除一列    
      deleteCell(下标)

##    8.定时器 ##

setInterval(函数,间隔时间);  
   setTimeout(函数，延时时间);     
  清空定时器  
   clearInterval(计时器);  
   clearTimeout(计时器);