分离JavaScript与HTML

分离JavaScript与HTML也就是分离网页的内容与网页的行为，可以提高网站的可用性。

我们来从上个例子“用JavaScript批量访问HTML元素”谈起，我们定义了一个JS函数，在HTML中写一个按钮来调用函数。但是假设这样一种情景：访客的浏览器不支持JS，或者是禁用了JS，那么按钮仍然会显示出来。但是这时用户点击按钮不会有任何事件发生，显然这不是我们希望的结果。

因此，我们希望如果访客的浏览器不支持JS，那么按钮也不会显示出来，也就是分离JavaScript与HTML。

实例JavaScript代码

与上一个例子对比，我们使用JS来生成按钮，具体意思见注释。

<script type="text/javascript">
function test(){
	var testUL = document.getElementById("testUL");
	var listItems = testUL.getElementsByTagName("LI");
	for (var i=0; i<listItems.length; i++) {
		listItems[i].onmouseover=function() {
			this.className = "important";
		}
		listItems[i].onmouseout=function() {
			this.className = "";
		}
	}
}
window.onload = function() {
//创建一个button元素
var button = document.createElement('button');
//创建文字节点
var buttonText = document.createTextNode('给所有的li元素添加鼠标事件');
//将文字添加到按钮
button.appendChild(buttonText);
//设置点击按钮时调用的函数
button.onclick = test;
//找到插入按钮的地方，这里仅仅是一个示例,
//实际需要根据文档的结构修改插入位置
var contentDIV = document.getElementById("content");
//插入按钮
contentDIV.appendChild(button);	
}
</script>

HTML代码

由于按钮会自动生成，所以本例的HTML代码只有一个ul。

<ul id="testUL">
  <li>HTML写内容</li>
  <li>CSS控制外观</li>
  <li>JavaScript控制行为</li>
</ul>
  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误