javascript 获取HTML DOM对象五种方式

最新推荐文章于 2023-04-12 13:34:32 发布
最新推荐文章于 2023-04-12 13:34:32 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： js 文章标签： javascript HT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woniuguanjun/article/details/28733273
版权
获取DOM对象有5种方式：
1.document.getElementById('id');//返回结果是一个对象，如果存在两个标签拥有相同id，则返回第一个标签对象。
2.document.getElementsByTagName('标签名')；//返回结果是一个对象集合，以数组形式放在一起
3.document.getElementsByName('标签name属性的值')；//返回结果是一个对象集合，以数组形式放在一起
4.document.getElementsByClassName('类名');返回一个对象集合，以数组形式放在一起。
5.通过this参数给函数传递受监控对象给函数。

1.document.getElementById();
  <!DOCTYPE html>
<html>
<head>
    <style>
 #myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
    </style>
</head>
<body>
 
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
 <div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
 <div id="myBtn" οnclick="get()" name="a">cccccccc</div>
 <div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
 
<script>
    function get(){
         //document.getElementById('myBtn') 通过id号获取对象
        var x=document.getElementById('myBtn');//返回一个对象，多个相同id，选择第一个
        alert(x.innerHTML);
           
       
    }
   
</script>
</body>
</html>
2.document.getElementsTagName('标签名')；
 <!DOCTYPE html>
<html>
<head>
    <style>
 #myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
    </style>
</head>
<body>
 
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
 <div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
 <div id="myBtn" οnclick="get()" name="a">cccccccc</div>
 <div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
 
<script>
    function get(){
         //document.getElementsByTagName('myBtn') 通过标签名获取
        var x=document.getElementsByTagName('div');//返回一个对象集合，以数组形式放在一起
        alert(x[0].innerHTML);
         alert(x[1].innerHTML);
          alert(x[2].innerHTML);
           alert(x[3].innerHTML);
           
       
    }
   
</script>
</body>
</html>
3.document。getElementsName('name属性的值');
 <!DOCTYPE html>
<html>
<head>
    <style>
 #myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
    </style>
</head>
<body>
 
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
 <div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
 <div id="myBtn" οnclick="get()" name="a">cccccccc</div>
 <div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
 
<script>
    function get(){
         //document.getElementsByTagName('myBtn') 通过name属性的是获取
        var x=document.getElementsByName('a');//返回一个对象集合，以数组形式放在一起
        alert(x[0].innerHTML);
         alert(x[1].innerHTML);
          alert(x[2].innerHTML);
           alert(x[3].innerHTML);
           
       
    }
   
</script>
</body>
</html>
4.document.getElementsByClassName('类名');
 <!DOCTYPE html>
<html>
<head>
    <style>
 .myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
    </style>
</head>
<body>
 
<div class="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
 <div class="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
 <div class="myBtn" οnclick="get()" name="a">cccccccc</div>
 <div class="myBtn" οnclick="get()" name="a">ddddddddddd</div>
 
<script>
    function get(){
         //document.getElementsByTagName('myBtn') 通过name属性的是获取
       var x=document.getElementsByClassName('myBtn');//返回一个对象集合，以数组形式放在一起
        alert(x[0].innerHTML);
         alert(x[1].innerHTML);
          alert(x[2].innerHTML);
           alert(x[3].innerHTML);
           
       
    }
   
</script>
</body>
</html>

5.通过this参数给函数传递受监控对象给函数。
 <!DOCTYPE html>
<html>
<head>
    <style>
 .myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
    </style>
</head>
<body>
 
<div class="myBtn" οnclick="get(this)" name="a">aaaaaaaaaa</div>
 <div class="myBtn" οnclick="get(this)" name="a">bbbbbbbbb</div>
 <div class="myBtn" οnclick="get(this)" name="a">cccccccc</div>
 <div class="myBtn" οnclick="get(this)" name="a">ddddddddddd</div>
 
<script>
    function get(s){
        alert(s.innerHTML);
         
           
       
    }
   
</script>
</body>
</html>


woniuguanjun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］
weixin_44892365的博客
11-01 1894
DOM［document操作html页面、document对象的属性、Element对象的属性和方法、元素的属性和方法、标签的属性、元素的样式、DOM中节点的操作、追加节点］
DOM获取页面的元素
qq_41985556的博客
05-28 277
通过DOM获取页面的元素的三种方式1. getElementById( )方法访问DOM元素  —》 id获取一个元素2. getElementsByName( )方法访问DOM元素—》 元素的name属性名获取(数组)3. getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)4. getElementsByClassName()方法访问DOM元素 –》类样...
dom获取body，html的方法
qq_28862951的博客
05-26 470
1获取body元素的方法 var bodyEle= document.body 2获取html的方法 var htmlEle=document.documentElement
JavaScript入门 DOM(上) document文档对象/获取标签元素的方法/操作内容/操作样式/操作属性/操作事件 day10
qq_63354840的博客
08-26 2486
document文档对象/获取标签元素的方法/操作内容/操作样式/操作属性/操作事件
【技术分享篇】从网卡到tcpip协议栈，再到应用程序丨tcp/ip网络编程丨网络api的实现原理丨sk_buff的作用
Linuxhus的博客
11-23 309
从网卡聊到tcp/ip协议栈，再到应用程序 1.posixtcp/ip网络编程 2.网络api的实现原理 3.sk_buff的作用 【技术分享篇】面试中从网卡 聊到tcpip协议栈，再到应用程序丨tcp/ip网络编程丨网络api的实现原理丨sk 更多Linux服务器开发高阶完整视频分享，点击链接即可观看：https://ke.qq.com/course/417774?flowToken=1013189 内容包括:C/C++，Linux，Nginx，ZeroMQ，MySQL，Red...
详解JavaScript操作HTML DOM的基本方式
10-23
HTML DOM，全称为“文档对象模型”，是一种W3C标准，它为HTML和XHTML文档提供了一个结构化的表示，并且允许使用JavaScript或其他脚本语言与HTML元素进行交互。 当一个网页加载时，浏览器会构建一个DOM树，将HTML...
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
总的来说，JavaScript的DOM对象为开发者提供了丰富的功能，使得能够动态地操控网页内容、跟踪用户行为、以及提供更加交互式的用户体验。理解和熟练运用这些对象是Web开发中不可或缺的技能。通过结合History、...
jquery对象和javascript对象即DOM对象相互转换
12-09
要将jQuery对象转换回DOM对象，有两种常见方式： - 使用索引访问：jQuery对象是一个数组-like结构，可以通过索引来获取对应的DOM元素，如`$v[0]`。 - 使用`.get()`方法：`$v.get(0)`也可以达到同样的效果，返回...
JavaScript实现获取dom中class的方法
12-09
总的来说，JavaScript获取DOM元素中class的方法主要分为以下步骤： 1. 检查DOM元素是否支持`getElementsByClassName`方法。 2. 如果支持，直接调用此方法获取元素集合。 3. 如果不支持，遍历元素的子节点，通过`...
获取DOM对象的五种方式
微风的博客
08-15 2627
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2289
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
获取DOM对象的方法
weixin_45766103的博客
11-26 596
1.通过id查找对象，返回一个对象 document.getElementById('id名') 2.通过标签名查找对象集合，即使返回0个或者1个，也是返回一个对象集合 document.getElementByTagName('标签名') 3.通过类名查找对象集合，即使返回0个或者1个，也是返回一个对象集合 document.getElementByClassName('类名') ...
【API】获取DOM对象
最新发布
weixin_51664510的博客
04-12 84
【API】获取DOM对象
HTML中获取对象的方法总结
Sux
04-23 6247
 如果不用类库(如jquery)来写，往往很多时候，都需要通过id或tag来获取html里的某一对象，然后对其进行操作。为了节省代码，把常用的获取对象的方法集成到函数里，每次直接通过传递参数来调用，可以是代码更简洁。下面总结了一下常用的获取对象的方法，供参考。function GetId(id){return document.getElementById(id)}  //通过ID获取对象func
HTML DOM文档对象查找元素的方法
我的博客
09-03 7250
一、HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 二、Document 对象 　　当浏览器载入 HTML 文档, 它就会成为 D...
html获取对象属性,html之DOM对象getAttribute()方法(节点属性值获取)功能简介说明
weixin_39775976的博客
06-04 1085
摘要:下文讲述DOM对象getAttribute()方法功能说明,如下所示:DOM getAttribute()方法功能说明DOM getAttribute()方法功能():获取指定Html元素节点的属性值DOM getAttribute()方法语法:element.getAttribute(attributename)—–参数说明—–element:待获取属性信息的节点元素 要获取属性对象节点...
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 4011
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
js获取html对象
东隅已逝，桑榆非晚。
10-10 2257
使用js获取html对象有三种方法: getElementById, getElementsByName和getElementsByTagName。 method args result getElementById id 单个html对象 getElementsByName name 一组html对象 getElementsByTagName tagNam
Dom获取元素对象的五种方法
如何快速Java入门
10-19 2552
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;文档对象模型&lt;/title&gt;     &lt;!--//通过dom获取元素对象的方法（五种）--&gt;&lt;/head&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值