Dom操作知识点

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(下标)

扫描二维码关注公众号,回复: 3198801 查看本文章


8.定时器


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

猜你喜欢

转载自blog.csdn.net/qq_41534115/article/details/82619879