JavaScript DOM编程基本原则和习惯总结（JavaScript+DOM编程艺术）

本文链接：https://blog.youkuaiyun.com/xujiezi/article/details/40377639

本文通过两个实例介绍JavaScript DOM编程的基本原则与习惯，包括预留退路、JavaScript分离、向后兼容及避免过多假设等。实例涵盖弹窗及图片切换功能，展示了如何应用这些原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript DOM编程基本原则和习惯总结：预留退路、JavaScript分离、向后兼容、不要有太多假设。

现以例子说明，主要参照例子中的注释体会上面所述的编程原则：

实例一：在当前页面弹窗

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹窗</title>
<script src="js/popWindow.js"></script>
</head>

<body>
<a href="http://www.example.com/" class="popWindow">Example</a><!--href=真是链接：预留退路-->
</body>
</html>

JavaScript：

window.onload=prepareLink;
function prepareLink(){//分离JavaScript
	if(!document.getElementsByTagName){return false;}//向后兼容
	var links=document.getElementsByTagName('a');
	for(var i=0;i<links.length;i++){
		if(links[i].className=="popWindow"){
			links[i].onclick=function(){
				popUp(this.href);
				return false;
			}
		}
	}
}

function popUp(url){
	window.open(url,"popWindow","width=400,height=300");
}

实例二：美术馆（即在同一个页面中切换对应链接的图片）

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript美术馆</title>
<script src="js/showPic.js"></script>
</head>

<body>
	<h1>Snapshots</h1>
    <ul id="imgGallery">
    	<li>
        	<a href="images/1.jpg" title="the first img">the first img</a>
        </li>
        <li>
        	<a href="images/2.jpg" title="the second img">the second img</a>
        </li>
        <li>
        	<a href="images/3.jpg" title="the third img">the third img</a>
        </li>
        <li>
        	<a href="images/4.jpeg" title="the forth img">the forth img</a>
        </li>
    </ul>
    <p id="imgTitle">show Img</p>
    <h2 id="testH2"><span id="">haha</span></h2>
    <img id="placeHolder" src="" alt="my placeHolder img"/><!--alt:如果浏览器无法显示图片，alt将会显示替代文本-->
</body>
</html>

JavaScript:

/*window.onload=prepareLink;*/
addLoadEvent(prepareLink);
function addLoadEvent(fun){ //代替window.onload函数，在文档加载完之后执行
	var oldOnload=window.onload;
	if(typeof window.onload !='function'){//还没有绑定任何函数 此处相当于typeof(window.onload)!='function'
		window.onload=fun;
	}else{
		window.onload=function(){
			oldOnload();
			fun();
		}
	}
}
function prepareLink(){
	if(!document.getElementsByName){
		return false;
	}
	if(!document.getElementById){
		return false;
	}
	if(!document.getElementById("imgGallery")){
		return false;
	}
	var galleryUl=document.getElementById("imgGallery");
	var links=galleryUl.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		links[i].onclick=function(){
			return showPic(this);//不要有太多假设，假设showPic方法定能执行成功，只有当图片链接切换成功时，才会return false，反之，return true。故将return false写到showPic中
			//return false;
		}
	}
	
}
function showPic(currentLink){//不要有太多假设，假设placeHolde，currentImgTitlerId一定存在
		/*var testTitle=document.getElementById("testH2").childNodes[0].childNodes[0].nodeValue;
		alert(testTitle);*/
		if(!document.getElementById("placeHolder"))return true;//注意：将两个预留退路的!分开写的原因：下面那个title即使没有，上面的图片依然可以切换 。此处要换为return true,因为图片未切换成功，故返回return true,从而让默认链接可点击
		var placeHolder=document.getElementById("placeHolder");
		var imgHref=currentLink.getAttribute("href");
		placeHolder.setAttribute("src",imgHref);
		
		if(!document.getElementById("imgTitle"))return false;//注意：此处的title未获取到，也不影响图片的切换，故让链接执行onclick，故返回false
		var imgTitle=document.getElementById("imgTitle");
		var currentImgTitle=currentLink.getAttribute("title");
		//imgTitle.childNodes[0].nodeValue=currentImgTitle;
		//imgTitle.firstChild.nodeValue=currentImgTitle;
		imgTitle.firstChild.nodeValue=currentImgTitle;
		return false;//能执行到最后，说明图片已经切换成功，故return false;
	}