浅谈JavaScript之Dom的Document节点及其属性
DOM Document节点
DOM全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。而Document节点则是一种具象化的表现形式。 假设我们把整个html文档看成是一个对象，那么这个对象就是Document节点。而我们如何操作控制这个对象的标准，就是DOM。 ps：dom中规定html页面中的所有元素都是节点。
document节点又被叫做document对象。每个载入浏览器的 HTML 文档都会成为 document对象。 document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 document是html文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。也就是说只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
Document节点属性
javascript为document节点提供了很多属性方便我们更好地使用。相对用得比较多的有下面这些： doctype,documentElement,body,head：返回文档内部的某个节点。 documentURL,URL,domain,lastModified,location,title,readyState：返回文档指定信息。 anchors,forms,images,links,scripts：返回文档内部特定节点的集合。
(1)doctype，documentElement，body，head属性
【doctype】 对于HTML文档来说document对象一般有两个子节点，第一个子节点就是doctype。doctype节点是一个对象，包含了当前文档类型信息。如果网页没有声明DTD，该属性返回null。
对于HTML5文档，doctype节点就代表<!DOCTYPE html>。
语法：document.doctype
var doctype = document.doctype;
console.log(doctype); // "<!DOCTYPE html>"
console.log(doctype.name); // "html“ Ps:htmldtd有三种类型：1.strict 2.transitional 3. Frameset
【documentElement】
document.documentElement属性，表示当前文档的根节点。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。
对于HTML网页，该属性返回HTML节点。但是对我们来说一般都是通过documentElement节点来访问页面当中的其他子节点。
语法：document.documentElement
console.log(document.documentElement); 
【body】
body属性返回当前文档的body或frameset节点，如果不存在这样的节点，就返回null。 这个属性是可写的，如果对其写入一个新的节点会导致原有的所有子节点被移除。但是我们暂时不作考虑，稍后讲过通过节点改写html页面后我们再来考虑。
语法：document.body
console.log(document.body);
【head】
head属性返回当前文档的head节点。如果当前文档有多个head，则返回第一个。
语法：document.head console.log(document.head);
(2)documentURI，URL，domain，lastModified，location，title，readyState属性
【documentURI】
documentURI属性返回当前文档的网址。 documentURI属性所有文档都具备。
语法：document.documentURI
【URL】
documentURI属性返回当前文档的网址。URL属性只有HTML文档才具备。只读
语法：document.URL
ps:IE浏览器不支持documentURI属性
ps：document.documentURI===document.URL//true
【domain】
domain属性返回当前文档的域名。
例如某网页的网址是 http://www.example.com/hello.html ，domain属性就等于 www.example.com 。如果无法获取域名，该属性返回null。
语法：document.domain
var baidu = "www.baidu.com";
if (document.domain === baidu){ window.close(); } //如果域名是百度，则关闭当前页面
【location】
location属性返回一个只读对象，提供了当前文档的URL信息。
返回完整的URL：document.location.href 返
回当前遵守协议：document.location.protocol
返回当前页面域名+端口号：document.location.host
返回当前页面域名：document.location.hostname
返回当前页面端口号，如果不存在则返回空：document.location.port
返回当前页面在服务器中路径：document.location.pathname
返回当当前页面URL中的查询字符串：document.location.search
跳转到另一个网址：document.location.assign(‘http://www.google.com’)
【title】
title属性返回当前文档的标题，该属性是可写的。
语法：document.title document.title = '新标题';
【characterSet】 characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1
语法：document.characterSet
【readyState】
readyState属性返回当前文档的状态。
共有三种可能值：
- 加载HTML代码阶段（尚未完成解析）是“loading”，
- 加载外部资源阶段是“interactive”，
- 全部加载完成是“complete”。
if (document.readyState === ‘complete') { console.log(‘当前网页已经加载完毕'); } //但是很显然这种判断方式只能判断一次，如果页面在判断时没有加载完成，那么就无法确定页面的究竟何时加载完毕。
(3)anchors,forms,images,links,scripts：返回文档内部特定元素的集合。
这些集合都是动态的，原节点有任何变化会立刻反映在集合中。
【anchors】 anchors属性返回 网页中所有指定了name属性的a节点元素 。
【forms】 forms属性返回 网页中所有表单 。
【images】 images属性返回 网页中所有图片
【links】 links属性返回 网页中所有链接元素(即带有href属性的a标签)
【scripts】 scripts属性返回 网页中所有的脚本 var scripts = document.scripts; if (scripts.length !== 0) {console.log("当前网页有脚本");}
关于js的document节点就说到这里了，如有不足之处，欢迎指正！
感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。
- 点赞
- 收藏
- 关注作者
评论（0）