DOM 技术

本文深入探讨了DOM(文档对象模型)与DHTML(动态HTML)的核心技术,包括DOM的三个模型、特点及解析方式,DHTML所涉及的HTML、CSS、DOM和JavaScript等技术的综合应用,以及IE中直接以容器id代替标签的方法。同时,文章详细解释了DOM详解中的注意事项,如表格标签默认的tbody、兄弟节点获取时的文本节点问题,以及如何避免这些问题的技巧。

以下仅为个人平时学习笔记,可能有有错误的地方,希望有看到者提出来,共同讨论,谢谢!

DOM:Document Object Model 文档对象模型。
该项技术的实现,将标记型文档封装成了对象。并将该标记型文档中的所有内容(标签,属性,文本)
都封装成了对象。
这样就可以将对象中封装更多的属性和行为,我们操作这些对象。
这样就可以实现静态页面具备动态效果。

DOM 技术不断升级出现了三种模型.
DOM1模型:将html文档封装成了对象.
DOM2模型:在DOM1的基础上添加了一些新功能,比如对名称空间的解析.
DOM3:将XML文档封装成了对象.

比java本身自带解析器更好的工具DOM4J 即 DOM FOR JAVA

1.DOM的特点:是将标记型文档封装成了DOM树,也就是会将整个标记型文本加载进内存.
注意:如果该文档体积过大,会对内存进行消耗,速度很慢.

2民间组织定义了一个解析方式:SAX:
基于事件驱动的方式来解析数据.
该解析速度快,但是只能对XML文档的数据进行获取,并不能进行修改.

*******************************************************************
DHTML(动态的HTML):它不是一门语言,是多个技术的综合体简称.
这里包含的技术有:html,css,dom,javascript.

这四门技术在DHTML中的角色:
html:提供了标签用于封装成数据,它是基础,没标签什么都做不了.
css:提供了样式,可以对标签封装的内容进行演示的操作.
dom:将html文档封装成了对象,并将文档中的内容都封装成了对象,对象中定义了更多的属性和行为,
方便对对象的操作.
javascript:提供了逻辑性很强的程序设计语言,负责页面的行为.

**如果再加入一个xmlHttpRequest对象,就是AJAX(可以和服务端进行实时通讯的对象)


*****************************************************************
IE中可以直接以容器id代替标签,省略了getElementById获得容器这个步骤.

**********************DOM详解******************************

注意:
1.表格标签即使不写tbody默认也会有tbody;
2.对于兄弟节点获时,会出现空白文本节点,所以最好都要跟上对获取到的节点的判断。
又因为IE和火狐对于空白文本节点解析不同(IE:空格;火狐:回车换行),所以,最好加
上正则表达式。那么获得节点时,尽量避免使用兄弟节点。
*************************************************
一、节点类型:
1.标签型节点,类型为:1;
2.文本型节点(#text),类型为:3;
3.属性节点,类型为:2;
4.注释节点(#comment),类型为:8

********************************************************
注意:取消超链接的默认点击效果(“”时候,进入文件夹)
方式一:通过href属性的值定义“#”,这时借用了定位标记的原理,不指定具体的位置。这样就
取消了超链接的默认效果。但是会启动默认的file引擎。不够专业。
方式二:可以定义javascript:void(0);启动javascript引擎,运行一个代表什么都不做的函数:void(0)。

****************************************************************
表格时候:集合中都是存的每一行的引用.


### 虚拟DOM技术的实现原理与使用 #### 什么是虚拟DOM? 虚拟DOM是一种由JavaScript对象表示的真实DOM树结构的技术。它通过对真实DOM进行抽象,使得开发者可以更高效地管理UI的变化[^1]。 #### 虚拟DOM的实现原理 虚拟DOM的主要工作流程分为以下几个部分: 1. **构建虚拟DOM树** 使用JavaScript对象模拟真实的DOM节点及其层次关系。这些对象通常称为`VNode`(虚拟节点)。每个`VNode`都包含了对应真实DOM节点的信息,例如标签名、属性以及子节点列表[^3]。 2. **Diff算法** 当组件的状态发生改变时,会生成一棵新的虚拟DOM树。随后,通过`diff`算法计算新旧两棵树之间的差异。此过程主要关注以下几种类型的变更: - 属性修改:检测并记录哪些属性发生了增删改。 - 子节点变动:判断是否有新增、删除或者移动的情况。 - 文本内容更新:对比文本节点的内容是否一致[^1]。 3. **Patch算法** `patch`阶段负责将上述计算得到的差异实际作用于浏览器中的真实DOM上。这一环节仅针对那些确实存在差别的地方执行最小化操作,从而减少不必要的重绘和回流开销。 以下是基于以上理论的一个简单示例代码展示如何手动创建一个基础版本的虚拟DOM系统: ```javascript // 创建虚拟节点 (VNode) function createVNode(tagName, props, children) { return { tagName, props, children }; } // 渲染虚拟节点至真实 DOM function render(vnode, container) { const dom = document.createElement(vnode.tagName); if (vnode.props) { Object.keys(vnode.props).forEach(key => { dom.setAttribute(key, vnode.props[key]); }); } if (Array.isArray(vnode.children)) { vnode.children.forEach(child => { if (typeof child === 'string') { dom.appendChild(document.createTextNode(child)); } else { render(child, dom); // 递归渲染子节点 } }); } container.appendChild(dom); } ``` 这段脚本展示了最基本的虚拟DOM概念——即把复杂的HTML文档转换成易于管理和操作的数据结构形式,并最终映射回到可视界面上去呈现出来。 #### Snabbdom简介及其实现细节 Snabbdom是一个轻量级且高性能的虚拟DOM库,在其核心设计中有几个重要特性值得注意: - 它采用模块化的架构允许用户按需加载所需功能而无需引入全部依赖; - 提供了一套简洁API用于声明式的界面开发模式; - 支持高效的增量更新策略以优化性能表现[^4]。 具体来说,snabbdom通过一系列预定义好的“module”来增强base functionality之外的能力比如class manipulation、event listeners management等等都是作为独立modules存在的可以根据项目需求灵活组合使用。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值