为什么学习
业务中或者练习中你会遇到以下问题:
- 制作效果,第一步应该写什么
- 页面效果没有正常显示,问题出在哪里
解决以上问题的第一步就是选择正确的html元素.
只有选对了元素,才能进行接下来的效果制作或代码调试.
怎么选取元素
JavaScript
通过Document对象方法来引用对象或者对象集合(Document对象:每个载入浏览器的html文档都会成为Document对象.我们可以从中对html页面的所有元素进行访问)
详细说明
方法名 | 返回值 | 说明 | 代码 | 例图 |
---|---|---|---|---|
getElementById() | 元素 | 返回对拥有指定 ID 的第一个对象的引用 | document.getElementById(id) |
|
getElementsByClassName() | 数组 | 返回文档中所有指定类名的元素集合.使用索引值来获取节点 | document.getElementsByClassName(class); |
|
getElementsByName() | 数组 | 返回带有指定名称的对象的集合 | document.getElementsByName(name) |
|
getElementsByTagName() | 数组 | 返回带有指定标签名的对象的集合(如果传入’*’,返回所有元素列表) | document.getElementsByTagName(tagname) |
|
querySelector() | 元素 | 返回文档中匹配指定 CSS 选择器的一个元素(只返回匹配的第一个元素) | document.querySelector(CSS selectors) |
|
querySelectorAll() | 数组 | 返回文档中匹配指定 CSS 选择器的所有元素集合(可以使用索引值访问) | document.querySelectorAll(selectors) |
|
简单实例
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>