原生JS DOM 重点知识笔记（第二期）

一、给多个标签添加事件

function{
	if(!document.getElementById)
		return false;//判断标签是否能够使用
	if(!document.getElementsByTagName)
		return false;
	if(!document.getElementById("父元素ID"))
		return false;//判断是否有此父标签
	var gallery=document.getElementById("父元ID");
	var links=gallery.getElementsByTagName("a");//返回一个此父元素下a标签的数组
		for(var i=0;i<links.length;i++)
		{
			links[i].onclick=function(){
				showpic(this);//添加事件，事件在外部定义
				return false;//防止a标签转跳
			}
}

二、共享onload事件

页面加载的时候会执行onload事件，注：两个onload事件一起存在时，只能有后面一个会生效。

window.onload="事件1"
window.onload="事件2"//只有这个会生效

可添加多个onload事件的方法:

	function addLoadEvent(FUNCTION)
{
	var oldonload=window.onload;
	if(typeof window.onload != 'function')
	{
		window.onload=FUNCTION;
	}else{
		window.onload=function(){
			oldonload();
			FUNCTION();		
		}
	}
}

三、动态的创建标记

1. 避免document.write方法
   注1：直接将内容写入页面的内容流，会导致页面全部重绘。
   注2：document.write()不能写在window.onload 和$(document).ready()中。
2. 使用innerHTML属性

例：

<div id="textdiv">
	<p>this is <em>my </em>content</p>
</div>

<script>
	alert(document.getElementById("textdiv").innerHTML);
</script>

将输出

注：很明显，使用innerHTML属性无细节可言。如果上面id="textdiv"里是空内容，那么使用innerHTML方法，内容将会被填充。但是如果里面有内容，内容则会被替换。

<div id="textdiv1">
	<p>这里是旧内容1</p>
</div>

<div id="textdiv2">
	<p>这里是旧内容2</p>
</div>	

<script>
	document.getElementById("textdiv2").innerHTML="这里是新内容";
</script>

效果如下：

后排提示: 本系列知识点部分摘自《JavaScript DOM 编程艺术 》（第二版）一书