JavaScript DOM常用操作代码汇总


Posted in Javascript onJuly 03, 2020

1.理解DOM:

DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口。

怎么说,我从两个角度理解:

对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。

对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙。

所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,触摸Html每寸肌肤。(咳。。。)

2.介绍Html的DOM树:

说明:html标签通过浏览器的解析后才会形成dom树,此后HTML中的每个标签元素,属性,文本都能看做是一个DOM的节点,JavaScript都能通过dom的提供的编程接口操作到每个节点,去了解浏览器的渲染机制能够帮助我们了解dom。

Html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dom</title>
</head>
<body>
  <div>
    <a href="www.baidu.com" rel="external nofollow" >百度</a>
  </div>
</body>
</html>

对应的DOM树结构图:

JavaScript DOM常用操作代码汇总

3.认识JavaScript中的DOM编程接口:

上面说了html形成的dom树,接着说下通过js的dom编程接口去操作这棵dom树。

JavaScriptDOM操作的常用方法和属性::

常用方法:

获取节点:

  • document.getElementById(idName) //通过id号来获取元素,返回一个元素对象
  • document.getElementsByName(name) //通过name属性获取id号,返回元素对象数组
  • document.getElementsByClassName(className) //通过class来获取元素,返回元素对象数组(ie8以上才有)
  • document.getElementsByTagName(tagName) //通过标签名获取元素,返回元素对象数组

获取/设置元素的属性值:

  • element.getAttribute(attributeName) //括号传入属性名,返回对应属性的属性值
  • element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

创建节点Node:

  • document.createElement("h3") //创建一个html元素,这里以创建h3元素为例
  • document.createTextNode(String); //创建一个文本节点;
  • document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例

增添节点:

  • element.appendChild(Node); //往element内部最后面添加一个节点,参数是节点类型
  • elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

删除节点:

element.removeChild(Node) //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null

常用属性:

获取当前元素的父节点 :

element.parentNode //返回当前元素的父节点对象

获取当前元素的子节点:

  • element.chlidren //返回当前元素所有子元素节点对象,只返回HTML节点
  • element.chilidNodes //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
  • element.firstChild //返回当前元素的第一个子节点对象
  • element.lastChild //返回当前元素的最后一个子节点对象

获取当前元素的同级元素:

  • element.nextSibling //返回当前元素的下一个同级元素 没有就返回null
  • element.previousSibling //返回当前元素上一个同级元素 没有就返回null

获取当前元素的文本:

  • element.innerHTML //返回元素的所有文本,包括html代码
  • element.innerText //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码

获取当前节点的节点类型:node.nodeType //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。

设置样式:element.style.color=“#eea”; //设置元素的样式时使用style,这里以设置文字颜色为例。

4.总结:

大家都会觉得用jQuery来操作dom会更加的方便且好用,因为jq对js的dom进行了封装,使得我们Write Less, Do More。但是我觉得还是要总结一下原生js的dom,从根本上了解js对dom的操作,只会有利而无害。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
JavaScrip如果基于url实现图片下载
Jul 03 #Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 #Javascript
JavaScript如何判断对象有某属性
Jul 03 #Javascript
You might like
php之CodeIgniter学习笔记
2013/06/17 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python删除特定文件的方法
2015/07/30 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python 实现绘制整齐的表格
2019/11/18 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
详细分析Python垃圾回收机制
2020/07/01 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
企业宣传标语
2014/06/09 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
员工升职自荐信
2015/03/27 职场文书