- getAttribute()和setAttribute()方法是获取节点的属性,该方法不属于document对象。
- 若一个站点用到多个js文件,为了减少对站点的请求次数(提高性能),应该把这些.js文件合并到一个js文件中。
- 事件处理函数的工作机制:如给某个超链接添加一个onclick事件处理函数,当该事件发生时,相应的JS代码就会得到执行。并返回一个布尔值true或false,如果返回的是true,则这个链接被点击了,如果返回的是false,该链接未被点击。
如下面的代码:
//因为onclick事件处理函数触发的js代码返回值为false
//则该链接的默认行为没有被触发,具体行为是由showpic()函数决定
<a href="images/book.jpg" title="Coffee" onclick="showpic(this);return false;">Coffee</a>
- 看上面代码,会发现showpic()函数中传递了一个参数this,this表示当前点击的对象,表示”这个
<a>
元素节点”。 - 通过this关键词,我们可以返回当前超链接的href和title属性等。
- 一个HTML文档是一棵家谱树,一棵树是由无数节点组成的,节点类型有12种,最常用的有3种:元素节点、文本节点、属性节点。
node.nodeType
可以查看某个节点的类型。
4.childNodes属性可以用来获取任何一个元素的所有子元素。
此外还提供了firstChild和lastChild属性,方便查找。
//该方法返回一个对象数组,而body元素只有一个,所以是[0]下标
var body_element = document.getElementsByTagName('body')[0];
//返回body元素包含的所有子元素数量,结果会让你大吃一惊
alert(body_element.childNodes.length);
5.如果想改变一个文本节点的值,可以用node.nodeValue
<p id="description">这里是图片描述</p>
<script>
//获取description元素节点
var description = document.getElementById('description');
//返回null
//因为p元素是一个元素节点,没有nodeValue值
alert(description.nodeValue);
//首先获取p元素包含的子元素的文本节点
alert(description.childNodes[0].nodeValue);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<!-- 引入less文件 -->
<link rel="stylesheet/less" type="text/css" href="less/layout.less" />
<!-- 引入less.js编译文件 -->
<script src="js/less.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/book_img1.jpg" title="Fireworks" onclick="showpic(this);return false;">Fireworks</a>
</li>
<li>
<a href="images/book_img2.jpg" title="Coffee" onclick="showpic(this);return false;">Coffee</a>
</li>
<li>
<a href="images/book_img3.jpg" title="Rose" onclick="showpic(this);return false;">Rose</a>
</li>
<li>
<a href="images/book_img4.jpg" title="Sea" onclick="showpic(this);return false;">Sea</a>
</li>
</ul>
<img id="placeholder" src="images/book_img1.jpg" title="这里是悬浮的图片描述" />
<p id="description">这里是图片描述</p>
<!--引入js文件-->
<script src="js/showpic.js"></script>
</body>
</html>
//以下代码未layout.less样式文件
//在使用less时,请先去网页上搜索[less.js编译文件](http://lesscss.org/#download-options)
//背景、字体颜色样式、超链接样式
body {
margin: 1em 10%;
background-color: #ccc;
font-family: "Agency FB", "Arial Narrow";
color: #eeeeee;
font-size: 30px;
padding: 20px 0 30px 30px;
//超链接
a {
color: antiquewhite;
text-decoration: none;
}
a:active {
color: #bbbbbb;
}
a:visited {
color: antiquewhite;
}
//大标题
h1 {
font-size: 40px;
}
//列表样式
ul {
padding: 0;
width: 100%;
height: 50px;
li {
list-style: none;
float: left;
padding: 0 1em;
}
li:first-child {
padding: 0 0;
}
}
//图片框
img {
display: block;
width: 600px;
height:400px;
}
//图片描述
#description {
color: cornflowerblue;
font-size: 18px;
text-align: left;
}
}
//以下是showpic.js文件
function showpic(whichpic) {
//获取超链接的网址
var web_img = whichpic.getAttribute('href');
//替换img的图片地址为超链接网址
var show_img = document.getElementById('placeholder');
show_img.setAttribute('src', web_img);
//获取description元素节点
var description = document.getElementById('description');
//设置description元素节点内包含的文本节点为超链接的title
var text = whichpic.getAttribute('title');
description.childNodes[0].nodeValue = text;
}