网站建设公司网站制作,怎么选一个适合自己的网站,怎么做wap网站,wordpress_主题教程文档对象模型#xff08;Document Object Model#xff0c;简称 DOM#xff09;#xff0c;是一种与平台和语言无关的模型#xff0c;用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构#xff0c;以及程序访问和操作文档的方式。
当网页加载时#xff0…文档对象模型Document Object Model简称 DOM是一种与平台和语言无关的模型用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构以及程序访问和操作文档的方式。
当网页加载时浏览器就会自动创建当前页面的文档对象模型DOM。在 DOM 中文档的所有部分例如元素、属性、文本等都会被组织成一个逻辑树结构类似于族谱树中每一个分支的终点称为一个节点每个节点都是一个对象如下图所示 借助 DOM 您可以使用 JavaScript 来访问、修改、删除或添加 HTML 文档中的任何内容。
Document 对象
当浏览器加载一个 HTML 文档时会创建一个 Document 对象Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。
提示Document 对象是 Window 对象的一部分所以您可以通过 window.document 来访问 Document 对象。
Document 对象中的属性
下表中列举了 Document 对象中提供的属性及其描述
属性描述document.activeElement返回当前获取焦点的元素document.anchors返回对文档中所有 Anchor 对象的引用document.applets返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 applet 元素document.baseURI返回文档的基础 URIdocument.body返回文档的 body 元素document.cookie设置或返回与当前文档有关的所有 cookiedocument.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返回载入当前文档的 URLdocument.scripts返回页面中所有脚本的集合document.strictErrorChecking设置或返回是否强制进行错误检查document.title返回当前文档的标题document.URL返回文档的完整 URL
Document 对象中的方法
下表中列举了 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);
}运行上面的代码点击页面的空白区域即可输出如下图所示的内容
