下文笔者讲述JS中最常用的一个对象DOM对象的简介说明
DOM文档对象模型简介
文档对象模型(Document Object Model,简称 DOM)
是一种与平台和语言无关的模型
用于表示 HTML 或 XML 文档
文档对象模型中定义了文档的逻辑结构
以及程序访问和操作文档的方式
DOM文档模型,是我们日常开发中常见的一种模型
当我们操作html文档时,我们就可以看见DOM模型
DOM模型的本质:
DOM模型是将html中的元素及内容转换为一个对象，这个对象就是DOM对象
可以毫不夸张的说:"网页加载的同时，就会将整个HTML内容转换为一个DOM对象"
我们可以通过JS操作这个DOM对象，从而达到修改HTML内容的目的
如:获取，修改，删除，新增html元素指网页上
DOM(Document对象的产生)
当浏览器访问一个html文档时，
会创建一个Document 对象
Document 对象是 DOM 树中所有节点的根节点
我们可以访问Document对象达到访问所有HTML所有元素的目的
Document对象中属性
| 属性 |
备注 |
| document.activeElement |
返回当前获取焦点的元素 |
| document.anchors |
返回对文档中所有 Anchor 对象的引用 |
| document.applets |
返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素 |
| document.baseURI |
返回文档的基础 URI |
| document.body |
返回文档的 body 元素 |
| document.cookie |
设置或返回与当前文档有关的所有 cookie |
| document.doctype |
返回与文档相关的文档类型声明 (DTD) |
| document.documentElement |
返回文档的根节点 |
| document.documentMode |
返回浏览器渲染文档的模式 |
| document.documentURI |
设置或返回文档的位置 |
| document.domain |
返回当前文档的域名 |
| document.domConfig |
已废弃，返回 normalizeDocument() 被调用时所使用的配置 |
| document.embeds |
返回文档中所有嵌入内容（embed）的集合 |
| document.forms |
返回文档中所有 Form 对象的引用 |
| document.images |
返回文档中所有 Image 对象的引用 |
| document.implementation |
返回处理该文档的 DOMImplementation 对象 |
| document.inputEncoding |
返回文档的编码方式 |
| document.lastModified |
返回文档的最后修改日期 |
| document.links |
返回对文档中所有 Area 和 Link 对象的引用 |
| document.readyState |
返回文档状态(载入中) |
| document.referrer |
返回载入当前文档的 URL |
| document.scripts |
返回页面中所有脚本的集合 |
| document.strictErrorChecking |
设置或返回是否强制进行错误检查 |
| document.title |
返回当前文档的标题 |
| document.URL |
返回文档的完整 URL |
Document 对象中的方法
| 方法 |
备注 |
| document.addEventListener() |
向文档中添加事件 |
| document.adoptNode(node) |
从另外一个文档返回 adapded 节点到当前文档 |
| document.close() |
关闭使用 document.open() 方法打开的输出流，并显示选定的数据 |
| document.createAttribute() |
为指定标签添加一个属性节点 |
| document.createComment() |
创建一个注释节点 |
| document.createDocumentFragment() |
创建空的 DocumentFragment 对象，并返回此对象 |
| document.createElement() |
创建一个元素节点 |
| document.createTextNode() |
创建一个文本节点 |
| document.getElementsByClassName() |
返回文档中所有具有指定类名的元素集合 |
| document.getElementById() |
返回文档中具有指定 id 属性的元素 |
| document.getElementsByName() |
返回具有指定 name 属性的对象集合 |
| document.getElementsByTagName() |
返回具有指定标签名的对象集合 |
| document.importNode() |
把一个节点从另一个文档复制到该文档以便应用 |
| document.normalize() |
删除空文本节点，并合并相邻的文本节点 |
| document.normalizeDocument() |
删除空文本节点，并合并相邻的节点 |
| document.open() |
打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出 |
| document.querySelector() |
返回文档中具有指定 CSS 选择器的第一个元素 |
| document.querySelectorAll() |
返回文档中具有指定 CSS 选择器的所有元素 |
| document.removeEventListener() |
移除文档中的事件句柄 |
| document.renameNode() |
重命名元素或者属性节点 |
| document.write() |
向文档中写入某些内容 |
| document.writeln() |
与write()方法具有相同的功能，但是writeln()方法会在末尾输出一个换行符 |
例
document.addEventListener("click", function(){
document.body.innerHTML = document.activeElement;
var box = document.createElement('div');
document.body.appendChild(box);
var att = document.createAttribute('id');
att.value = "myDiv";
document.getElementsByTagName('div')[0].setAttributeNode(att);
document.getElementById("myDiv").innerHTML = Math.random();
var btn = document.createElement("button");
var t = document.createTextNode("按钮");
btn.appendChild(t);
document.body.appendChild(btn);
var att = document.createAttribute('onclick');
att.value = "myfunction()";
document.getElementsByTagName('button')[0].setAttributeNode(att);
});
function myfunction(){
alert(document.title);
}
