Dom操作知识点

Bertha 。 2022-05-13 06:16 322阅读 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.通过节点获取兄弟节点

  1. 下一个节点  
  2.  nextSibling;  
  3. 下一个元素节点  
  4.  nextElementSibling;  
  5. 上一个节点  
  6. previousSibling;  
  7. 上一个元素节点  
  8. previousElementSibling;

5.获取父元素节点

  1. parentElements

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

  1. 创建元素节点  
  2.  createElement("标签");  
  3. 删除节点  
  4.  removeElement(节点);  
  5. 替换节点  
  6.  replaceElement(src,des);   
  7. 插入节点  
  8.  insertBefore(src,des);  
  9. 属性 添加 修改  
  10.  setAttribute("key",value);  
  11.  removeAttribute("属性");  
  12. 样式修改  
  13.  节点.style.样式="值"；  
  14. 节点内容修改  
  15.  el.innerHTML="";可以转换成html标签  
  16.  el.innerText="";只能以文本显示  
  17. 节点克隆  
  18.   cloneNode(); true 深度克隆 false 浅克隆

7. 表格的操作

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

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

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

8.定时器

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

发表评论

表情：
评论列表 （有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读