DOM核心——Document类型

theme: channing-cyan

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

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元素。

image.png

文档信息

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

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

image.png

我们可以看到默认的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);

image.png

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

image.png

定位元素

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

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

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

image.png

• getElementsByTagName()

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

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

image.png

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

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

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

文档写入

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

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

image.png

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