博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于DOM的有关总结
阅读量:6029 次
发布时间:2019-06-20

本文共 1157 字,大约阅读时间需要 3 分钟。

1.获取DOM元素

  document.getElementById()  通过id获取DOM元素

  document.getElementsByClassName() 通过类名获取DOM元素

  document.getElementsByName();

  document.getElementsByTagName();

  document.documentElement();

  document.body();

  document.querySelector();

  document.querySelectorAll();

2.DOM节点

  

3.DOM节点属性 

  • parentNode // document.getElementById("item1").parentNode;
  • childNodes // ele.childNodes; 获得 ele(当前) 元素的子节点集合,它会把空的文本节点当成节点
  • children //ele.children; 只获得元素节点
  • firstChild (firstElementChild) // ele.firstChild 返回首个子节点
  • lastChild (lastElementChild)
  • previousSibling (previousElementSibling) // ele.previousSibling 返回上一个元素节点
  • nextSibling (nextElementSibling) // ele.nextSibling 返回下一个元素节点

4.DOM操作

  • document.createElement('p');//创建节点
  • box.appendChild(oDiv);//添加节点
  • box.removeChild(oDiv);// 删除节点
  • box.parentNode.insertBefore(oDiv,box); //把新创建的元素添加到指定元素前面
  • oDiv.replaceChild(oP,oDiv);// oP替换oDiv
  • console.log(oDiv.cloneNode(true)); //深度克隆 不传参数默认是false只克隆oDiv这个标签 //如果参数是 true 会把里面的标签也克隆一份
  • box.setAttribute('name','zhufeng'); // 添加属性
  • console.log(box.getAttribute('name')); // 获取属性
  • box.removeAttribute('name') // removeAttribute 移除属性

 

转载于:https://www.cnblogs.com/Scar007/p/7505638.html

你可能感兴趣的文章
编译安装nginx 1.9.15
查看>>
我的友情链接
查看>>
新的开始~~~
查看>>
字符串的扩展
查看>>
存储过程中调用webservice
查看>>
神奇语言 python 初识函数
查看>>
Windows安装Composer出现【Composer Security Warning】警告
查看>>
四 指针与数组 五 函数
查看>>
硬盘空间满了
查看>>
dutacm.club Water Problem(矩阵快速幂)
查看>>
深入JVM内核--GC算法和种类
查看>>
iOS的AssetsLibrary框架访问所有相片
查看>>
MySQLdb的安装
查看>>
读书笔记三
查看>>
数论 - 最小乘法逆元
查看>>
企业架构研究总结(22)——TOGAF架构开发方法(ADM)之信息系统架构阶段
查看>>
接口测试(三)--HTTP协议简介
查看>>
周志华《机器学习》课后答案——第4章.决策树
查看>>
frameset分帧问题
查看>>
特殊样式:ime-mode禁汉字,tabindex焦点
查看>>