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 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
VSCode搭建React Native环境
May 07 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php xfocus防注入资料
2008/04/27 PHP
10 个经典PHP函数
2013/10/17 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python的re模块正则表达式操作
2016/05/25 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python各层级目录下import方法代码实例
2020/01/20 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
高中体育教学反思
2014/01/29 职场文书
文秘人员工作职责
2014/01/31 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
节约粮食标语
2014/06/18 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
新党员入党决心书
2015/09/22 职场文书