首页 > 代码库 > DOM基础 day1
DOM基础 day1
一、什么是DOM
DOM的全称是Document Object Model(文档对象模型)，又称为文档树模型，是一套操作HTML和XML文档的API(应用程序接口)。其中“D”指的是document（文档），也可以理解成浏览器的页面，“O”指的是object（对象），对象包括属性和方法，“M”指的是model（模型）或是map（地图），代指某种事物的表现形式。“DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分，学习DOM就是学习封装好的操作页面的API。
二、DOM的组成
DOM由节点组成，文档是由节点构成的集合，每个文档的根节点都是html，节点又可以分为：元素节点（标签节点）、属性节点、文本节点和注释节点，分别代表着标签、属性、文本和注释，其中文档中的空白（换行、空格）均为文本节点。
三、获取页面元素的方法
3.1 document.getElementById(“id名”) ——返回唯一确定的对象
通过标签的Id获得元素，得到的是唯一的页面标签对象，其中id值必须由双引号或单引号包裹。一般情况下，我们会引入一个变量存储返回的对象，方便后期的使用。
var box = document.getElementById(“box”);3.2 document.getElementsByTagName(“标签名”)；——返回标签名相同的数组
通过标签名获得对象，返回一个数组（即使只有一个也是数组），通过索引来获得想要操作的元素
扩展1：可以通过通配符来获得页面总共有多少个标签节点
alert(document.getElementsTagName(“*”).length);
扩展2：与id获取方式能过提高精度
var ul = document.getElementById(“ul”);var lis = ul.getElementsByTagName(“li”);
3.3 document.getElementsByClassName(“标签类名”)——返回类名相同的数组
通过标签的类名获得元素，返回的也是一个数组，在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]; } } } }
四、事件初涉
4.1 什么是事件
文档或浏览器窗口中发生的一些特定的交互瞬间
4.2 事件三要素
事件源 要给谁注册事件
事件类型 要给事件源注册什么样的事件
事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数
4.3 书写时间的位置
第一个是内嵌式 就是写在一对script标签之间
<script> var btn = document.getElementById(“btn”); btn.onclick = function(){ alert(1); }</script>
第二个是行内式，就是在标签之内写事件
<input type=”button” value=http://www.mamicode.com/”确定” onclick=”fn();”/>
第三个是外链式，调用外部的js文件
<script src=http://www.mamicode.com/”common.js”></script>//外部要有一个相同名称的js文件
注意：内嵌式的方式必须紧靠在</body>上方放置，而不是在<head>中。为了等待body中的元素加载完成再执行js文档，否则通过id的方式将无法获得正确的对象
4.4 注册事件的方式
第一种是使用on的方式注册事件
onclick | 单击鼠标左键触发 |
ondblclick | 双击鼠标左键触发 |
onmouseover | 鼠标悬浮触发 |
onmouseout | 鼠标离开触发 |
onmousemove | 鼠标移动触发 |
onmousedown | 鼠标按下的瞬间触发 |
onmouseup | 鼠标按下后抬起的瞬间触发 |
onfocus | 获取焦点时触发 |
onblur | 失去焦点时触发 |
第二种是addEventListener(后面讲的，有兼容性的问题)
五、重点案例
5.1 两个按钮实现单击显示和隐藏一个盒子（box,btn1,btn2）
注：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”;}
5.2 一个按钮实现单击显示和隐藏一个盒子(box,btn)
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 = “隐藏”; } }
5.3 两个按钮实现单击现实和隐藏多个盒子(boxes,btn1,btn2)
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”;
}}
5.4 一个按钮实现单击显示和隐藏多个盒子(boxes,btn)
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 = “隐藏”; }
}
5.5 图片切换:点击小图片的链接在站位图片位置出现对应的大图并显示图片名称
<body>
<h1>美女相册</h1> <a href=http://www.mamicode.com/”images/1.jpg” title=”美女1”>> <script>
</script>
</body>
DOM基础 day1