js基础 - DOM与节点的简单介绍

DOM

• 什么是DOM
• 什么是节点
• 文档

---

什么是DOM

DOM（Document Object Model），全称翻译文档对象模型。

• D        文档，一个网页就是一个文档，document代表整个网页。
• O        对象，网页编译的每一个部分、标签、文字都装换为可见的对象。一切皆对象。
• M        模型，用来表现对象之间的关系，连接节点与节点。javascript获取对象离不开模型。可以利用DOM随心所欲的操作网页。

 

---

什么是节点

节点：网页的每一个部分都是节点。分为文档节点、元素节点、属性节点、文本节点。也是对象，给它一个统一名字叫节点。简单一句话，节点就是用来操作网页的。

• 文档节点：整个HTML文档。
• 元素节点：HTML文档中的HTML标签（元素）
• 属性节点：标签（元素）的属性
• 文本节点：HTML标签中的文本内容

 

图的部分解释：通过nodeType可以知道节点类型，例：document.body.nodeType 结果为1。

---

文档

文档的加载

       浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。

       在有些不熟练的情况，在代码执行时，页面还没加载，却想获取页面的标签，这是一种不当的行为，应该完善代码规范。可用window.οnlοad=function(){}将js代码封存，等页面加载完毕，再执行js代码。onload事件会在整个页面加载完成后才触发，这样可以确保在执行js代码时DOM对象已经加载完毕了。也可将js代码放在页面的尾端，等待浏览器顺序加载js代码。最优是写在网页的尾端，等待网页自行顺序加载，提高性能。但是js代码放在上面方便管理。无多大区别，根据公司要求书写。