javascript三种获取dom对象的方法

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

1、getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" οnclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>

2.   getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many input elements?" />

</body>

3、getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many elements named 'myInput'?" />

</body>



羊崽
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript实现获取dom中class的方法
12-09
总的来说，JavaScript获取DOM元素中class的方法主要分为以下步骤： 1. 检查DOM元素是否支持`getElementsByClassName`方法。 2. 如果支持，直接调用此方法获取元素集合。 3. 如果不支持，遍历元素的子节点，通过`...
DOM元素打印(Window.print)
TomCat0916的博客
11-09 1123
DOM元素打印(Window.print)
onclick 如何获取当前dom节点
qq_43137725的博客
12-09 3203
<div class="box"> <span class="literSpan" onclick="changeDiv(this)">图表</span> </div> function changeDiv(obj) { //通过class类获取jquery对象，来操作元素属性 $('.literSpan...
常见的获取dom元素的方法
最新发布
Meta.Qing的博客
05-10 472
获取 DOM 元素是前端开发中非常常见的操作。
Dom 获取元素的几种方式
qq_66198247的博客
05-23 9869
一.Dom简介 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 二.Dom树 文档：一个页面就是一个文档，Dom中用document表示 ； 元素：页面中的所有标签都是元素，Dom中使用element表示； 节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示 Dom
Vue事件以及获取dom元素
XIAO_YuBaby的博客
11-11 3861
事件对象和事件修饰符 <template> <div id="app"> <!-- Vue 事件 以及获取dom元素（虚拟） v-on:事件类型 简写@事件类型 v-once 一次性数据绑定 changes 执行的方法可以不带括号 若方法有参数 --> <b...
JavaScript简单遍历DOM对象所有属性的实现方法
11-25
`getElementById` 方法用于根据ID获取DOM对象，然后我们创建了一个空字符串 `s` 用于存储遍历到的属性名。循环遍历过程中，每个属性名被添加到 `s` 后，用换行符分隔。最后，使用 `alert` 显示这些属性名。 **2. ...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
jquery获取iframe中的dom对象(两种方法)
10-27
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的 API 来操作 DOM（文档对象模型）元素。在涉及到跨窗口交互时，尤其是在有 iframe 的场景下，我们需要知道如何通过 jQuery 获取并操作 iframe ...
jquery对象和javascript对象即DOM对象相互转换
12-09
我们可以通过原生的`document.getElementById`，`document.querySelector`等方法获取DOM对象。一旦我们有了DOM对象，就可以调用它的属性和方法，如`element.src`。例如，`document.getElementById("img").src = ...
VUE中v-on:click事件中获取当前dom元素的代码
10-18
主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下
获取dom元素的方法
m0_61696809的博客
02-21 4179
如果页面上有多个 class 为 myClass 的元素，则可以通过 document.getElementsByClassName('myClass') 来获取这些元素。如果页面上有多个 class 为 myClass 的元素，则可以通过 document.querySelectorAll('.myClass') 来获取这些元素。如果页面上有一个 class 为 myClass 的元素，则可以通过 document.querySelector('.myClass') 来获取该元素。
vue使用swiper循环模式下，使用click事件，怎么获取其中的dom数据
Koreyoshi123654的博客
07-28 2444
vue使用swiper循环模式下，使用click事件，怎么获取其中的dom数据
DOM系列之DOM介绍及获取
老__L的博客
07-18 1176
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。Document的方法返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
javaScript:DOM元素的获取（静态/动态获取）
qq_52799985的博客
09-05 1966
dom操作其实在前面的文章中已经用到很多次了，但是一直没有系统性的总结，接下来的几篇文章，主要来总结dom操作以及dom操作相关的案例（小游戏），比如说：选字游戏，连连看，打地鼠，多球碰撞，随机抽签，无缝轮播，原生js绘制时钟等等。二.DOM元素获取的常用方法（重点）
垂直菜单样式&vue在click事件中获取当前dom元素
qq_35976548的博客
06-09 1150
简单版垂直菜单样式 效果图： <div id ="leftDiv"> <a href="#" @click="goLink('我是其他参数',$event)" class="active">AAA</a> <a href="#" @click="goLink('我是其他参数',$event)">BBB</a> </div> <div id ="rightDiv"> &lt
js获取点击的dom
ndkfa的博客
04-24 2866
表示最初被点击的元素。如果需要获取点击的父级元素（如点击了某个按钮，而不只是该按钮内的文本），则可以使用。注意，这两个方法需要在绑定事件的元素上调用，而不能在。如果需要取消默认行为，则可以使用。如果需要停止事件冒泡，可以使用。，它们指向绑定事件的元素。在事件函数的参数中，
DOM查询
Always-Learning
11-21 277
获取元素节点 通过document对象调用 getElementById() 通过Id属性获取一个元素节点对象 getElementsByTagName() 通过标签名获取 getElementsByName() 通过Name属性获取 获取元素节点的子节点 通过元素节点调用 getElementsByTagName() 通过标签名获取 例如： var city = docunment.getElementById("city"); # 查找city下所有的li节点 var lis = c
DOM获取的7种方式
qq_43184101的博客
07-01 829
dom操作中，我们常使用的方法来进行的一个获取。 其中对是返回对象的集合进行的一个梳理
掌握JavaScript高级BOM与DOM对象及实战案例
2. 介绍如何使用DOM实现基础案例，如案例1中的电灯开关，通过DOM对象切换图片来模拟开关状态，这涉及了事件监听和元素操作的实践应用。 课程的学习目标不仅限于理论，还包含四个实际案例，旨在让学生在实践中巩固所...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值