js从0开始 DOM文档编程思路3

最新推荐文章于 2024-10-30 18:24:25 发布

帅世界

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量116

点赞数

分类专栏： JavaScriptDOM编程艺术跟踪文章标签： javascript html

本文链接：https://blog.csdn.net/a12365445/article/details/118576965

版权

JavaScriptDOM编程艺术跟踪专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文通过案例展示了如何利用JavaScript实现动态图片库，包括利用DOM操作改变图片源、阻止默认链接行为、添加事件处理函数以在点击链接时显示图片，并在显示图片的同时更新相关描述文本。此外，还介绍了如何获取和修改节点属性，如childNodes、nodeType和nodeValue，以及如何扩展功能以显示图片的title属性作为文本描述。

摘要由CSDN通过智能技术生成

案例研究：JavaScript图片库

介绍新属性：

childNodes
nodeType
nodeValue
firstChild和lastChild

重点：

如何利用DOM提供的方法编写图片库脚本
利用事件处理函数把JavaScript代码与网页集成在一起

内容：

编写一个标记文件
编写一个JavaScript函数以显示用户要看的图片
由标记触发函数调用
扩展这个函数

把所有图片放到一个网页里很简单，但没有用户愿意花很长的时间去等一个网页的加载。因此用JavaScript来创建图片库是最佳的选择：把整个图片库的浏览链接集中安排在图片库的主页里，只在用户点击了这个主页的某个图片链接时才把相应的图片传送给他。

标记：

1、首先为图片创建一个链接清单。使用无序<ul>和有序<ol>都可以。

调试得到 html的显示效果，点击链接可以显示图片

然后进行改进：点击链接时，能留在这个网页而不是转到另一个窗口；能同时看到图片和原来的图片清单。

因此

1增加一个占位图片在主页上留下图片预览区域

2点击链接时，拦截网页的默认行为

3把占位图片换成与之对应的图片

插入代码：< img id="placeholder" src=" E:/image/1.jpg" alt=" my image gallery"/>

标记做好了，可以开始编写JavaScript代码

JavaScript：

把占位图片替换为想要查看的图片，就要改变的它src属性，使用setAttribute能够做到。

首先定义函数名为showPic和参数名whichpic：function showPic（whichpic）

whichpic指向<a>元素，调用getAttribute得到 “href”的参数：whichpic.getAttribute("href")

var source=whichpic.getAttribute("href");

var placeholder=document.getElementById("placeholder")获取占位图片

最后为 placeholder.setAttribute("src",source); 就是将获得的href替换掉src，写入js文件中。

在html 的</body>标签前加入<script type="text/javascript" src=“showpic.js"></script>

为了调用showpic函数，需要给图片列表的链接添加行为

事件处理函数能够达到目标，指在特定事件发生时调用特定的js代码。例如：

onmouseover函数鼠标悬停在某个元素上触发的动作

onmouseout函数鼠标离开某个元素上触发的动作

那么在图片库链接上点击触发的动作需要用到onclick事件处理函数

使用 this 关键字代表“这个对象，showPic（this）表示对着个<a>元素使用函数

添加事件处理函数的语法为：event=“JavaScript statement（s）”

调用onclick就为 οnclick=“showPic(this);”

注意引用了事件处理函数到链接后，会遇到这么个情况：点击了链接，不仅showPic函数被调用,同时默认的弹窗图片行为也会出现。因此需要阻止默认行为。

点击这个链接会触发两种情况，因此我们需要点击出现showPic函数同时让链接认为它没有被点击到。给onclick应用返回布尔值true跟false。

return true是 onclick认为这个链接被点击到

return false是onclick认为这个链接没有被点击到

οnclick= “showPic（this）；return false；”

代码为：

显示为：

对函数进行扩展：

在同一网页上切换显示不同的文本。

图片库文档里的每个图片链接都有一个title属性，可以把这个属性取出来和相应的图片一同显示在网页上。

var text =whichpic.getAttribute("title");

childNodes属性在一颗节点树上，可以用来获取任何一个元素的所有子元素，包含这个元素的所有数组：element.childNodes

得到body元素：var body_element=document.getElementsByTagName("body")[0];

获得body所有子元素：body_element.childNodes

可以查出有多少子元素 body_element childNodes.length;

onload 函数在页面加载中进行执行函数，把这句代码放在js代码的末尾

window.οnlοad=countBodyChildren;

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

就能得到元素子元素的总个数。

nodeType属性可以让我们知道自己正在与哪一种节点打交道。

语法：node.nodeType

就能知道body_element元素的属性alert(body_element.nodeType);

显示的会是1。

nodeType属性有12种可取值，有3种具有实用价值

元素节点的nodeType的属性值是1

属性节点的nodeType的属性值是2

文本节点的nodeType的属性值是3

我们可以让函数对特定类型的节点进行处理。

实现在显示图片时把文本节点的值替换为目标图片title的值

在showpic函数添加三句代码

function showPic(whichpic){
  var source=whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text=whichpic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;

}

node.nodeValue 用来改变文本节点的值，但要注意我们找到不是p元素本身，p元素本身的一个属性是null值，我们要找的是p元素包含的文本的值，即p元素第一个子节点的值。

alert（description.childNodes[0].nodeValue）;

于此有简单的表示firstChild 和lastChild属性

firstChild为第一个子元素 node.firstChild 等价于 node.childNodes[0]

lastChild为最后一个子元素 node.lastChild 等价于 node.childNodes[ node.childNodes.length-1]

最后description.firstChild.nodeValue=text;意思就是将description对象的第一个子节点的nodeValue的属性值变换为text的值。

演示文本会得到替换

加点css最终html代码为

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Image Gallery</title>
    <link rel="stylesheet" href="layout.css" media="screen"/>
    </head>
    <body>
        <h1>Snapshot</h1>
        <a href="http://www.baidu.com" onclick="return true;">click </a>
        <ul>
            <li>
                <a href="E:/杂文件/1.jpg" onclick="showPic(this);return false;" title="A form">formds</a>
            </li>
            <li>
                <a href="E:/杂文件/4.jpg" onclick="showPic(this); return false;" title="a color">a colord</a>
            </li>
            <li>
                <a href="E:/杂文件/5.jpg" onclick="showPic(this); return false;" title="a smile dog">a smile dog</a>
            </li>
            <li>
                <a href="E:/杂文件/7.jpg" onclick="showPic(this); return false;" title="a people">a people</a>
            </li>
        </ul>

        <img id="placeholder" src="E:/杂文件/11.jpg" alt="My Image Gallery"/>

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

        <script type="text/javascript" src="showPic.js"></script>
    
    </body>
    </html>

css：

body{
font-family: "Helvetca","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}

h1{
color: #333;
background-color: transparent;

}
a{
color:#060;
background-color: transparent;
font-weight: bold;
text-decoration: none;

}
ul{
padding: 0;
}
li{
    float: left;
    padding: 1em;
    list-style: none;
}
img{
display: block;
clear: both;

}

js：

function showPic(whichpic){
  var source=whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text=whichpic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;

}

function countBodyChildren(){
 var body_element=document.getElementsByTagName("body")[0];
 alert(body_element.nodeType);
}
window.onload=countBodyChildren;

最终显示为