文档对象模型-DOM

DOM基本概念

DOM（Document Object Model）文档对象模型，是W3C组织推荐的一套用于处理HTML的标准编程接口。

DOM又称为文档树模型，因为整个HTML文档是一个树形的结构

DOM中常见的概念:

文档document：一个网页可以称为文档节点node：网页中的所有内容都是节点（标签、属性、文本、注释等）元素element：网页中的标签

DOM初体验

document.getElementById("box")的作用是根据页面中元素的id来获取元素

在DOM中，想要操作一个元素，首先需要先获取到这个元素才能进行操作。

//功能：通过id获取元素 //参数：字符串类型的id值 //返回值：元素，如果id不存在，会返回null var div = document.getElementById('main'); console.dir(div);

关于console.log和console.dir的区别

console.log打印一个元素的时候，是以标签的形式进行展示的console.dir打印一个元素的时候，是以对象的形式进行展示的

在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。

//html内容 <div title="hehe" id="box"> <script> // javascript代码 var div = document.getElementById('box'); div.title = "哈哈"; </script> //结果：div标签的title属性就发生了更改 <div title="哈哈" id="box">

获取元素

使用getElementById的注意事项

如果id不存在，会返回null在DOM中，document.getElementById("box")方法需要写在html内容的后面，保证页面加载完成之后才能获取到内容。部分浏览器，如果元素设置了id属性，可以直接使用（但是不是规范，不推荐）

当getElementById返回null的时候，null.onclick就会报错

<!--没有id--> <img src="images/1.jpg" alt="图破了" title="呵呵"> <script> //如果找不到，返回的是null，试图给null设置属性会报错 var element = document.getElementById("img"); element.title = "嘿嘿";//报错Uncaught TypeError: Cannot set property 'title' of null </script>

mdn地址

getElementsByTagName

通过标签名获取元素

//参数：标签名 //返回值：一个伪数组， 伪数组不是数组，不能使用数组的方法，但是可以跟数组一样进行遍历和使用下标进行操作。 var divs = document.getElementsByTagName('div');

注意：返回值有没有获取到元素，都是一个伪数组，即便元素只有一个

querySelector和querySelectorAll

强大并且常用的根据querySelector是CSS选择器获取页面元素的

document.querySelector('div.box') //选取class为box的div

缩小查找范围

document.getElemntsByTagName("div")表示获取页面中所有的div元素，范围太大了，可以使用box.getElementsByTagName("div")表示获取box中所有的div元素，范围更小。document.getElementById("demo")表示获取页面中id为box的元素，没有box.getElementById("demo")这种用法。

练习：

隔行变色

注册事件

事件的基本使用

事件：触发-响应机制

事件三要素：

事件源:触发事件的元素事件名称: click 点击事件事件处理程序:事件触发后要执行的代码(函数形式)

注册事件的基本语法：

var box = document.getElementById('box'); //on:当 click:点击 当按钮被点击的时候触发 box.onclick = function() { console.log('代码会在box被点击后执行'); };

注意：事件处理程序并不是立马执行，而是当事件触发的时候在会执行（浏览器会自动调用）

练习：

点击按钮，切换图片

修改标签的属性

在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。

标签的alt，title，src，width，height等属性，可以直接通过对象进行修改。

如果是class属性，在js中class是关键字，因此对应的是className属性

练习：

//1. 点击按钮，修改div的样式 -- 定义类名 //2. 点击按钮，div进行显示和隐藏（两个按钮） -- 预定义类名 //3. 点击按钮，div进行显示和隐藏（一个按钮） -- 预定义类名

【案例：二维码案例】

鼠标经过事件与鼠标离开事件

onmouseover:当鼠标经过时触发 onmouseout:当鼠标离开时触发

事件中的this

当在事件中表示当前元素的时候，可以使用this

var btn = document.getElementById("btn"); btn.onclick = function() { //给 btn注册的事件，因此this表示btn this.value = "哈哈"; }

练习：

//1. 给多个按钮注册点击事件，点击的那个变成红色 //2. 给多个按钮注册点击事件，当点击按钮，显示对应的图片 -- title属性记录图片src

阻止a标签跳转

对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false

var link = document.getElementById("link"); link.onclick = function() { alert("呵呵"); //阻止页面跳转 return false; }

标签的内容属性

innerText && innerHTML

美女相册案例

//1. 找对象 var imgs = document.getElementById("imgs");//ul var links = imgs.getElementsByTagName("a");//所有的a标签 var bigImg = document.getElementById("bigImg");//大图片 var des = document.getElementById("des"); //2. 给所有的a标签注册点击事件 for(var i = 0; i < links.length; i++) { links[i].onclick = function () { //3. 修改大图片的src属性， this.href bigImg.src = this.href; //4. 修改p标签的内容, innerText:内部的文本 des.innerText = this.title; //5. 阻止a跳转 return false; } }