JavaScript 操作 DOM 对象

最新推荐文章于 2024-09-10 10:25:08 发布
最新推荐文章于 2024-09-10 10:25:08 发布
阅读量211 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_chenyang/article/details/107071913
版权

DOM

DOM（Document Object Model）译为文档对象模型，是 HTML 和XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。

什么是 DOM？

DOM（Document Object Model） 是 W3C (World Wide Web Consortium)（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

	W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态
地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

如果您需要学习 XML DOM，请访问 XML DOM 教程

什么是 HTML DOM？

HTML DOM 是:

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换而言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素都是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

HTML DOM 节点树
在这里插入图片描述
节点关系

节点树中的节点彼此拥有层级关系。
我们常用父（parent）、子（child）和同胞（sibling） 等术语来描述这些关系。父节点拥有子节点，同级的节点称为同胞（兄弟节点）。

  • 在节点树中，顶端节点被称为根（root）。
  • 每个节点都有父节点、除了根（它没有父节点）。
  • 一个节点可拥有任意数量的子节点。
  • 同胞是拥有相同父节点的节点。

HTML DOM 对象 - 方法和属性

方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

常用的 HTML DOM 方法

方 法描 述
getElementById( )获取带有指定 id 的节点（元素）
getElementsByName( )返回带有指定 name 的对象的集合
getElementsByTagName( )返回含有指定标签名称的所有元素的节点集合
getElementsByClassName( )返回包含带有指定类名的所有元素的节点列表

属性

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

常用的节点属性

属性名称描 述
parentNode返回节点的父节点
childNodes返回子节点集合，childNodes[i]
firstChild返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild返回节点的最后一个子节点
nextSibling下一个同胞节点
previousSibling上一个同胞节点

element 属性

属性名称描 述
firstElementChild返回节点的第一个子元素
lastElementChild返回节点的最后一个元素
nextElementSibling下个同胞元素
previousElementSibling上一个同胞元素

innerHTML 属性

innerHTML 属性用于获取或设置任意 HTML 元素内容。

nodeName 属性

nodeName 属性规定节点的名称

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值

  • 元素节点的 nodeValue 是undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 只读。

节点类型nodeType 值
元素 element1
属性 attr2
文本 text3
注释 comments8
文档 document9

操作节点

操作节点的属性

语法

	getAttribute("属性名");
	setAttribute("属性名","属性值")

创建和插入节点

名称描 述
createElement(tagName)创建一个标签名为tagName的新元素节点
A.appendChild(B)把 B 节点追加至 A 节点的末尾
insertBefore(A,B)把 A 节点插入到 B 节点之前
cloneNode(deep)复制某个指定的节点

删除和替换节点

名称描 述
removeChild(node)删除指定的节点
replaceChild(newNode,oldNode)用 newNode 替换 oldNode 节点

操作节点样式

节点属性

语法
	HTML元素.style.样式属性="值";

className属性

语法
	HTML元素.className="样式名称"

获取元素的样式

语法
	HTML元素.style.样式属性;
	HTML元素.currentStyle.样式属性;//兼容IE浏览器

HTML 中元素属性

属性描 述
offsetLeft返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight返回元素的高度
offsetWidth返回元素的宽度
offsetParent返回元素的偏移容器，即对最近的动态定位包含元素的引用
scrollTop返回匹配元素的滚动条的垂直位置
scrollLeft返回匹配元素的滚动条的水平位置
clientWidth返回元素的可见宽度
clientHeight返回元素的可见高度

归纳

在这里插入图片描述

CSDN_chenyang
关注
专栏目录
JavaScript操作DOM对象
weixin_67877326的博客
05-18 684
一、DOM操作 DOM：文档对象模型，是基于文档编程的一套API接口 1.DOM操作分类 使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM 1.节点和节点关系 DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 使用父（parent）、子（ch
javascript_DOM操作
10-11
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
javascript DOM 操作
呓语 Beta 2.0
08-01 1168
 javascript DOM 操作一、IE中的操作1.IE中DOM的支持    IE中是以AcitveX来支持DOM的，共有5个版本    Microsoft.XmlDom    MSXML2.DOMDocument    MSXML2.DOMDocument.2.0    MSXML2.DOMDocument.3.0    MSXML2.DOMDocument.4.0    2.创建方法  
【JavaScript】DOM操作---常用属性详解及修改方法
最新发布
lph159的博客
09-10 909
DOM（文档对象模型）是HTML和XML文档的编程接口。它将文档解析为树形结构，其中每个节点代表文档的一部分，如标签、属性或文本。通过JavaScript，我们可以动态地操作这些节点，以修改页面内容、样式或行为。href是超链接（标签）中最常用的属性，它指定了链接的目标URL。当用户点击链接时，浏览器会导航到指定的地址。src属性用于指定图像、脚本、iframe等元素的源URL。浏览器会根据该属性加载资源，如图像或脚本文件。title。
javascript DOM操作
qq_36394708的博客
01-10 230
JavaScript DOM节点操作方法总结节点类型主要有三种：元素节点，属性节点和文本节点。 而对DOM的主要也就是围绕元素节点和属性节点的增删改查。下面就分别从对元素节点的操作和对属性节点的操作来介绍。元素节点查 在对DOM进行增删改之前，首先要找到对应的元素。具体的查找方法如下：1.属性查找 - getElementByID() // 得到单个节点 -
JavaScript Dom操作
qq_38681468的博客
04-14 156
js操作dom 1.document.getElementById()：获取指定id的dom 2.document.
JavaScript DOM操作
好好学习天天向上
03-27 5232
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
Javascript操作dom对象之select全面解析
12-29
　<select id=university> 北京大学>北京大学 ...1.获取select对象； var university=document.getElementById(university); 2.获取select选中option的index值； var index=university.selectedIndex;
javascript操作DOM对象
chb18566521324的博客
07-02 222
DOM：Document Object Model (文档对象模型)； 访问节点 使用getElement系列方法访问指定节点 getElementById()，getElementsByName()， getElementsByTagName() 根据层次关系访问节点 parentNode：返回节点的父节点 childNodes：返回子节点集合，childNodes[i] firstChild：返回节点的第一个节点 lastChild：返回节点的最后一个节点 MNMJH nextSibli
Javascript DOM操作
hui_010的博客
07-20 377
何为DOM文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的兼容性：浏览器支持情况：IE 10% chrome 60% FF 99%函数的定义：有名函数、无名函数自定义函数、系统函数函数的调用参数： 1.形参=变量 有参函数 2.实参有参函数DOM应用1、创建DOM元素lcreateElement(标签名) 创建一个节点 lappe
javascript的dom操作
weixin_51395608的博客
04-09 724
javascript的dom操作笔记
JavaScript中DOM操作
10-12 3985
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
JavaScript【DOM操作】
loetca
05-03 897
JavaScript【DOM操作】
第3章 javaScript操作 Dom对象 课后作业：
gz98411的博客
07-17 4793
1，图片轮播 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮播&lt;/title&gt; &lt;style&gt; .scroll{width: 360
javascript中DOM操作
通俗易懂
05-31 832
文章目录文档对象模型获取页面元素：(typeof都是object)事件基础：（触发响应的机制）操作属性：节点操作：获取节点：获取元素节点：自己封装一个：创建节点：删除节点：复制节点：三种动态创建元素的区别：常用元素尺寸偏移尺寸客户端尺寸滚动尺寸确定元素尺寸事件高级创建事件的方式：删除事件：DOM事件流：事件对象事件委托用户界面事件焦点事件鼠标事件键盘事件HTML5 事件触摸及手势事件 文档对象模型 文档：document 元素：element 节点：（标签、属性、文本、注释等）node 获取页面元素：(
JavaScript之DOM操作
weixin_30362233的博客
08-17 170
一, DOM树介绍 DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树。 在HTML当中，一切都是节点： 元素节点：HTML标签 文本节点：标签中的文字（比如标签之间的空格、换行） 属性节点：：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值