知识点
- 获取节点
# 单个
gallery = document.getElementById('gallery');
# 数组
li_list = document.getElementsByTagname('li');
- 获取属性
<a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
# 获取
a_element = document.getElementsByTagName(a)[0];
a_href = a_element.getAttribute('href');
完整代码
html文档
imagegallery.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Image Gallery</title>
</head>
<link rel="stylesheet" type="text/css" href="static/css/layout.css" media="screen">
<body>
<h1>Snapshots</h1>
<!-- <a href="http://www.baidu.com" onclick="return false;">点击下</a> -->
<div>
<ul id="imagegallery">
<li>
<a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="static/images/coffee.jpg" title="A cup of black coffee">Coffee</a>
</li>
<li>
<a href="static/images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="static/images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
</div>
<script type="text/javascript" src="static/js/showPic.js"></script>
<!-- <script type="text/javascript" src="static/js/showPic_copy.js"></script> -->
<!-- <script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
}
</script> -->
</body>
</html>
css部分
layout.css
*{
margin:0;
padding:0;
}
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
/*如何让ul里面的li横向排列，并且居中呢？ul设置为text-align：center；li设置-display-inline即可*/
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
/*#imagegallery{
list-style: none;
}
#imagegallery li{
display: inline;
}
#imagegallery li a img{
border: 0;
}*/
js部分
showPic.js
function showPic(whichpic) {
if (!document.getElementById('placeholder')){
return true;
}
if (!document.getElementById('description')){
return false;
}
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
if (whichpic.getAttribute('title')){
var text = whichpic.getAttribute("title");
}
else{
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
// alert(description.firstChild.nodeValue);
description.firstChild.nodeValue = text;
// alert(description.firstChild.nodeValue);
}
return false;
}
function prepareGallery() {
if(!document.getElementById){
return false;
}
if(!document.getElementsByTagName){
return false;
}
if(!document.getElementById("imagegallery")){
return false;
}
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[i].onclick = function() {
return showPic(this);
// return showPic(this);
}
}
}
// <img id="placeholder" src="static/images/index.jpg" alt="my image gallery" />
// <p id="description"> choose a picture</p>
/*
1. 创建一个元素节点
document.creatElement(nodeName)
2. 元素节点插入到文档树中
parent.appendChild(nodeName)
3. 创建一个文本节点
document.createTextNode(text)
4. 文本节点插入到文档树中
parent = document.getElementById(parent)
parent.appendChild(nodeName)
5. 将一个元素节点插入到一已知节点前
parentElement = targetElement.parentNode
parentElement.insertBerfore(newElement, targetElement)
6. 目标元素节点的后一个元素节点
next_brother_node = target.nextSibling
*/
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode; // 获取targetElement的父元素节点 parent
if(parent.lastChild == targetElement){ // 判定 parent节点的最后一个节点是不是target节点
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement, targetElement.nextSibling); //
}
}
function preparePlaceholder() {
if(!document.createElement){
return false;
}
if(!document.createTextNode){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementsByTagName){
return false;
}
var placeholder = document.createElement('img'); // 创建了一个img元素节点
placeholder.setAttribute('id', 'placeholder');
placeholder.setAttribute('src', 'static/images/index.jpg');
placeholder.setAttribute('alt', 'my image gallery');
var description = document.createElement('p');
description.setAttribute('id', 'description');
var desctext = document.createTextNode('choose an image'); // 创建了一个文本节点
description.appendChild(desctext);
var gallery = document.getElementById('imagegallery');
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
/*
这里学习的是
1. 获取元素节点 element.childNodes # 这里就是elemennt所有的节点都获取到，不过这里获取到是一个数组
2. 掌握节点的类型
2.1 node.nodeType
nodeType=1 : 元素节点
nodeType=2 : 属性节点
nodeType=3 : 文本节点
2.2 node.nodeValue # 获取node节点的值
2.3 针对 element.childNodes获取到是一个数组，那么每次使用的使用都要使用索引来对每一个元素进行使用
element.childNodes[0] <=> element.firstChild
element.childNodes[length-1] <=> element.lastChild
********************************************
description = document.getElementById("description"); # 获取到一个元素节点
description.childNodes[0].nodeValue <=> description.firstChild.nodeValue = text; # 将description中的第一个节点属性值赋值为 text变量
********************************************
*/
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0]; // 获取body元素[0] 的所有节点
var gallery = document.getElementById("imagegallery");
alert(body_element.childNodes.length); // 获取节点的长度
// for (var i = 0; i < body_element.length; i++) {
// alert(i.nodeType)
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
// addLoadEvent(countBodyChildren);
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
// window.onload = countBodyChildren;
