DOM - 悦读

1 DOM的概念

文档对象模型（Document Object Model，简称DOM），是[W3C](http://baike.baidu.com/item/W3C)组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与[Netscape](http://baike.baidu.com/item/Netscape)的“浏览器大战”，双方为了在[JavaScript](http://baike.baidu.com/item/JavaScript)与[JScript](http://baike.baidu.com/item/JScript)一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有[VBScript](http://baike.baidu.com/item/VBScript)、[ActiveX](http://baike.baidu.com/item/ActiveX)、以及微软自家的[DHTML](http://baike.baidu.com/item/DHTML)格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签的属性

2 模拟文档树结构

function Element(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Element({
  nodeName: 'html'
});

var head = new Element({
  nodeName: 'head'
});

var body = new Element({
  nodeName: 'body'
})

doc.children.push(head);
doc.children.push(body);
var div = new Element({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Element({
  nodeName: 'p',
  nodeValue: '段落'
})

body.children.push(div);
body.children.push(p);
function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}

getChildren(doc);

3 DOM经常进行的操作

获取元素

动态创建元素

对元素进行操作(设置其属性或调用其方法)

事件(什么时机做相应的操作)

4 获取页面元素

4.1 为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

4.2 根据id获取元素

var div = document.getElementById('main');
console.log(div);

获取到的数据类型 HTMLDivElement，对象都是有类型的

HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

4.3 根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

4.4 根据name获取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

4.5 根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

4.6 根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

4.7 总结

掌握

getElementById()

getElementsByTagName()

了解

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

4.8 案例

1.点击按钮弹出对话框

2.点击按钮修改超链接的地址和热点文字

3.点击(每个)图片弹出对话框

4.点击图片设置自身宽和高

5.点击按钮修改每个图片的title属性

6.点击按钮显示哈哈(排他功能)

7.点击按钮显示和隐藏div

8.显示和隐藏二维码

9.点击按钮修改所有p标签内容

10.点击按钮修改所有文本框内容

11.点击按钮切换图片

12.点击超链接停止跳转页面

13.点击小图显示大图

14.美女相册

15点击按钮选中性别和兴趣