JavaScript BOM------获取DOM对象

最新推荐文章于 2024-07-23 16:19:32 发布
最新推荐文章于 2024-07-23 16:19:32 发布
阅读量431 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwerLoL123456/article/details/80708371
本文介绍了JavaScript中获取DOM对象的五种方法：包括通过ID、通过标签名、通过类名、通过name属性获取。每种方法都有详细的代码示例和运行结果展示，其中通过ID获取是最常用但不推荐的方式，而通过其他属性获取可能返回的是列表形式的结果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取DOM对象的方法有以下几种

第一种


此时程序运行的结果如下


然后通过id过去DOM对象，并修改标签内的文本。


运行的结果如下，console.log(msg)获取的内容是<div  id="msg">新的内容</div>,然后通过.innerHTML修改div标签内的内容  ，这种获取DOM对象的方法并不推荐。


第二种  通过id获取对象


此时程序运行的结果如下


然后通过id，使用document对象getElementById方法来获取DOM对象


运行结果如下


第三种  通过class类获取对象


此时运行结果如下


然后通过getElementByClassName( )来获取DOM对象，获取的结果是个列表。


运行结果如下


第四种   通过标签获取对象


此时程序运行的结果是


然后通过getElementByTagName（ ）标签要写成字符串形式，而且获取的结果是一个列表。标签仍然是标签。


此时程序的运行结果如下


第五种  通过name获取对象  适用于表单标签

此时程序运行的结果如下


然后通过getElementByName获取DOM对象，获取的结果是一个列表，然后改变他的值。


此时程序运行结果如下





【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
11-09 2150
DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...
JavaScript操作DOM对象
weixin_67877326的博客
05-18 729
一、DOM操作 DOM：文档对象模型，是基于文档编程的一套API接口 1.DOM操作分类 使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM 1.节点和节点关系 DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 使用父（parent）、子（ch
JS事件、Bom对象和Dom对象
Hello_zbs的博客
08-30 442
事件 事件 (Event) 是 JavaScript 应⽤跳动的⼼脏 ，进⾏交互，使⽹⻚动起来。当我们与浏览器中 Web ⻚⾯ 进⾏某些类型的交互时，事件就发⽣了。事件可能是⽤户在某些内容上的点击、⿏标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发⽣的事情，⽐如说某个 Web ⻚⾯加载完成，或者是⽤户滚动窗⼝或改变窗⼝⼤⼩。 通过使⽤ JavaScript ，你可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应 ...
js当中的BOM对象
joke的博客
04-09 353
在前面我们说过，js是由三部分组成的：EMCAScript :它定义了基本的语法和语句BOM :浏览器对象模型DOM:文档对象模型前面那么多都是在将EMCAScript，现在开始接触BOM对象模型。一：navigator：封装了一些浏览器的基本信息。掌握userAgent 返回由客户机发送服务器的 user-agent 头部的值。screen:   获取屏幕信息的对象。重点掌握width和heig...
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 4208
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
JavaScript(BOM,DOM)
lmj19929的博客
03-11 273
BOM,DOM
2021-07-16
weixin_51797050的博客
07-16 142
操作DOM对象 核心 浏览器网页就是一个DOM数形的结构! 1.更新: 更新DOm节点 2.遍历Dom节点: 得到Dom节点 3.删除: 删除一个Dom节点 4.添加:添加一个新的节点 要操作一个Dom节点, 就必须要先获得这个节点Dom节点 <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> &l
Javascript获取DOM对象的8种方法
花妖
03-25 612
（1） 通过ID获取（getElementById） （2）通过name属性（getElementByName） （3）通过标签名（getElementByTagName） （4）通过类名（getElementClassName） （5）获取html的方法（document.documentElement） （6）获取body的方法（document.body） （7）通过选择器获取一...
JS操作dom对象的入门（比较系统全面）
mcy478643968的专栏
10-18 9169
<br /><br />一、什么是DOM？ <br /><br />   什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。
js获取dom html元素属性,js 获取Dom元素、获取和设置属性
weixin_31502485的博客
06-04 608
Dom元素1 getElementByIddocument.getElementById(id) 返回一个对象2 getElementsByTagNamedocument.getElementsByTagName(tag) 返回一个对象数组运行使用*通配符，获取所有元素dom.getElementsByTagName('*') 获取dom下所有子元素3 getElementsByClassName...
操作DOM对象
LIAO_YUANLONG的博客
01-07 154
核心 浏览器网页就是一个Dom树形结构 更新： 更新Dom节点 遍历dom节点： 得到Dom节点 删除： 删除一个Dom节点 添加：添加一个新的Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点 <div id="father"> <h1>标题1</h1> <p id="p1">p1</p> <p id="p2">p2</p> </div> <script>.
操作DOM对象（重点）
qq_46423017的博客
09-28 521
1、DOM是什么： 2、核心 DOM分层： 3、获得dom节点 4、更新DOM节点 更新节点 操作文本 操作css 可以通过JavaScript去改变样式 5、删除DOM节点 删除节点 6、创建插入DOM节点 插入节点 创建一个新的标签 insertBefore
js中的简单BOM操作
wdtn5656的博客
10-20 563
BOM；sessionStorage&storage方案：&storage方案：&cookie存储数据&本地储存&设置浏览器的滚动距离&浏览器的历史记录&浏览器卷去的尺寸&操作浏览器的标签页&浏览器的地址栏&浏览器的常见事件&浏览器可视窗口尺寸&浏览器的弹出框
7、操作DOM对象（重点）
weixin_59806308的博客
01-18 1197
核心：浏览器网页就是一个DOM树形结构更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；遍历：遍历该DOM节点下的子节点，以便进行进一步操作；添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
HTML-JavaScript操作DOM对象
南劲竹的博客
09-15 494
操作DOM DOM：Document Object Model（文档对象模型） 节点和节点关系 访问节点： 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( ) 根据层次关系访问节点 节点属性 属性名称 描述 p...
JS18：操作DOM对象
搬运工
04-06 288
DOM（Document Object Model）文档对象模型。 核心 浏览器网页就是一个 DOM 树形结构。 更新：更新 DOM 节点 遍历 DOM 节点：得到 DOM 节点 删除：删除一个 DOM 节点 添加：添加一个 DOM 节点 要操作一个 DOM 节点，就必须要先获得这个 DOM 节点。 获取 DOM 节点 对应 CSS 选择器，可以通过标签名，id，class 获取 DOM 节点。 <body> <div id="father">
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3835
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
操纵DOM对象
qq_51088023的博客
07-18 334
创建一个元素节点语法var变量=document.createElement("元素");创建一个文本节点语法var变量=document.createTextNode("文本");
js如何在控制台打印dom对象，查看dom对象属性
最新发布
weixin_44260173的博客
07-23 893
如何在控制台打印dom对象，查看dom对象属性
全面掌握JavaScript - 网页开发入门教程
3. **DOM 操作**：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口，JavaScript 通过 DOM 操作可以读取、修改网页上的内容、样式和结构。 4. **事件处理**：JavaScript 能够响应用户的事件，如点击、悬停、键盘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值