Document对象的使用：getElementById()和getElementsByTagName()方法的使用练习

最新推荐文章于 2022-12-28 10:53:25 发布
最新推荐文章于 2022-12-28 10:53:25 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 自己看 文章标签： xml

Document对象的使用：getElementById()和getElementsByTagName()方法的使用练习

1、  查找并访问节点

你可以通过若干方法来查找您希望操作的元素：

（1）       通过使用getElementById()和getElementsByTagName()方法

（2）       通过使用一个元素节点的parentNode、firstChild以及lastChild属性

一、getElementsByName()

说明：

（1）       查找给定name属性的所有元素，这个方法将返回一个节点集合，不再是一个具体的节点对象，也可以成为对象集合。

（2）       这个集合可以作为数组来对待，length属性的值表示集合的个数。

（3）       因为在html页面中，name不能唯一确定一个元素，所以这个方法的名称为getElementsByName而不是getElementByName。因为name属性名可以有多个。

案例：

[html]  view plain  copy
 print ?
  1. example01.html  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4.   
  5. <html>  
  6.   
  7.   <head>  
  8.   
  9.     <title>example01.html</title>  
  10.   
  11.   </head>   
  12.   
  13.   <body>  
  14.   
  15.         <div align="center">  
  16.   
  17.            <div id="head">  
  18.   
  19.                用户名：  
  20.   
  21.                <input type="text" name="uname" id="uname" value="pangli"/>  
  22.   
  23.            </div>  
  24.   
  25.            <div id="spr">  
  26.   
  27.                你喜欢的2012年春节联欢晚会的节目有哪些？<br/>  
  28.   
  29.                <hr color="red"/>  
  30.   
  31.                <input type="checkbox" name="fav" value="荆柯刺秦"/>荆柯刺秦  
  32.   
  33.                <input type="checkbox" name="fav" value="面试"/>面试  
  34.   
  35.                <input type="checkbox" name="fav" value="因为爱情"/>因为爱情  
  36.   
  37.                <input type="checkbox" name="fav" value="穿越"/>穿越  
  38.   
  39.              
  40.   
  41.            </div>  
  42.   
  43.         </div>  
  44.   
  45.   </body>  
  46.   
  47. </html>  
  48.   
  49. <script type="text/javascript">  
  50.   
  51. <!--  
  52.   
  53.     //当窗体加载完毕后触发匿名函数  
  54.   
  55.     window.onload = function(){  
  56.   
  57.     //获取的是name="fav"的所有节点对象  
  58.   
  59.     var favs = document.getElementsByName("fav");  
  60.   
  61.     //遍历出节点的value值  
  62.   
  63.     for(var i=0;i<favs.length;i++){  
  64.   
  65.        //得到一个具体的节点  
  66.   
  67.        var fav = favs[i];  
  68.   
  69.        //注册事件  
  70.   
  71.        fav.onclick = function(){  
  72.   
  73.            //思考：弹出所有的你选择中的节目  
  74.   
  75.            alert("你难道真的喜欢这个节目:"+this.value);  
  76.   
  77.        }  
  78.   
  79.     }  
  80.   
  81. }  
  82.   
  83. //-->  
  84.   
  85. </script>  


 

二、 getElementsByTagName()

说明：

（1）   查询给定标签名的所有元素

（2）   因为在html页面中，标签名不是唯一的，所以返回值为节点的集合

（3）   这个集合可以当做数组来处理，length属性为集合里所有元素的个数

（4）   可以有两种形式来执行这个方法：

a)   var elements = document.getElementsByTagName(tagName);

b)   var elements = element.getElementsByTagName(tagName);

（5）   从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document)，也可以是某一个元素节点。

案例：

[html]  view plain  copy
 print ?
  1. example02.html  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4.   
  5. <html>  
  6.   
  7.   <head>  
  8.   
  9.     <title>example01.html</title>  
  10.   
  11.   </head>  
  12.   
  13.   <body>  
  14.   
  15.         <div align="center">  
  16.   
  17.            <div id="head">  
  18.   
  19.                用户名：  
  20.   
  21.                <input type="text" name="uname" id="uname" value="pangli"/>  
  22.   
  23.            </div>              
  24.   
  25.            <div id="spr">  
  26.   
  27.                你喜欢的2012年春节联欢晚会的节目有哪些？<br/>  
  28.   
  29.                <hr color="red"/>  
  30.   
  31.                <input type="checkbox" name="fav" value="荆柯刺秦"/>荆柯刺秦  
  32.   
  33.                <input type="checkbox" name="fav" value="面试"/>面试  
  34.   
  35.                <input type="checkbox" name="fav" value="因为爱情"/>因为爱情  
  36.   
  37.                <input type="checkbox" name="fav" value="穿越"/>穿越  
  38.   
  39.            </div>  
  40.   
  41.         </div>  
  42.   
  43.   </body>  
  44.   
  45. </html>  
  46.   
  47.    
  48.   
  49. <script type="text/javascript">  
  50.   
  51. <!--  
  52.   
  53.     //当窗体加载完毕后触发匿名函数  
  54.   
  55.     window.onload = function(){  
  56.   
  57.       
  58.   
  59.     //获取的是name="fav"的所有节点对象  
  60.   
  61.     var favs = document.getElementsByName("fav");  
  62.   
  63.       
  64.   
  65.     //遍历出节点的value值  
  66.   
  67.     for(var i=0;i<favs.length;i++){  
  68.   
  69.        //得到一个具体的节点  
  70.   
  71.        var fav = favs[i];  
  72.   
  73.        //注册事件  
  74.   
  75.        fav.onclick = function(){  
  76.   
  77.            //作业：弹出所有的你选择中的节目  
  78.   
  79.            alert("你难道真的喜欢这个节目:"+this.value);  
  80.   
  81.              
  82.   
  83.        }  
  84.   
  85.     }  
  86.   
  87.     }  
  88.   
  89. //-->  
  90.   
  91. </script>  


 

Big_Bi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM
dhmnhs0676的博客
08-25 136
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById ...
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
weixin_46065214的博客
08-17 1万+
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
获取HTML元素3个方法：document.getElementsByName()、document.getElementById()、document.getElementsByTagName()
SunMoonJP的博客
03-06 808
获取HTML元素3个方法比较：document.getElementsByName()、document.getElementById()、document.getElementsByTagName()document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById()
Document 对象常用方法(getElementById、getElementsByName、getElementsByTagName....)
heitu_的博客
12-28 1万+
document对象常用的六种方法用法及注意点
document对象获取HTML元素的三种常见方法
weixin_45936680的博客
05-06 3829
document常用获取HTML元素对象的常见方法有 1.根据元素的ID获取 document.getElementById(‘元素的ID’) 2.根据元素的类名获取 document.getElementsByClassName() 3.根据元素的标签名获取 document.getElementsByTagName(‘元素的标签名’) ...
JavaScript 第三章 DOM编程基础 使用document对象
03-24
以下是一些常见的`document`对象方法和属性： 1. `document.getElementById(id)`: 通过元素的ID查找并返回该元素。ID在文档中必须是唯一的，所以此方法通常返回一个元素。 2. `document.getElementsByTagName(name...
JS选取DOM元素的简单方法
11-23
此方法只选取调用元素的后代，且在IE8及以下版本中不被支持，需要使用其他方法（如jQuery）替代。 5. 通过CSS选择器选取元素（querySelectorAll） `document.querySelectorAll` 是最灵活的方法，支持完整的CSS选择...
js0114:js练习demo
04-18
例如，使用`document.getElementById`、`querySelector`、`getElementsByTagName`等方法来选取元素，再通过`.innerHTML`、`.style`等属性改变元素的属性和样式。 事件监听和处理是JavaScript与用户交互的关键。`...
rateMyArticle:DOM练习
03-16
1. **元素选取**：使用`getElementById`、`getElementsByTagname`、`getElementsByClassName`等方法可以方便地获取文档中的特定元素。 2. **元素操作**：可以创建新元素、删除元素或替换现有元素。例如，`...
JavascriptDOM-:源码练习
05-07
3. **查找元素**: `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`以及`querySelector()`和`querySelectorAll()`等函数用于根据ID、类名、标签名或者CSS选择器查找元素。 4. **修改元素*...
HTMLCollection ,document.getElementById , document.getElementsByTagName
weixin_43519109的博客
10-17 325
*document.getElementById返回的是id名率先符合的第一个HTML元素的引用 ； *document.getElementsByTagName('tag_name')返回的是符合 tagname的一组有序对象的集合 （即HTMLCollection）。其类似于数组，可以通过 [index] 的形式来访问集合中的任意一个对象 ，用 [index]的形式来访问对象，返回的是HTML元素（从属性中读取）； *HTMLCollection是动态的，对象集合中的每一个对象 都映...
getElementsByTagName的详解
热门推荐
木雷双雄7
06-30 2万+
今天在看《JavaScript权威指南第六版》根据元素标签获取元素时，有讲到getElementsByTagName返回对象为NodeList，经过测试多个浏览器的运行结果都是HTML集合HTMLCollection。 getElementsByTagName var tagDiv = document.getElementsByTagName("div"); console
firstChild,lastChild 获取第一个/最后一个元素节点
林飞的梦呓
12-10 5568
firstChild,lastChild<ul><li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul><script> var ul = document.getElementsByTagName('ul')[0]; ul.firstChild.style.background = '#ff0000';
document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()
快乐de馒头
03-24 3275
window.onload=function(){ //找到指定id属性值得对象 返回找到的一个对象 var id=document.getElementById("uid"); //找到指定name属性的对象，返回数组 var arr=document.getElementsByName("user"); //找到指定标签对象 ,返回数组 var
getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别
苦艾文艺
05-28 6206
在《Javascript DOM 编程艺术》与 W3school 中是这样定义的： getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。 下面这个案例我是想通过触发test()函数后，给一个id为“div1”的div层添加背景色为黄颜色。<!DOCTYPE html> <html> <head> <title>shopping list</t
document.getElementById().getElementsByTagName("td")的使用
qq_39822451的博客
03-23 2433
//获取指定id行中的某个td var removeXXX = document.getElementById("idForEdit").getElementsByTagName("td")[x+5]; //通过下标移除此td中的某个标签，这个标签可以是span if(removeXXX.contains(removeXXX.childNodes[1]))...
document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么...
03-31 430
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form&g...
document.getElementsByName() 、document.getElementById() 、document.getElementsByTagName() 区别
Hurricane_m的博客
05-16 1573
document.getElementsByName() 是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById() 是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。 document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。...
document.getElementById()方法使用在教材哪个部分
最新发布
03-23
document.getElementById()方法是JavaScript中常用的方法之一，用于通过元素的id属性获取对应的DOM元素。该方法可以在JavaScript教材的DOM操作部分找到。 在教材中，document.getElementById()方法通常会在介绍DOM操作的章节中进行详细讲解。它是一种基本的DOM操作方法，用于通过元素的id属性获取对应的DOM元素，并返回一个表示该元素的对象。 使用document.getElementById()方法的语法如下： ``` var element = document.getElementById(id); ``` 其中，id是要获取的元素的id属性值，element是获取到的DOM元素对象。 该方法常用于通过JavaScript动态修改网页内容、样式或绑定事件等操作。通过获取到的DOM元素对象，可以进一步操作该元素的属性、样式、内容等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值