标签：
DOM的全称是Document Object Model(文档对象模型)，又称为文档树模型，是一套操作HTML和XML文档的API(应用程序接口)。其中“D”指的是document（文档），也可以理解成浏览器的页面，“O”指的是object（对象），对象包括属性和方法，“M”指的是model（模型）或是map（地图），代指某种事物的表现形式。“DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分，学习DOM就是学习封装好的操作页面的API。
DOM由节点组成，文档是由节点构成的集合，每个文档的根节点都是html，节点又可以分为：元素节点（标签节点）、属性节点、文本节点和注释节点，分别代表着标签、属性、文本和注释，其中文档中的空白（换行、空格）均为文本节点。
通过标签的Id获得元素，得到的是唯一的页面标签对象，其中id值必须由双引号或单引号包裹。一般情况下，我们会引入一个变量存储返回的对象，方便后期的使用。
var box = document.getElementById(“box”);
通过标签名获得对象，返回一个数组（即使只有一个也是数组），通过索引来获得想要操作的元素
扩展1：可以通过通配符来获得页面总共有多少个标签节点
alert(document.getElementsTagName(“*”).length);
扩展2：与id获取方式能过提高精度
var ul = document.getElementById(“ul”); var lis = ul.getElementsByTagName(“li”);
通过标签的类名获得元素，返回的也是一个数组，在Js中不推荐使用这种方式，存在兼容性问题，通过下面的函数封装后能够适用于新老浏览器，慎用。
function getElementsByClassName(node,classname){ if(node.getElementsByClassName) { //如果浏览器支持，直接返回 return node.getElementsByClassName(classname); } else{ //如果浏览器不支持则先获得所有标签节点，然后遍历并返回类名相同的数组 var results = new Array(); var elems = node.getElementsByTagName(“*”); if (var i=0;i<elems.length;i++){ if(eles[i].className.indexOf(classname) != -1) { results[results.length] = elems[i]; } } } }
文档或浏览器窗口中发生的一些特定的交互瞬间
事件源 要给谁注册事件
事件类型 要给事件源注册什么样的事件
事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数
第一个是内嵌式 就是写在一对script标签之间
<script> var btn = document.getElementById(“btn”); btn.onclick = function(){ alert(1); } </script>
第二个是行内式，就是在标签之内写事件
<input type=”button” value=”确定” onclick=”fn();”/>
第三个是外链式，调用外部的js文件
<script src=”common.js”></script>//外部要有一个相同名称的js文件
注意：内嵌式的方式必须紧靠在</body>上方放置，而不是在<head>中。为了等待body中的元素加载完成再执行js文档，否则通过id的方式将无法获得正确的对象
第一种是使用on的方式注册事件
|
onclick |
单击鼠标左键触发 |
|
ondblclick |
双击鼠标左键触发 |
|
onmouseover |
鼠标悬浮触发 |
|
onmouseout |
鼠标离开触发 |
|
onmousemove |
鼠标移动触发 |
|
onmousedown |
鼠标按下的瞬间触发 |
|
onmouseup |
鼠标按下后抬起的瞬间触发 |
|
onfocus |
获取焦点时触发 |
|
onblur |
失去焦点时触发 |
第二种是addEventListener(后面讲的，有兼容性的问题)
注：display用于更改个数较少时的样式，className用于批量更改
var box = document.getElementById(“box”); var btn1 = document.getElementById(“btn1”); var btn2 = document.getElementById(“btn2”); btn1.onclick = function(){ box.style.display = “none”; } btn2.onclick = function(){ box.style.display = “block”; }
var box = document.getElementById(“box”); var btn = document.getElementById(“btn”); btn.onclick = function(){ if(btn.innerHTML == “隐藏”){//btn.value(input的方式写) box.style.display = “none”; btn.innerHTML = “显示”;//btn元素在的内容 }else{ box.style.display = “block”; btn.innerHTML = “隐藏”; } }
var btn1 = document.getElementById(“btn1”); var btn2 = document.getElementById(“btn2”); var boxes = document.getElementsByTagName(“div”); btn1.onclick = function(){
for(var i=0;i<boxes.length;i++){
boxes[i].style.display = “none”;
}
} btn2.onclick = function(){
for(var i=0;i<boxes.length;i++){ boxes[i].style.display = “block”;
} }
var btn = document.getElementById(“btn”); var boxes = document.getElementsByTagName(“div”); btn.onclick = function(){ if(btn.innerHTML == “隐藏”){ for(var i=0;i<boxes.length;i++){ boxes[i].style.display = “none”; } btn.innerHTML = “显示”; }else{ for(var i=0;i<boxes.length;i++){ boxes[i].style.display = “block”; } btn.innerHTML = “隐藏”; }
}
<body>
<h1>美女相册</h1> <a href=”images/1.jpg” title=”美女1”><img src=”images/1.jpg”></a> <a href=”images/2.jpg” title=”美女2”><img src=”images/2.jpg”></a> <a href=”images/3.jpg” title=”美女3”><img src=”images/3.jpg”></a> <a href=”images/4.jpg” title=”美女4”><img src=”images/4.jpg”></a> <a href=”images/5.jpg” title=”美女5”><img src=”images/5.jpg”></a> <img id=”placeholder” src=”images/placeholder.jpg”> <p id=”des”>请选择一张图片</p>
<script>
var links = document.getElementsByTagName(“a”);
var placeholder = document.getElementById(“placeholder”);
var des = document.getElementById(“des”);
for(var i=0;i<links.length;i++){
links[i].onclick = function(){
placeholder.src = this.href;
des.innerHTML = this.title;//this指此时被点击的图片链接
return false;//返回值为false时，链接不跳转
}
}
</script>
</body>
标签：
原文地址：http://www.cnblogs.com/lxyc/p/5893840.html
