点击切换帐号登陆
帐号密码登陆

节点列表与元素集合的区别与联系

# 节点列表与HTML集合

## 1. 简介

* `NodeList`: 节点列表
* `HTMLColleciton`: HTML集合

-----------------------------------------------

## 2. 返回类型

* `getElementsByName()`: 返回 `NodeList`
* `getElementsByTagName()`: 返回 `HTMLCollection`
* 共同特征: 类数组对象

-----------------------------------------------

## 3. 类数组对象

* 具有连续正整数索引(0开始)
* 具有动态的`leng`属性

-----------------------------------------------

## 4. 遍历类数组对象

* 因为该对象上有`length`属性

```javascript
// 隐藏页面中所有图片
for (var i = 0; i < document.images.length; i++) {
document.images[i].style.display = 'none';
}
```

* 尽管像,但类数组并不对数组,不能直接调用`Array`的方法
* 但可以间接调用

```javascript
// 返回每个<a>标签内的内容(数组)
var txt = document.getElementsByTagName('a');
var content = Array.prototype.map.call(txt,function (ele){
return ele.innerHTML;
});
console.log(content);
```

-----------------------------------------------

## 5. 动态性

* 类数组对象能实时反映DOM中的元素变化,并非静态快照
* 用户对节点列表或HTML集合的更新总能立即体现出来

-----------------------------------------------

## 6. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NodeList和HTMLCollection</title>
</head>
<body>
<input type="text" name="username">
<div>div1</div>
<a href="">link1</a>
<a href="">link2</a>
<a href="">link3</a>

<img src="" alt="dog">
<img src="" alt="cat">
<img src="" alt="pig">


<script>
console.log(document.getElementsByName('username'));
console.log(document.getElementsByTagName('div'));
console.log(document.getElementsByTagName('a'));
console.log(document.links);

// 隐藏页面中所有图片
for (var i = 0; i < document.images.length; i++) {
document.images[i].style.display = 'none';
}

// 返回每个<a>标签内的内容(数组)
var txt = document.getElementsByTagName('a');
var content = Array.prototype.map.call(txt,function (ele){
return ele.innerHTML;
});
console.log(content);

//NodeList和HTMLCollection都定义了item()
console.log(document.getElementsByName('username').item(0));
console.log(document.getElementsByTagName('div').item(0));

//HTMLColletion 定义了namedItem(),该方法以name属性的值为参数选择元素
console.log(document.getElementsByTagName('input').namedItem('username'));
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号