关于document.getElementsByTagName的取值问题

此文转自:http://www.cnblogs.com/shoupifeng/archive/2009/11/13/1600906.html


这段时间,由于工作,所以要接触js,由于文件的命名出现了**-**.**中间出现了横杠,所以我就想用document.getElementsByTagName来取动态生成的<li>里面的value值了,但是奇怪的问题就出现了,调试只出现**,后面的-**.**这部分就取不到了(请看下面的小demo),我就奇怪了,后来在雷兔群问了一下,终于解决了

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div>
<ul id="loading">
<li value="21_1">21-113123123</li>
<li value="21_2">21-212312312321</li>
<li value="21_3">21-3</li>
<li value="21_4">21-4</li>
<li value="21_5">21-5</li>
<li value="21_6">21-6</li>
<li value="21_7">21-7</li>

</ul>
<input name="" type="button"  value="点击触发"onClick="onlon()">
</div>
<script type="text/javascript">
function onlon(){
var ta = document.getElementById("loading");
var t = ta.getElementsByTagName('li');
var len = t.length;
for(i=0; i < len; i++){
  alert(t[i].value);
 
  }
}
</script>
</body>
</html>

 

 

//

原因就在<li>里面的value的属性,因为浏览器会将value的值直接用parsetInt转一下的,所以搞的后面那部分就取不到了,只要改了后面的value的名字,再用getAttribute()输出就好了

所以该证以上错误,就有了下面的代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div>
<ul id="loading">
<li val="21_1">21-113123123</li>
<li val="21_2">21-212312312321</li>
<li val="21_3">21-3</li>
<li val="21_4">21-4</li>
<li val="21_5">21-5</li>
<li val="21_6">21-6</li>
<li val="21_7">21-7</li>

</ul>
<input name="" type="button"  value="点击触发"onClick="onlon()">
</div>
<script type="text/javascript">
function onlon(){
var ta = document.getElementById("loading");
var t = ta.getElementsByTagName('li');
var len = t.length;
for(i=0; i < len; i++){
  alert(t[i].getAttribute('val'));
 
  }
}
</script>
</body>
</html>

 

~~~~呵呵,不知道算不算问题的自我发现呢·~~
### 回答1: document.getElementsByTagName()是一种用于获取HTML页面中指定标签名称的方法。它返回一个由指定标签名称的元素组成的NodeList对象,可以通过JavaScript进一步处理这些元素。例如,可以使用该方法获取所有的段落元素并进行操作。 ### 回答2: document.getElementsByTagName()是一种用于从HTML文档中获取一组具有相同标签名的元素的方法。它的作用是根据指定的标签名,返回一个类数组对象,包含了所有匹配的元素。 这个方法的语法很简单,只需要在括号中传入要查找的标签名,如"div"或"p"等。它会在整个文档中搜索并返回所有匹配的元素,包括嵌套在其他元素中的元素。返回的结果是一个类数组对象,可以通过索引来访问每个匹配的元素。 使用document.getElementsByTagName()可以方便地对文档中的元素进行批量操作。例如,可以用它获取所有的图片元素,然后遍历这些元素,对它们进行处理,如修改属性、添加样式等。它也可以用于获取文档中特定标签名的元素数量,方便进行统计和判断。 需要注意的是,返回的结果是一个动态的集合,即使在调用该方法后文档中添加或移除了与搜索匹配的元素,集合也会自动更新,保持结果的实时性。 总的来说,document.getElementsByTagName()是一种快速定位和获取HTML文档中指定标签名的所有元素的方法,可以方便地对这些元素进行批量操作和统计。 ### 回答3: document.getElementsByTagName()是一个 JavaScript 方法,用于通过指定的标签名称获取文档中所有相应的元素。 它的作用是根据指定的标签名称,返回一个类似数组的 HTMLCollection 对象,其中包含文档中符合条件的所有元素。通过此方法可以方便地获取文档中特定标签的所有元素,以便进一步进行操作。 使用该方法时,我们需要传递一个参数,即需获取元素的标签名称。该参数可以是任意标签名称,例如:"div"、"p"、"h1"等。方法将返回所有与该标签名称匹配的元素,并将它们按照在文档中出现的顺序存储在 HTMLCollection 对象中。 我们可以通过遍历 HTMLCollection 对象的方式,逐个处理其中的元素。例如,我们可以修改元素的样式、修改元素的内容、绑定事件监听器等。 同时需要注意的是,HTMLCollection 对象是动态的,即如果文档中的元素发生改变(例如添加、删除元素),对应的 HTMLCollection 也会实时更新。 综上所述,document.getElementsByTagName()的作用是根据指定的标签名称,返回文档中所有符合条件的元素,并将它们存储在一个 HTMLCollection 对象中,方便我们进一步处理和操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值