• 【前端】DOM探索之基础详解篇


    什么是 DOM?

      DOM 是Document Object Model三个单词的缩写,翻译过来叫做文档对象模型。DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。

       简单点说DOM给我们提供了用程序来动态控制HTML的接口。

      1. DOM 定义了访问和操作HTML文档的标准方法。

      2. DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。


      一个web页面是一个文档,这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。DOM提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改,比如现在WEB页面有很多动画特效,这些特效有些是通过JavaScript脚本操作来展现。

      打开浏览器,按F12选择开发者工具,勾选下图设置中的选项禁用JavaScript功能,页面上的所有JS特效就不动失效了。通过这个实验我们知道JavaScript脚本可以操纵DOM元素并赋予行为。

      

       我们知道一个网页上通过HTML元素搭建其骨架,CSS来定义其样式,而JavaScript赋予了页面的各种行为,通过它可以和页面交互并且可以实现动画效果等。那么问题来了JavaScript是通过什么来实现这些功能的呢?

       其实JavaScript是通过ECMAScript来实现

     

      文档对象模型(DOM)对应Document对象:一个与系统平台各和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。。

      浏览器对象模型(BOM)  对应window对象:提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关;

      DOM是一棵树,如下图

       

    高性能DOM(优化DOM)

    为什么要写高性能DOM

    dom初始化过程(浏览器),这个是浏览器解析相关

    dom的结构及动态操作(人为)

    js执行过程(浏览器内核js解析器)

    回流(Reflow)和重绘(Repaint)

    对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的,前端开发人员定义的等)来计算并根据计算结果来讲元素放到它该出现的位置,这个过程称之为Reflow。

    其他资料

      https://www.w3school.com.cn/htmlDOM/index.asp

      https://www.w3cschool.cn/ecmascript/

  • 相关阅读:
    winform 上传文件 (多种)
    获取Treeview中CheckBox选中项的技巧(winform)
    C#中class与struct的区别
    在SQL Server数据库中批量导入数据的四种方法
    小东西WinForm的等待窗口
    查询及删除重复记录的方法
    一些算法的复习和整理,争取每天一个算法
    POJ 2965 The Pilots Brothers' refrigerator
    HDU 1492 The number of divisors(约数) about Humble Numbers
    HDU 1495 非常可乐
  • 原文地址:https://www.cnblogs.com/songgj/p/11298859.html
Copyright © 2020-2023  润新知