翼度科技»论坛 编程开发 JavaScript 查看内容

什么是DOM?

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
概念

DOM(Document Object Model , 文档对象模型) ;
简单来说,浏览器会将整个网页看成一棵节点树;而Js语言需要通过一种动态的技术去操作这棵树,这种技术就是DOM

一张网页的树性结构

例如下面这张代码的网页
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>DOM</title>
  7. </head>
  8. <body>
  9.    
  10.         <h1>这是标题</h1>
  11.    
  12.    
  13.         <img src="https://www.cnblogs.com/logo-short.png"/>
  14.         简介...
  15.    
  16. </body>
  17. </html>
复制代码
DOM会解析成如下结构

可见,在解析渲染一个网页的时候, 运行环境不会简单的把文本信息看成一个字符串, 而是解释为一棵, 每个元素都是其上面的一个节点
不仅是带标签的元素(例如
) 会被当成一个节点,一段文本或者简单的一个换行符也会被当成一个节点
每个节点都会有一个nodeType属性值,这个属性标记了此节点是什么类型
nodeType值节点类型举例1元素节点
3文字节点我是小明8注释节点9document节点document节点只有一个…Document 对象

document 对象封装了一整棵HTML的属性结构, 它是DOM节点的根
document对象的 nodeType 属性是 9 ,每张网页只有一个document对象
为了验证上面我们说的正确性,我们随便找个网站试下,打开百度 ,在控制台中输入 document , 它会把整个网页返给我们

随后,我们检测下document的nodeType, 会返回9

   
微信公众号
  

来源:https://www.cnblogs.com/haloujava/p/17845101.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具