这是我参与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元素。
文档信息
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是写u人文本,writeln是写完会加一个换行。
document.write('<p>' + 'jackson' + '</p>');
document.writeln('<p>' + 'bear' + '</p>');
document还有俩个方法 open(),close(),第一个是开启第二个是关闭,几乎在我们开发中用不到,这些也都是远古技能了。