DOM 核心——Document 类型

DOM 全称是(Document Obejct Model),它是文档对象模型，DOM 表示由多层节点构成的文档，通过它开发者可以添加，删除和修改页面。DOM 是一种跨平台，语言无关的表示和操作网页方式。

Document 是什么

Document 类型是 js 中表示文档节点的类型，在浏览器中，document 是 HTMLDocument 的实例，它表示整个 html 页面。document 对象还可以用于获取页面的信息及操作页面外观和底层结构。

文档子节点

document 的子节点可以是 DocumentType，Element，Processing-Instruction 还有 Comment。一般我们常用的都是 document.Element 来获取页面元素。

document 对象还有一个 body 属性，它直接指向 body 元素。我们可以看到拿到的就是 body 元素。

文档信息

document 对象上还有一些属性可以提供浏览器所加载网页的信息，其中就是我们常见的 title，title 是我们页面的标题。

    let Rtitle = document.title;    console.log(Rtitle);//读取当前document.title    document.title = 'jacksonDOM'; //修改document.title

我们可以看到默认的 document，我们在第三句代码修改了 title，它直接就改变了。

document 对象还有三个属性是 URL，domain,referrer。

URL 是当前页面的完整 URL 地址

domain 是页面的域名

referrer 是链接到当前页面的上一个 URl，如果当前页面不是跳转过来的，它就是个空串。

    let url = document.URL;    let domain = document.domain;    let referrer = document.referrer;    console.log(url);    console.log(domain);    console.log(referrer);

其实这些我们能在 http 请求头中看到

定位元素

我们最最常用的应该就是获取页面元素或者某组元素，我们可以通过 id 获取也可以通过标签名获取，还可以通过 class 类名获取。

• getElementById()

  getElementById()是获取元素 id，它接收一个 id 值，如果找到这个 id 就返回它元素，如果没找到就返回空。如有有俩个 id 一样，只显示第一个，因为找到第一个就返回了。

    let root = document.getElementById('root');    console.log(root);

• getElementsByTagName()

getElementsByTagName()是获取一组元素，我们可以想操作某个内容可以用下标的方式。

   let lis = document.getElementsByTagName('li');    console.log(lis);

getElementsByClassName()获取 class 类名的元素。

let active = document.getElementsByClassName('active');console.log(active);

其实还有好多这三种获取方式的变种，大家可以自行尝试。

文档写入

document 对象还有一个文档写入功能，write(),writeln(),这俩个是写入，write 是写入文本，writeln 是写完会加一个换行。

document.write('<p>' + 'jackson' + '</p>');document.writeln('<p>' + 'bear' + '</p>');

document 还有俩个方法 open(),close()，第一个是开启第二个是关闭，几乎在我们开发中用不到，这些也都是远古技能了。