DOM

2022-12-21 0 784

1.甚么是DOM?

他们都晓得,能透过JavaScript对HTML页面展开修正,能透过导入CSS文档加进页面的式样。但,你与否考虑过它是怎样对HTML页面展开操作形式的。标准答案是DOM。

DOM,即文档第一类数学模型。它是HTML的一类态射内部结构。

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> </head> <body> <h1>Hello, world!</h1> <p>How are you?</p> </body> </html>
DOM

上图依次是HTML内部结构和DOM内部结构。他们能看见,DOM内部结构是HTML的抽象化表达形式。那些抽象化的内部结构点,是他们常说的DOM结点。JavaScript和CSS是透过那些结点,来操作形式DOM进而隐性操作形式HTML。

2.DOM的PG

DOM有1级、2级、3级共3个等级。

、结点和竹节式样表(CSS)的全力支持。3级,透过导入标准化形式写入和留存文档格式和文档格式校正形式对DOM展开更进一步扩充。DOM3包涵两个名叫“DOM写入与留存”的新组件。

3.DOM和页面呈现出

他们晓得页面的展现出是透过应用程序的图形发动机组件同时实现的。基本上操作过程为:

导出HTML聚合DOM树导出式样紧密结合聚合Render树排序Render树的结点重要信息,展开产业布局导出应用程序图形

透过以内的操作过程他们晓得,页面呈现出的是历经各式各样处置的Render树,而并非他们所期许的DOM树。也是说,DOM树只不过和Render树,并并非相异的亲密关系,比如说,假如结点为display:none,在DOM树中,那个结点是存有的,但在Render树中是不存有的。

4.交互式DOM的一些了解

他们现在晓得了,页面的呈现出要对DOM树展开式样的紧密结合和产业布局的导出。所以,当他们透过JavaScript对DOM展开操作形式,比如说增删修正结点、修正尺寸式样等等,DOM树都要展开产业布局的再次导出,然后再图形。所以,DOM的操作形式是很慢的,因此应该减少DOM操作形式。那么他们能使用甚么形式减少DOM操作形式呢?标准答案正是交互式DOM。

交互式DOM是透过JavaScript创建的DOM内部结构,比如说他们常用createElement,appendChild等形式增加结点。当他们需要增加两个复杂的DOM内部结构时,他们能透过JavaScript先将复杂的内部结构创建,然后一起图形。那个透过JavaScript创建的内部结构是交互式DOM。综上所述,交互式DOM存有的意义是减少DOM的操作形式,这样能使性能优化。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务