本篇文章主要介绍了详解JS获取HTML DOM元素的8种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
什么是HTML DOM
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
这篇文章不做深入研究,只把各种用法和坑做一个总结。
JS获取DOM元素的方法(8种)
通过ID获取(getElementById)
通过name属性(getElementsByName)
通过标签名(getElementsByTagName)
通过类名(getElementsByClassName)
获取html的方法(document.documentElement)
获取body的方法(document.body)
通过选择器获取一个元素(querySelector)
通过选择器获取一组元素(querySelectorAll)
我们开始逐一讲解。
1.通过ID获取(getElementById)
document.getElementById('id')
用法:
1.上下文必须是document。
2.必须传参数,参数是string类型,是获取元素的id。
3.返回值只获取到一个元素,没有找到返回null。
坑~~坑坑~坑坑~坑坑~:
1.如果有多个id存在只获取第一个,也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。
2.在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。
3.在IE6、7中不区分大小写。
4.可以直接用元素的ID代表这个元素。(项目中不推荐)
5.通过ID获取元素的上下文只能是document。为什么上下文必须是document呢,因为getElementById这个方法在Document类的原型上,也许你没有听懂,那就继续往下看。
2.通过name属性(getElementsByName)
document.getElementsByName('name')
用法:
1.上下文必须是document。
2.必须传参数,参数是是获取元素的name属性。
3.返回值是一个类数组,没有找到返回空数组。
坑~~坑坑~坑坑~坑坑~:
1.获取的结果是一个类数组,不是数组。
2.在IE浏览器中只能获取到表单元素,当然我们一般也只用它获取表单元素,从ie10开始可以不只是表单元素。
3.上下文只能是document,原因同getElementById。
3.通过标签名(getElementsByTagName)
document.getElementsByTagName('p'); var op = document.getElementById('pId'); op.getElementsByTagName('p');
用法:
1.上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
2.参数是是获取元素的标签名属性,不区分大小写。
3.返回值是一个类数组,没有找到返回空数组。
坑~~坑坑~坑坑~坑坑~:
1.获取的结果是一个类数组。
2.上下文不必须是document了,因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上,所以document和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。
4.通过类名(getElementsByClassName)
用法(和getElementsByTagName类似):
1.上下文可以是document,也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组,没有找到返回空数组。
坑~~坑坑~坑坑~坑坑~:
1.获取的结果是一个类数组。
2.IE8以及以前版本不兼容。真可惜这么好用的方法不兼容。
5.获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的。
6.获取body的方法(document.body)
document.body是专门获取body这个标签的。
7.通过选择器获取一个元素(querySelector)
用法:
1.上下文可以是document,也可以是一个元素。
2.参数是选择器,如:"p .className"。
3.返回值只获取到一个元素。
坑~~坑坑~坑坑~坑坑~:
这个方法不兼容IE7以及以前版本,现在似乎也没有考虑IE7兼容的公司了。
8.通过选择器获取一组元素(querySelectorAll)
用法同querySelector类似:
1.上下文可以是document,也可以是一个元素。
2.参数是选择器,如:"p .className"。
3.返回值是一个类数组。
坑~~坑坑~坑坑~坑坑~:
同querySelector,不兼容IE7。
使用原生JS获取DOM元素的8个方法讲完了,接下来在讲一下为什么有的方法只能在document上使用。
拿p举栗子,p是HTMLpElement类的一个实例,document是HTMLDocument 的实例。
他们的继承关系:
HTMLpElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget
我们都知道子类继承父类,子类就可以使用父类的属性和方法。
他们相同的继承关系是Node和EventTarget,也就是说他们都可以使用Node和EventTarget上的方法。
如Node上的nodeName、parentNode等,和EventTarget上的addEventListener等。
getElementById只在Document类的原型上,HTMLpElement 没有继承Document类,所以p不能使用getElementById方法。
getElementsByTagName即在Document类的原型上也在Element类的原型上,所以p和document都可以使用getElementsByTagName方法。
其它同理。
以上是详解JS获取HTML DOM元素的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

记事本++7.3.1
好用且免费的代码编辑器