JS中获取元素的方法

已于 2022-09-11 21:42:40 修改
阅读量5k 收藏 5
点赞数 1
文章标签： javascript 前端 html
于 2022-09-11 21:28:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43765641/article/details/126809244
版权
本文详细介绍了JavaScript中获取HTML元素的五种方法：通过id、标签名、class名、name以及选择器。每个方法都提供了示例代码，并指出获取多个元素时返回的是数组。同时强调了可以通过父元素获取子元素。
摘要由CSDN通过智能技术生成

目录

一、通过id获取

二、通过标签名获取

三、通过class名获取

四、通过name获取

五、通过选择器获取

一、通过id获取

document.getElementByid('id名')

 

<body>
    <div id="con">
        <p></p>
    </div>
</body>


<script>
    var Div=document.getElementById('con')
</script>
 

二、通过标签名获取

获取的是一个数组

document.getElementsByTagName('标签名')

 

<body>
    <div id="con">
        <p></p>
    </div>
    <div></div>
    <div></div>
</body>


<script>
    var Div=document.getElementsByTagName('div')
     console.log(Div);
</script>
 

三、通过class名获取

获取的是一个数组

document.getElementsByClassNa

最低0.47元/天 解锁文章
辰辰辰辰宸
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS DOM之getElementsByClassName
SkullSky的博客
03-13 1201
实现代码：function getElementsByClassName(parent,tagName,className){ var aEls = parent.getElementsByTagName(tagName); var arr = []; for(var i=0; i<aEls.length; i++){ var aClassName = aEls[i
源生javascript 添加getElementByClass方法
weixin_33928137的博客
06-28 536
直接上代码： document.getElementByClass = function(n) { var el = [], _el = document.getElementsByTagName('*'); for (var i=0; i<_el.length; i++ ) { ...
document.getElementsByClassName的实现
最新发布
桂云帆的博客
06-25 471
还有个更古老级的，我从prototype.js1.01版本中找到的，它能支持多个类名的查找（上面两个不行）。它不支持IE5，效率一般般，但作为最早的框架之一，它已经做得很好，其他框架还没有想到这个呢！另一个实现，由Dustin Diaz（《JavaScript Design Patterns》的作者）提供，但兼容性不如上面的，不支持IE5。取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。当然如果游览器原生支持，就用原生的。要使用分支document.all以防错误。
js getElementByClass
speedupnow的专栏
03-24 5835
1.js getElementByClassfunction getElementsByClass(node, searchClass, tag) {        var classElements = new Array();        var els = node.getElementsByTagName(tag);        var elsLen = els.length;        var pattern = new RegExp("//b" + searchClass + "//b"
javascript实现document.getElementByClass的方法
ty19921009的博客
09-01 1万+
function getElementsByClassName (className) { var all = document.all ? document.all : document.getElementsByTagName( ' *' ); var elements = new Array(); for ( var e = 0; e < all.length; e ++ ) { if (a
document.getElementByclassName（）方法
热门推荐
boat_sea的博客
04-29 23万+
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...
js中使用getElementsByClassName获取class对象
实际工作与学习当中的随记
08-09 6600
前端开发一般不需要过多考虑性能问题，但你想在性能上追求极致的话，一定要知道jQuery性能很差。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。......
JavaScript中常见获取元素的方法汇总
10-24
除了上述三种基本方法，还可以根据元素的属性、前后关系、相对位置等使用更复杂的查询技术来获取DOM元素，例如querySelector和querySelectorAll方法，它们使用CSS选择器的方式来获取元素。这些选择器支持更复杂的...
js获取元素外链样式的方法
10-24
总结来说，通过上述方法和示例代码，我们可以看到如何在不同的浏览器环境下，使用JavaScript获取元素的外链样式。尽管现代浏览器基本都支持window.getComputedStyle()，但在一些老旧的IE浏览器上，仍需要使用...
javascript获取元素离文档各边距离的方法
10-24
总结来说，使用JavaScript获取元素离文档各边距离的方法主要涉及`offset()`、`scrollTop()`、`scrollLeft()`、`height()`、`width()`以及`outerHeight()`和`outerWidth()`等方法的结合运用。通过这些方法，我们可以...
js获取json元素数量的方法
10-24
本文将详细介绍JavaScript语言中如何获取JSON对象元素数量的方法，并提供了一些实用的在线工具链接。 首先，我们需要知道，在JavaScript中，JSON数据通常是以对象（Object）的形式存在。对象的属性（key）与值...
js通过classname来获取元素的方法
10-21
首先，原生JavaScript提供了三种基本的获取元素的方法： 1. `getElementById('id')`：通过元素的唯一ID获取单个元素。这是最快且最直接的方式，但因为ID必须是唯一的，所以不能用于基于类名的选择。 2. `...
Js关于getElmentsByClassName()的兼容与封装
F__Rong的博客
08-01 1330
getElmentsByClassName()的兼容与封装
document.getElementByClassName对吗?
fury的博客
01-27 758
是一个用于获取具有相同 class 名称的元素集合的方法。它返回一个包含所有符合条件的元素的 HTMLCollection 对象，可以通过索引来访问其中的元素。返回的是集合对象，即使只有一个元素匹配也会返回一个包含该元素的集合。document.getElementByClassName对吗?在 JavaScript 中，获取元素的方法是。此外，还可以使用其他选择器方法来获取元素，比如。，它们提供了更灵活和强大的选择器功能。
JS学习一： document.getElementById(“some id“)
weixin_43844071的博客
08-11 537
document.getElementById(“some id”)：是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。 <html> <head> <meta charset="utf-8"> <title>练习一</title> </head> <body> <script> function ch
Document.getElement方法
asunny_的博客
04-24 7833
document.getElement应用小总结
JavaScript库，编写$()和getElementsByClassName()方法
weixin_59272777的博客
04-02 756
JavaScript库是一组预先编写好的JavaScript代码集合，旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法，可以帮助开发人员处理各种任务，比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间，并提供了一种标准化的方法来解决常见的编程问题。举个例子，假设你需要在网页中实现一个图片轮播的功能。如果你从头开始编写代码，需要处理图片的切换、定时器的设置、按钮的事件绑定等等，这会耗费大量的时间和精力。
Js: document.getElement系列 与 node.querySelectAll对比总结
LoneMouse
05-10 439
DOM中有两种常用查找元素的方式: document.getElementsTagName() //参数可以为* document.getElementById() document.getElementByclassName() -可以指定多个类名 空格隔开- node.querySelector() node.querySelectorAll() 两者对比 getElement… querySelector… 效率 快 较慢 返回值类型 HTMLCollection (动态集合
js document.getElementsByClassName的使用介绍与自定义函数
weixin_34184561的博客
03-20 766
今天在增加一个功能的时候需要用到getElementsByClassName()，getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持，那么就需要下面的方法解决了getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。getElementByClassName()函数的使用方法：使...
js通过this获取元素
05-12
在 JavaScript 中，可以通过 `this` 关键字获取当前执行上下文中的 DOM 元素。下面是一些示例： 1. 在事件处理函数中获取当前被点击的元素： ```html <button onclick="console.log(this)">Click me</button> ``` 在上面的代码中，当按钮被点击时，`this` 将会指向该按钮元素，因此在控制台中输出 `this` 将会显示该元素。 2. 在自定义函数中获取元素： ```js function logElement() { console.log(this); } const button = document.querySelector('button'); button.addEventListener('click', logElement); ``` 在上面的代码中，我们定义了一个名为 `logElement` 的函数，并将其绑定到一个按钮元素的点击事件上。当按钮被点击时，`logElement` 函数将会被调用，并且 `this` 将会指向该按钮元素。 3. 在类中获取元素： ```js class MyClass { constructor() { this.button = document.querySelector('button'); this.button.addEventListener('click', this.logElement.bind(this)); } logElement() { console.log(this); } } const myInstance = new MyClass(); ``` 在上面的代码中，我们定义了一个名为 `MyClass` 的类，并在其构造函数中获取了一个按钮元素，并将其绑定到了点击事件上。在 `logElement` 方法中，我们使用 `console.log(this)` 来输出当前的执行上下文，该上下文将会指向 `MyClass` 实例对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值