原生的js获取DOM元素方法总结

最新推荐文章于 2023-09-16 21:46:01 发布
最新推荐文章于 2023-09-16 21:46:01 发布
阅读量1.4k 收藏
点赞数
文章标签： dom 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014114702/article/details/45642209
版权

如果在代码中有jquery库，使用jquery选择器来获取DOM元素是很方便的，但是在有些情况下需要用到原生的js代码获取DOM元素，现将方法总结如下：
1. document.getElementById() 根据ID获取DOM，结果是单个DOM，如果有多个匹配则返回第一个
2. document.getElementsByTagName() 根据标签名获取DOM，结果是所有匹配DOM元素构成的数组，注意Elements是复数
3. document.getElementsByName() 根据name属性获取DOM，结果是所有匹配DOM元素构成的数组，注意Elements是复数
4. document.getElemetnsByClassName() 根据类名获取DOM， 结果是所有匹配DOM元素构成的数组，注意Elments是复数
5. document.querySelector() 这种方法与jquery选择器非常类似，可以根据任何类名、标签名或者id获取元素，此方法返回的是单个DOM，如果有多个匹配返回的是第一个
6. document.querySelectorAll() 与上一个方法类似，但是返回的是一个数组，包含所有匹配的DOM元素

没有但是lg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js获取元素样式的简单方法
11-27
我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式，方法有很多，比如：通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式，注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是，如果没有给元素设置任何样式，也会把浏览器默认的样式返回来。 1、ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值，但是有时候获取的并非是节点的样式值，而是空值。这是因为ele.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”cs
原生获取DOM节点
03-27 1297
原生获取DOM节点
DOM获取元素的方法
weixin_36282409的博客
02-21 1278
DOM获取元素的方法： DOM：document object model 文档对象模型，提供一些属性和方法可以让我们去操作DOM元素； 获取方法： document.getElementById //一个元素对象 [context].getElementsByTagName //元素集合 [context].getElementsByClassName //元素集合 document.getE...
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 3360
六种获取元素的方法
JS获取DOM元素的方法
热门推荐
万伏小太阳
01-25 2万+
什么是HTML DOM 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 这篇文章不做深入研究，只把各种用法和坑做一个总结。 JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElem
JS-获取DOM元素的五种方法
weixin_43937466的博客
09-04 1万+
根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用 用法类似写css；querySelectorAll：返回一个元素数组。more。
Dom 获取元素的几种方式
qq_66198247的博客
05-23 9640
一.Dom简介 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 二.Dom树 文档：一个页面就是一个文档，Dom中用document表示 ； 元素：页面中的所有标签都是元素，Dom中使用element表示； 节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示 Dom
原生JS-DOM操作获取元素的四种方法
世界和我们都不该止步于此
04-14 6313
目录 一.getElementById获取元素 二.getElementsByTagName()获取元素 三.HTML5新增方法获取元素 四.获取body、html元素 一.getElementById获取元素 这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象 我们来举一个例子： <div id='hello-JS'>你好JS</div> 这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过get.
【JAVAScript】dom获取元素的方式及实例
weixin_51612770的博客
05-12 3054
JAVAScript (dom易忘点：获取元素节点) 今天主要介绍两种获取元素的方式：document.方法（）和利用节点层级关系获取元素 需要注意的是：选取合适的获取方式，并考虑浏览器的兼容性（部分获取的方式IE9以下是无法使用的） 什么是DOM? 文档对象模型 (DOM) 是HTML的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页
JS选取DOM元素的简单方法
11-23
摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选） 今天试了下各种选取元素的方法的速度，用原生的方法...
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
10-21
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS获取动态添加元素的方法详解
12-01
在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1. 在模板引擎里面添加行内事件 2. 利用事件的委托获取(常用) 3. 在ajax的监听...
原生JS实现获取及修改CSS样式的方法
10-18
主要介绍了原生JS实现获取及修改CSS样式的方法,结合实例形式简单分析了JavaScript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
node-v16.12.0-darwin-x64.tar.xz
最新发布
04-23
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
试用Dev Containers的示例项目-Go
04-23
计算机技术是指评价计算机系统的各种知识和技能的总称。它涵盖了计算机硬件、软件、网络和信息安全等方面。计算机技术的发展使我们能够进行高效的数据处理、信息存储和传输。现代计算机技术包括操作系统、数据库管理、编程语言、算法设计等。同时，人工智能、云计算和大数据等新兴技术也在不断推动计算机技术的进步。计算机技术的应用广泛，涵盖了各个领域，如商业、医疗、教育和娱乐等。随着计算机技术的不断革新，我们可以更加高效地实现预期自动化、标准化
NTsky新闻发布v1.0测试版(提供JavaBean).zip
04-23
### 内容概要： 《NTsky新闻发布v1.0测试版》是一款基于 Java 开发的新闻发布系统的测试版本，旨在为新闻机构和媒体提供一个简单易用的新闻发布平台。该系统具有基本的新闻发布和管理功能，包括新闻分类、新闻编辑、新闻发布等核心功能。此外，该版本还提供了 JavaBean，使开发人员能够方便地将系统集成到自己的项目中，快速实现新闻发布的功能。 ### 适用人群： 本测试版本适用于新闻机构、媒体从业者以及Java开发人员。如果你是一家新闻机构或媒体，希望拥有一个简单易用的新闻发布平台，方便快捷地发布和管理新闻，那么这个测试版本将为你提供一个初步的体验。同时，如果你是一名Java开发人员，希望学习和掌握新闻发布系统的开发技术，并且对新闻行业有一定的了解，那么通过这个测试版本，你可以获取到一些JavaBean，并且可以参考系统的设计和实现，为你的项目开发提供参考和借鉴。无论是从业务需求还是技术学习的角度，该测试版本都将为你提供一定的帮助和支持。
JavaScript介绍.zip
04-23
javascript，JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年开发，用于 Netscape Navigator 浏览器。随着时间的推移，JavaScript 成为了网页开发中不可或缺的一部分，并且其应用范围已经远远超出了浏览器，成为了全栈开发的重要工具。
15-21.php
04-23
15-21.php
汽车租赁系统（毕业设计）
04-23
汽车租赁系统后端采用了spring，spring mvc，mybatis框架，前端使用了layui，界面美观。 包含功能：客户管理，车辆管理，出租，出租单管理，汽车入库，检查单管理，菜单管理，用户管理，角色管理，日志管理，统计分析等。 该毕业设计功能涵盖了大部分汽车租赁中的业务需求，特点是业务功能较多，有助于学生加深业务到技术的理解。
js原生获取dom元素方法
10-14
可以使用以下方法获取 DOM 元素： 1. document.getElementById(id)：根据元素的 id 属性获取元素。 2. document.getElementsByTagName(tagName)：根据元素的标签名获取元素，返回一个 HTMLCollection 对象。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值