The foregoing describes:
. 1 the DOM four common method
2 using the method of complete DOM core filling properties
This part describes in several places in the JS Note , additionally written in order to reduce the coupling html javascript onclick method for using java .
In fact, javascript is not a simple language, but because of a simple entry, when a lot of people use, are direct copy and paste, leading to a Web page filled with a lot of redundant code.
But in the preparation of qualified javascript code, you need to pay attention to:
1 Graceful degradation: to ensure that does not support js or low version of the browser can properly access
2 separate javascript: the separation of html and javascript, help maintain post-code
Backward compatibility 3: Determine the old version of the browser because the script does not prohibit and die
4 Performance Considerations: determine the optimal script execution
Write optimized code
The previous albums for the code, the main change here is the place to delete onclick method, when the page loads, use the method onload, onclick method to dynamically add a tag.
Previous onclick tag at is this:
<ul>
<li>
<a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
</li>
<li>
<a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
</li>
<li>
<a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
</li>
<li>
<a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
</li>
</ul>Execute scripts at is this:
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;
}Now, in order to avoid too much involved in html javascript code that onclick event, directly to a set ul id. Then add dynamic methods:
<ul id="imagegallery">
<li>
<a href="images/img1.jpg" title="test1">img1</a>
</li>
<li>
<a href="images/img2.jpg" title="test2">img2</a>
</li>
</ul>javascript code is as follows:
function addLoadEvent(func){
var oldonload = window.onload;
//如果onload还没有添加任何的方法，则把参数方法传给它；否则在它的函数方法后面，在添加方法
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) 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)?false:true;
}
//如果使用键盘回车时，触发onkeypresss()方法
//links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichPic){
//安全性检查，如果没有该节点，直接返回false
if(!document.getElementById("placeHolder")) return false;
var source = whichPic.getAttribute("href");
var placeHolder = document.getElementById("placeHolder");
//检查placeHolder是否是图片标签
if(placeHolder.nodeName != "IMG") return false;
placeHolder.setAttribute("src",source);
if(document.getElementById("description")){
var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";
var description = document.getElementById("description");
//文本节点的节点类型是3
if(description.firstChild.nodeValue == 3){
description.firstChild.nodeValue = text;
}
}
return true;
}
addLoadEvent(prepareGallery);Upper part of the code, adds a lot of safety and compatibility checking, a further method is to optimize the onload.
Similar effects with the previous article, all the code is as follows:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的相册</title>
<style type="text/css">
body {
font-family: "Helvetica","Arial",sans-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;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
clear:both;
display: block;
}
</style>
</head>
<body>
<h1>我的相册</h1>
<ul id="imagegallery">
<li>
<a href="images/img1.jpg" title="test1">img1</a>
</li>
<li>
<a href="images/img2.jpg" title="test2">img2</a>
</li>
</ul>
<img id="placeHolder" alt="image" src="images/img1.jpg"/>
<p id="description">Choose an image.</p>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
//如果onload还没有添加任何的方法，则把参数方法传给它；否则在它的函数方法后面，在添加方法
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) 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)?false:true;
}
//如果使用键盘回车时，触发onkeypresss()方法
//links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichPic){
//安全性检查，如果没有该节点，直接返回false
if(!document.getElementById("placeHolder")) return false;
var source = whichPic.getAttribute("href");
var placeHolder = document.getElementById("placeHolder");
//检查placeHolder是否是图片标签
if(placeHolder.nodeName != "IMG") return false;
placeHolder.setAttribute("src",source);
if(document.getElementById("description")){
var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";
var description = document.getElementById("description");
//文本节点的节点类型是3
if(description.firstChild.nodeValue == 3){
description.firstChild.nodeValue = text;
}
}
return true;
}
addLoadEvent(prepareGallery);
</script>
</body>
</html>Reproduced in: https: //my.oschina.net/u/204616/blog/544993