为什么学习
业务中或者练习中你会遇到以下问题:
制作效果,第一步应该写什么页面效果没有正常显示,问题出在哪里
解决以上问题的第一步就是选择正确的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>
<style type="text/css">
body { font-size: 20px;margin: 100px 0 0 100px !important; }
body div { display: inline-block; width: 100px; height: 100px; vertical-align: top; border: 2px solid #000; text-align: center; line-height: 100px; cursor: pointer;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
</style>
<h2>点击出现/消失实例(F12查看代码)
</h2>
<div id="btn">点我
</div>
<div id="test">我是个div
</div>
<script type="text/javascript">
var ctrl = document.getElementById('btn'),
box = document.getElementById('test'),
on = true;
ctrl.onclick = function (){
if (on) {
box.style.display = 'none';
on = false;
} else {
box.style.display = 'inline-block';
on = true;
}
}
</script>
<h2>调试实例
</h2>
<div id="btn2">点我
</div>
<div id="test2">我是个div
</div>
<script type="text/javascript">
var ctrl2 = document.getElementById('btn2'),
box2 = document.getElementById('test3'),
on2 = true;
ctrl2.onclick = function (){
if (on2) {
box2.style.display = 'none';
on2 = false;
} else {
box2.style.display = 'inline-block';
on2 = true;
}
}
</script>
</body>
</html>
简单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
</head>
<body>
<h1>hello world!
</h1>
<div class="test1">北冥有鱼，其名为鲲
</div>
<p id="test2">鲲之大，不知其几千里也
</p>
<p><span id="test3">不知其几千里也；化而为鸟，其名为鹏。
</span></p>
<h3 class="test4">鹏之背，不知其几千里也；
</h3>
<p name="test5">怒而飞，其翼若垂天之云
</p>
<script>
document.getElementsByTagName('h3')[0].style.color = '#ff0000';
</script>
</body>
</html>
