您的位置：首页 > Web前端 > JavaScript

JavaScript 与html的元素产生关联

2016-06-25 11:11 465 查看

前情摘要

一个需求。

存在一个长宽为50像素的淡灰色div块，想让它在被点击后，文字变成“White”，背景颜色变成深沉的黑。如何使用JavaScript来实现呢？

效果

点击前

点击后

关键字

getElementById

通过id获取网页中的元素

getElementsByClassName

通过类名获取网页中的元素，会获得一个数组

getElementsByTagName

通过标签获取网页中的元素，会获得一个数组

Example

getElementById

首先，在html文件中准备一个div备用

<!--样式-->
#div_text {
width:50px;
height:50px;
background-color:#CCC;
}
<!--待会要用到的div-->
<div id="div_text" onclick="changeColorAndFont()">Black</div>

参考解释：

- 定义了一个id为“div_text”的div标签

- onclick="changeColorAndFont()"表示当这个div被单击时，执行changeColorAndFont()函数

接着，我们要写出changeColorAndFont这个函数，实现我们的需求，更换文字、文字的颜色和背景颜色

function changeColorAndFont() {
var divText = document.getElementById("div_text");
divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";
divText.firstChild.nodeValue = "White";
}

参考解释：

var divText = document.getElementById("div_text");

利用document.getElementById，参数是字符串，获取id为”div_text”的元素，并将该元素赋给divText。

divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";

通过.style获取该元素的CSS属性，其实看名字也可以看出来backgroundColor是背景颜色，color是字体颜色。

divText.firstChild.nodeValue = "White";

这里的firstChild可能一开始比较难理解

<body>
<h1></h1>
<div>Black</div>
</body>

在html中，有节点这么一个概念，比如上面的代码，划分一下，就是

body

h1

div

Black

像族谱一样，body的子节点(child)有两个，分别是h1和div。

然而值得注意的是，Black这个文本内容，也算是div的一个子节点(文本节点)。

所以divText.firstChild.value的意思就是其后代文本节点的值，如果在改变其的值之前使用

alert(divText.firstChild.value);

输出，那么将会输出”Black”。

divText.firstChild.nodeValue = "White";

而这句的意思就很清楚了，将其第一个后代的节点值改变为White。

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<style type="text/css">
#div_text {
width:50px;
height:50px;
background-color:#CCC;
}
</style>
<script type="text/javascript">
function changeColorAndFont() {
var divText = document.getElementById("div_text");//alert(divText.firstChild.nodeValue);
divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";divText.firstChild.nodeValue = "White";}
</script>
</head>
<body>
<div id="div_text" onclick="changeColorAndFont()">Black</div>
</body>
</html>

getElementsByTagName

用法和getElementById的很相似，不过其多出的字母s，道出了两个方法的差异。

假设html代码中存在2个div

<body>
<div id="div_text1"  onclick="changeColorAndFont()">Black</div>
<div id="div_text2"  onclick="changeColorAndFont()">White</div>
</body>

通过getElementsByTagName的获取

var divTexts = document.getElementsByTagName("div");

参考解释：

获取html中所有的div元素

那么divTexts将是一个数组，利用item是获取其子节点。

alert("第一个div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二个div是:" + divTexts.item(1).firstChild.nodeValue);

参考解释：

divTexts.item(0).firstChild.nodeValue表示第一个div的第一个子节点的文本值，即Black。

item(1)自然就是表示获取到第二个div标签了。

结果

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<script type="text/javascript">
function changeColorAndFont() {
var divTexts = document.getElementsByTagName("div");
alert("第一个div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二个div是:" + divTexts.item(1).firstChild.nodeValue);
}
</script>
</head>

<body>
<div onclick="changeColorAndFont()">Black</div>
<div onclick="changeColorAndFont()">White</div>
</body>
</html>

getElementsByClassName

通过class的值来获取元素，备用div

<div class="div_text" onclick="changeColorAndFont()">Black</div>
<div class="div_text" onclick="changeColorAndFont()">White</div>

获取元素

var divTexts = document.getElementsByClassName("div_text");

参考解释：

divTexts同样是一个数组，通过item访问元素

alert("第一个div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二个div是:" + divTexts.item(1).firstChild.nodeValue);

可以看到，甚至代码都不用换。

结果

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById</title>
<style type="text/css">
.div_text {
width:50px;
height:50px;
background-color:#CCC;
}
</style>
<script type="text/javascript">
function changeColorAndFont() {
var divTexts = document.getElementsByClassName("div_text");
alert("第一个div是:" + divTexts.item(0).firstChild.nodeValue + "\n第二个div是:" + divTexts.item(1).firstChild.nodeValue);
}
</script>
</head>

<body>
<div class="div_text" onclick="changeColorAndFont()">Black</div>
<div class="div_text" onclick="changeColorAndFont()">White</div>
</body>
</html>

再看一遍关键字有什么关系呢？

关键字

END

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航