54-DOM基础

网页三大核心技术

• HTML
• CSS
• Javascript

网页交互流程

DOM简介

• 概念：document object model 文档对象模型。js在解析网页时，会将所有的html标签整合在一起，看作为一个document对象，在document对象中包含了一系列的API，通过这些API可以实现网页的增删查改功能

• 网页加载流程：

  • 浏览器在在加载时，识别为html页面

  • 将所有的html标签挂载在document对象上，形成一个dom树

    • 标签节点：指html上的一个标签
    • 属性节点：标签上的属性
    • 文本节点：标签中的内容

  • 当在页面中发现有css代码，会启动css解析器，同步解析css代码

  • 当在页面中发现有js代码，会启动js脚本解析器，同步解析js代码（v8引擎）

  • 最后将css代码和dom结合，实现页面最终渲染效果

document对象

• document.wirte()：页面输出

• 常用属性：

  1. 快速获取body标签
       document.body;
  2. 快速获取页面html标签
      document.documentElement;
  3. 快速获取页面标题
     document.title;
  4. 快速获取URL地址
      document.URL;