《JavaScript DOM 编程艺术》第4章笔记

最新推荐文章于 2024-09-26 17:08:53 发布

假面骑士嘉豪

最新推荐文章于 2024-09-26 17:08:53 发布

阅读量583

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/u014779951/article/details/24271719

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第4章案例研究：JavaScript图片库

*************************************************************************************************************************

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>

<link type="text/css" rel="stylesheet" href="chapter4.css" media="screen" />

</head>

<body>

<h1>Snapshots</h1>
<ul>
<li>
<a href="color/red.jpg" title="red" onClick="showPic(this);return false;" >red</a>
</li>
<li>
<a href="color/blue.jpg" title="blue" onClick="showPic(this);return false;" >blue</a>
</li>
<li>
<a href="color/yellow.jpg" title="yellow" onClick="showPic(this);return false;" >yellow</a>
</li>
<li>
<a href="color/green.jpg" title="green" onClick="showPic(this);return false;" >green</a>
</li>
</ul>

<img id="placeholder" src="color/indigo.jpg" alt="my image gallery" />

<p id="description">Choose an image.</p>

<script src="chapter4.js"></script>

</body>

</html>

*************************************************************************************************************************

关键知识：

（1）想在用户点击某个链接时触发一个动作，需要使用onClick事件处理函数。

（2）this关键字的含义是“这个对象”。

（3）点击链接时，我们希望触发事件发生在当前网页内，但链接被点击的默认行为也会被调用。这意味着用户会被带到新的窗口，而这不是我们想要的。我需要阻止这个默认行为被调用。方法是在onClick事件处理函数中让这个处理函数所触发的JavaScript代码返回布尔值false，这会让onClick事件处理函数认为“这个链接没有被点击”。

（4）

*************************************************************************************************************************

1.childNodes属性

可以用来获取任何一个元素的所有子元素。

返回一个数组。

function countBodyChildren()
{
var body_element=document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}

让这个函数在页面加载时执行，而这需要使用onload事件处理函数

window.οnlοad=countBodyChildren;//加在js文件里

2.替换图片

}

3.nodeValue属性

如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值。

在用nodeValue属性获取对象的值时，得到的并不是包含在这个段落里的文本。//这里我不懂

例：<p id="description">Choose an image.</p>

在这里，<p>元素本身的nodeValue属性是一个空值，而你真正需要的是<p>元素所包含的文本的值。

包含在<p>元素里的文本是另一种节点，它是<p>元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点的nodeValue属性值。

function showPic(whichpic)
{
//替换图片
var source=whichpic.getAttribute("href");//得到该图片的url
var placeholder=document.getElementById("placeholder");//得到被替换图片的元素对象
placeholder.setAttribute("src",source);//进行替换
//替换文本
var text=whichpic.getAttribute("title");//得到该图片的title信息
var description=document.getElementById("description");//得到被替换文本的元素对象
description.firstChild.nodeValue=text;//进行替换

}

4.疑问

在第3点中，“在用nodeValue属性获取对象的值时，得到的并不是包含在这个段落里的文本。”

var description=document.getElementById("description");在这里，用id名得到一个对象description，而不是对象数组，那为什么description.firstChild.nodeValue中有firstChild呢？望懂得这个问题的人帮忙解答。