JavaScript操作DOM对象
发布日期:2022-02-06 00:27:02 浏览次数:31 分类:技术文章

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

DOM操作

DOM是Document Object Model 的缩写,即文档对象模型.是基于文档编程的一套API接口,1998年,W3C 发布了第一级的DOM规范,这个规范允许访问和操作HTML页面中的每个单独元素,如网页的表格、图片、文本,表单元素等。由于大部分主流的浏览器都执行了这个标准,因此基本解决了浏览器兼容性的问题。
使用JavaScript操作DOM时分为三个方面: DOMCore (核心). HTML——DOM 和CSS ——DOM。通过这些标准,开发人员可以让网页真正地动起来,动态地增加、修改、删除数据,使用户与计算机的交互更加便捷,交互也更加丰富。

DOM操作分类

使用JavaScript操作DOM时通常分为三类: DOMCore (核心). HTML——DOM 和CSS ——DOM。

1.DOM Core

DOM Core不是JavaScript 的专属品,任何一种支持DOM的编程语言都可以使用它,它的用途不仅限于处理一种使用标记语言编写出来的文档,如HTML。

2.HTML—DOM

使用JavaScript和DOM为HTML文档编写脚本时,有许多专属的HTML-DOM属性,HTML-DOM出现的比DOM Core更早,它提供了一些更简单的标记来描述各种HTML 元素的属性,如document.forms.获取表单对象。

3.CSS—DOM

CSS—DOM是针对CSS的操作,在JavaScript中,CSS—DOM技术的主要作用是获取和设置style对象的各种属性,即CSS属性,通过改变style对象的各种属性,可以使用网页呈现出各种不同的效果。

节点和节点的关系

DOM是以树状结构组织的HTML文档,根据DOM概念,我们可以知道,HTML 文档中每个标签或元素都是一个节点。
DOM中是这样规定的
1.整个文档是一个文档节点。
2.每个HTML标签是一个元素节点。
3.包含在HTML元素中的文本是文本节点。
4.每个HTML属性是一个属性节点。
5.注释属于注释节点。

    
DOM节点水果

喜欢的水果

DOM应用

在这里插入图片描述

使用父(parent),子(child) 和同胞(sibling) 等术语来描述这些节点的层次关系,父节点拥有子节点,同级的子节点被称为同胞或兄弟节点,它们的关系如下。
1.在节点树中,顶部节点被称为根(root),如节点。
2.每个节点都有父节点,除了根(它没有父节点),如和的父节点都是。
3.一个节点可以拥有任意数量的子节点。
4.同胞节点是拥有相同父节点的节点,如.就是兄弟节点,它们的父节点均为节点。

访问节点

使用DOM Core访问HTML文档的节点主要有两种方式:一种是使用getElerment系列方法访问指定节点,另外一种是根据节点的层次关系访问节点。

1.使用getElerment系列方法访问指定节点:

在HTML文档中,访问节点的标准方法就是我们之前学习的getElement 系列方法,即getElementByld( )、getElementsByName( )和glerentsByTagName(),只是它们查找的方法略有不同。
1.**getElementByld( )😗*返回按id属性查找的第个对象的引用。
2.getElementsByNarme(): 返回按带有指定名称name查找的对象的集合,由于一个文档中可能会有多个同名节点(如复选框、单选按钮),因此返回的是元素数组。
3.getElenstsByTagName(): 返回带有指定标签名TagName 查找的对象的集合,由于一个文档中可能会有多个同类型的标签节点(如图片组、文本输入框),因此返回元素数组。

2.根据层次关系访问节点

通过getElementById(),getElementsByName()和getElenmentsByTagName( )这三种方法可查看HTML文档中的任何元素,但是这三种方法都会忽略文档的结构, 因此在HTML DOM中提供了如下一些节点属性这些属性可遵循文档的结构在文档的局部进行“短距离地查找元素”。
在这里插入图片描述
节点属性的应用非常广泛,下面这个代码让大家简单的认识一下。

    
访问节点
京东快报
更多 >

结果:

在这里插入图片描述
在JavaScript中提供给了大家一个可兼容不同浏览器的一个属性:element
可以消除因空行,换行等出现的无法准确访问到节点的情况

element属性

在这里插入图片描述

节点信息

节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点某些信息的属性。

属性如下:
1.nodeNeme属性包含某个节点的名称,元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是# documen.。
2.nodeValue节点值,对于文本节点,nodeValue 属性包含文本;对于属性节点,nodeValue属性包含属性值: nodeValue 属性对于文档节点和元素节点是不可用的。
3.nodeType属性可返回节点的类型,是一个只读属性 .如返回的是元素节点、文本节点,注释节点等。

    
节点信息
  • nodeName
  • nodeValue
  • nodeType

运行结果如下:

在这里插入图片描述

操作节点
操作节点主要是对节点的属性,节点,节点样式进行操作。

操作节点的属性

HTML DOM提供了获取及改变节点属性值的标准方法,如下所示。
1.getAttribute( “属性名" ):用来获取属性的值。(如果属性值不存在,则getAttribute()返回null)
2.setAttribute( “属性名”,“属性值” ): 用来设置属性的值。

创建和插入节点

使用JavaScript操作DOM有很多方法可以创建或增加一个新节点。

主要方法如下:
在这里插入图片描述

删除和替换节点

使用Core HTM的L删除和替换节点的方法如下:

在这里插入图片描述
方法replaceChild (newNode,oldNode) 中的两个参数,newNode 是替换的新节点,oldNode 是要被替换的节点。

操作节点样式

在JavaScript中,有两种方式你可以动态的改变样式的属性:
一种是使用样式的style属性,另一种是使用样式的className属性。

1.style属性

在HTML DOM中,style 是一个对象,代表一个单独的样式声明,可通过应用样式的文档或元素访问style对象,使用style属性改变样式的,语法如下。
语法
HTML元素.style.样式属性= “值”;
2.className属性
在HTML DOM中,clssName 属性可设置或返回元素的class样式,语法如下。
语法
HTML元素.className=“样式名称”

获取元素样式

在JavaScript中使用style属性获取样式的属性值,语法如下:
语法
HTML 元素.style.样式属性;

如何获取样式表中的属性值?

微软为每个元素提供了一个currentStyle对象,它包含了所有元素的style对象的特性和任何未被覆盖的css规则的style特性,currentStyle 对象与style 对象的使用方式一 样,语法如下所示。
语法
HTML元素.currentStyle. 样式属性;

getComputedStyle()方法接收两个参数,需要获取样式的属性值,语法如下:

语法
document . defaultView . getComputedstyle (元素,nu11) .属性;

获取元素位置

使用currentStyle或getComputedStyle( )可以获得元素的属性值,即可以获取元素在网页中的位置。

元素属性应用

可以获取滚动状态下元素的一些属性,如下表:
在这里插入图片描述
语法
document . document Element.scrollTop;
document . documentElement .scrollLeft;
或者
document . body . scrollTop;
document . body. scrollLeft;

总结:

在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_46175284/article/details/107094133 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:JavaScript基础
下一篇:初始jQuery

发表评论

最新留言

不错!
[***.144.177.141]2024年03月14日 16时43分25秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

kafka消费者直接存在mysql中_【Canal】利用canal实现mysql实时增量备份并对接kafka 2019-04-21
python中readlines()函数_python中读取文件函数read()、readline()、readlines()的区别 2019-04-21
python入门之基础语法第四关输入输出答案_Python基本语法入门,基础 2019-04-21
mysql在存储过程仍_mysql存储过程 2019-04-21
失败的人生图片_早安励志经典语录精辟的一句话人生感悟 2019-04-21
如何设画面大小_如何设计旅游类项目?分享3种设计思路 2019-04-21
开启web_2021秋招四大网申时间、网申地址汇总(持续更新),德勤、安永、普华永道已开启!... 2019-04-21
从右边开始放_停路边,被人恶意放钉子,爆胎,报警无果,要我找监控 2019-04-21
读写测试_UFS 3.0读写测试数据曝光:秒杀UFS 2.1和eMMC 2019-04-21
注册小程序要多少钱_开发一个微信小程序商城要多少钱? 2019-04-21
mysql 实现id自增序列_MySQL分表自增ID解决方案 2019-04-21
catti二级笔译综合能力真题_CATTI韩语二级口译真题及考场回忆版 2019-04-21
攻防世界 适合做桌面_世界杯大冷门,双方实力悬殊,德国队为何输给了韩国队... 2019-04-21
可涂抹什么让指纹加深_手机镀膜是什么?液体玻璃手机镀膜和膜结手机纳米防护的区别... 2019-04-21
node静态服务器优缺点_Node —— BFF 2019-04-21
新风系统风速推荐表_PE管还是PVC管?现场评测新风系统两种管道对比 2019-04-21
华为社招嵌入式软件面试_嵌入式软件面试那点事 2019-04-21
心电图多少为正常范围_一个人的正常尿酸是多少,不管体重多少,不超过这个范围都算正常... 2019-04-21
两个集合相等的例题_人教A版高中数学必修一1.1.集合间的基本关系优质课公开课课件、教案... 2019-04-21
文件 写回硬盘_小猿圈python学习-用Python操作文件 2019-04-21