# html-collection
用于向文章中添加或修改内容,使用document.getElements
ByTagName("标签名称")得到的返回值为Collection对象,
Collection对象类似于数组,可以通过下标的方式来对可操
做的目标进行修改或添加。
例:
有如下html代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>第一天</p>
<p>第二天</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML="第二个段落通过Collection对象访问结果为:<span style='color:red;'>"+x[1].innerHTML + '</span>';
</script>
</body>
</html>
Collection对象虽然比较像数组,但其和数组有很多的不同,例如:
valueof().pop().push()/joim()等方法。
#NodeList
在老版的浏览器中,使用getElementByClassName得到的返回值是NodeList
类型,而不是Collection对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
通过document.querySelectorAll("标签名")得到的返回值为NodeList对象
NodeList也可以像数组一样,利用下标的方式来对节点进行访问。
NodeList利用循环方式来访问:
var y = document.querySeletorAll("p");
var x;
for(x = 0;x < y.length;x++)
{
y[i].backgroundColor="red";
}
还有其他的遍历方式,类似于java中的增强for循环。
Collection和NodeList有所相同也有所不用,
Collection和NodeList都可使用下标的方式来进行访问。
但Collection会随着html页面的更新进行变化
NodeList不会进行变化,会得到固定值。
加油加油!!!
HTML-Collection/NodeList
最新推荐文章于 2023-08-31 14:17:39 发布