DOM
DOM的概念
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM又称为文档树模型
- 文档:一个网页可以称为文档
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
- 元素:网页中的标签
- 属性:标签的属性
模拟文档树结构
基本用法(后面会详细介绍)
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);
DOM经常进行的操作
- 获取元素
- 动态创建元素
- 对元素进行操作(设置其属性或调用其方法)
- 事件(什么时机做相应的操作)