javascript 美术馆

最新推荐文章于 2018-11-22 08:48:00 发布

刘小妞

最新推荐文章于 2018-11-22 08:48:00 发布

阅读量531

点赞数

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

本文链接：https://blog.csdn.net/liuwengai/article/details/50792213

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

childNodes属性从给定的节点树把任何一个元素的所有子元素检索出来，返回一个数组

function countBodyChildren(){
var body_element=document.getElementsByTagName("body")[0];//检索到body
alert(body_element.childNodes);//检索到body的所有子元素
alert(body_element.childNodes.length);//查看包含的元素的个数
}

在页面加载时执行函数 window.οnlοad=countBodyChildren;
2. nodeType 调用语法 node.nodeType
alert(body_element.nodeType);//输出每个节点的属性
元素节点的属性值是1；属性节点的属性值为2；文本节点的属性值为3.
3. nodeValue 可以用来改变某个文本节点的值

Choose an image.

alert(description.childNode[0].nodeValue);
4. firstChild 和lastChild
firstChild与childNodes[0]完全等价

//点击图片时，在指定位置显示图片后，在描述区显示图片的标题
<p id=”description”>Choose an image.</p>

function showtitle(whichpic)
{
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
    }

5.整个小页面的源码
pic.html

<html>
<head>
<title>Image Gallery</title>
<script type="text/javascript" src="showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul>
    <li><a href="image/1.jpg" onClick="showPic(this); return false;" title="a fireworks display">fireworks     </a>//鼠标点击时，不在另一个页面显示，而是在显示区域显示。点击返回false，则不会跳转
    </li>
    <li><a href="image/2.png" onClick="showPic(this); return false;" title="a cup of black coffee">coffee</a>
    </li>
    <li><a href="image/3.png" onClick="showPic(this); return false;" title="a red rose">rose</a>
    </li>
    <li><a href="image/4.png" onClick="showPic(this); return false;" title="the famous clock">bigben</a>
    </li>

</ul>
<img id="placeholder" src="image/4.png" alt="my image gallery" />
//点击图片时，在指定位置显示图片后，在描述区显示图片的标题
<p id=”description”>Choose an image.</p>
</body>
</html>

layout.css

/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
color:#00CCCC;
background-color:#CC3300;
margin:1em 10%;
}
h1{
color:#CC3366;
background-color:#CCCC99;
}
a{
color:#CCCC99;
background-color:#3366FF;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}

showPic.js

function showPic(whichpic)
{  var source=whichpic.getAttribute("href");//首先检索到图片的地址
    var placeholder=document.getElementById("placeholder");//找到被替换图片的位置
    placeholder.setAttribute("src",source);//替换  另一种方法 placeholder.src=source;
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}// JavaScript Document

刘小妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 美术馆

childNodes属性从给定的节点树把任何一个元素的所有子元素检索出来，返回一个数组function countBodyChildren(){var body_element=document.getElementsByTagName("body")[0];//检索到bodyalert(body_element.childNodes);//检索到body的所有子元素alert(body_
复制链接

扫一扫

专栏目录