javascript_DOM 编程艺术学习笔记(三)
一、幻灯片切换的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js example</title>
</head>
<body>
<ul>
<li><a href="images/1.jpg" οnclick="showPic(this);return false;">1</a></li>
<li><a href="images/2.jpg" οnclick="showPic(this);return false;">2</a></li>
<li><a href="images/3.jpg" οnclick="showPic(this);return false;">3</a></li>
<li><a href="images/4.jpg" οnclick="showPic(this);return false;">4</a></li>
</ul>
<img src="images/5.gif" alt="猥琐男" id="placeholder">
<script type="text/javascript">
function showPic (element) {
var picPath = element.getAttribute("href");
var imgElement = document.getElementById("placeholder");
imgElement.setAttribute("src",picPath);
}
</script>
</body>
</html>
onclick里面的return false;如果不设置,那么就会进行跳转。
二、DOM节点属性
1、childNodes 获取任何一个元素的子元素
var bodyElement = document.getElementsByTagName("body");
alert(bodyElement[0].childNodes.length);
2、nodeType 节点的类型,都是使用数字来表示
<p id="description" name="description">choose an image!</p>
var descriptionNode = document.getElementById("description");
常用的nodeType
1)元素节点的nodeType属性值是1
alert(description.nodeType);
2)属性节点的nodeType属性值是2
alert(description.getAttributeNode("name").nodeType);
3)文本节点的nodeType属性值是3
alert(description.firstChild.nodeType);
3、nodeValue设置文本值
document.getElementsByTagName("p").firstChild.nodeValue = "呵呵";
4、firstChild第一个子元素
firstChild = node.childNodes[0];
5、lastChild最后一个子元素
lastChild = node.childNodes[node.childNodes.length-1]