JavaScript 与html的元素产生关联

来源：互联网发布：js透明度渐变编辑：程序博客网时间：2024/06/05 21:51

前情摘要

一个需求。
存在一个长宽为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>

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

关键字

getElementById
- 通过id获取网页中的元素
getElementsByClassName
- 通过类名获取网页中的元素，会获得一个数组
getElementsByTagName
- 通过标签获取网页中的元素，会获得一个数组

END

0 0