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

通过标签名称来获取元素

# 通过标签名选取元素

## 1. 文档方法

* `document.getElementsByTagName('tagName')`
* 可以获取 `HTML` 和 `XML` 元素
* 与`name`获取元素类似,返回 `NodeList`对象
* `NodeList`中的元素按它在`HTML`文档中的顺序排列,用索引访问
* `HTML`标签名称不区分大小写, `*`可以选择全部元素
* 该方法在`Element`元素级别也有定义,即可以元素对象上调用该方法

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

## 2. 文档快捷属性

* `HTMLDocuement`定义一些快捷属性可访问某些特定节点:

* 以下属性返回的是 "HTML集合"`HTMLCollection`
* `document.forms`: 所有的表单元素`<form>`
* `document.images`: 所有图片元素`<img>`
* `document.links`: 所有具有`href`属性的`<a>`标签

* 以下属性返回的是 "单个HTML元素"
* `document.head`: 返回文档头部`<head>`
* `document.body`: 返回文档主体`<body>`
* `document.title`: 返回文档标题`<title>`
* `document.documentElement`: 返回根元素`<html>`
* `document.docType`: 返回文档类型`<!DOCTYPE html>`

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

## 3. 示例源码

> code/demo03.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getElementsByTagName()</title>
</head>
<body>
<form action="" name="login">
<input type="text">
</form>
<img src="" alt="img1" name="dog">
<img src="" alt="img2">
<img src="" alt="img3">

<a href="">link1</a>
<a href="">link2</a>
<a>link3</a>

<script>
// 获取文档中所有表单元素,返回元素集合
console.log(document.forms);
// 可用name属性值获取这个表单元素
console.log(document.forms.login);
// 获取文档中所有图片
console.log(document.images);
// 获取文档中的图片数量
console.log(document.images.length);
// 可根据name属性获取元素集合中的其中一个
console.log(document.images.dog);

// 获取文档中所有链接元素<a>
console.log(document.links);
// 链接数量为2,因为只获取有href属性的链接(有意义的链接) 
console.log(document.links.length);
// 对于html元素集合,也可以使用索引访问
console.log(document.links[1].innerHTML);

// 文档头部<head>
console.log(document.head);
// 文档主体<body>
console.log(document.body);
// 文档根元素<html>
console.log(document.documentElement);
// 文档标题
console.log(document.title);

</script>
</body>
</html>
```


任务

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