你真的知道DOM吗(下)----(其他类型,DOM操作技术)

简介: 你真的知道DOM吗(下)----(其他类型,DOM操作技术)

前言

      DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。可以说,DOM是前端开发中最重要的一个渲染API,它决定了页面的样式结构的走向。


正文

其他类型

      本文将介绍除node, document, element以外的节点,相对比较简单而且并不常用,所以下面将比较快速地给大家罗列一下其他相当常用的相关节点的知识


Text类型

操作节点文本的方法

      文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。使用下列方法可以操作节点中的文本。

  • appendData(text):将text添加到节点的末尾
  • deleteData(offset, count):删除指定位置的count个字符
  • insertData(offset, count):在指定位置插入text
  • replaceData(offset, count, text):用text替换指定位置的count个字符
  • splitText(offset):从指定位置将当前文本节点分为两个文本节点
  • substringData(offset, count):提取从offset指定的位置开始到offset+count为止处的字符串

   除了这些方法之外,文本节点还有一个length属性,保存着节点中的字符的数目。要注意的是,在修改文本节点时还要注意,此时的字符串会经过HTML(或XML,取决于文档类型)编码。换句话说,小于号、大于号或引号将被转义。

创建文本节点

      可以使用document.createTextNode()创建新文本节点,这个方法接受一个参数—要插入节点中的文本。如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来,中间不会有空格。


规范化文本节点

      如果在一个包含两个或多个文本节点的父元素上调用normalize()方法,则会将所有文本节点合并成一个节点,结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值


Comment类型

      Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法(因为splitText()方法由TextNode类型提供),与text类型类似,也可以通过nodeValue或datashuxing来取得注释的内容。

      在IE8中,注释节点被视为标签名为“!”的元素,也就是,使用getElementByTagName()可以取得注释节点


DOM0级,DOM1级,DOM2级事件

  • DOM0级事件:0级DOM分为两种,行内事件和元素.on事件名 = 函数
  • DOM1级事件:1级DOM并没有定义事件相关的内容,所以没有所谓1级DOM事件模型
  • DOM2级事件:监听方法,有两个方法用来添加和移除事件处理程序,addEventListener()和removeEventListener(),所有DOM节点中都包含这两个方法

DocumentFragment类型

      在所有的节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源,也就是说文档片段本身永远不会成为文档树的一部分。

      那么问题来了,这个节点类型有什么用呢?

      作为“仓库”来暂时保存节点类型的操作

      多次进行节点类型的修改操作,会导致浏览器的反复渲染,而这个类型可以保存创建的列表项,然后一次性将修改加入文档,来避免重复渲染的问题


Attr类型

      特性节点,虽然它们也是节点,但是不被认为是DOM树里的一部分,使用getAttribute(),setAttribute()和removeAttribute()比操作特性节点更为方便


DOM操作技术

      对于DOM 的一些操作,相信认真看了前面章节的小伙伴已经不陌生了,这里提供几种使用DOM操作去操作页面的一些情况,供大家自己体会加深理解,大家可以自己尝试写一写以加深理解。


动态脚本

      js可以通过外部引入,也可以通过内部样式写入,同样,使用DOM操作脚本也分为这两种方式


外部引入

640.png

内部写入

640.png

动态样式

      css和js一样,可以外部引入,也可以内部写入。


外部引入

640.png

内部写入

640.png

小结

      DOM操作往往是javascript程序中开销最大的部分,而因访问NodeList导致的问题为最多。NodeList对象都是‘动态的’,这就意味着每次访问NodeList对象,都会运行一次查询。有鉴于此,最好的方法就是尽量减少DOM操作

      小伙伴们今天的学习就到这里了,如果觉得本文对你有帮助的话,欢迎转发,评论,收藏,点赞!!!

目录
相关文章
|
6月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
248 0
|
3月前
|
XML JavaScript Java
【JAVA XML 探秘】DOM、SAX、StAX:揭秘 Java 中 XML 解析技术的终极指南!
【8月更文挑战第25天】本文详细探讨了Java中三种主流的XML解析技术:DOM、SAX与StAX。DOM将XML文档转换为树状结构,便于全方位访问和修改;SAX采取事件驱动模式,适用于大型文件的顺序处理;StAX则兼具DOM和SAX的优点,支持流式处理和随机访问。文中提供了每种技术的示例代码,帮助读者理解如何在实际项目中应用这些解析方法。
164 1
|
5月前
|
XML Java 数据格式
必知的技术知识:java基础73dom4j修改xml里面的内容(网页知识)
必知的技术知识:java基础73dom4j修改xml里面的内容(网页知识)
39 1
|
5月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
60 2
JavaScript基础-DOM操作:查找、创建、修改
|
5月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
44 2
|
5月前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
37 1
|
5月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
42 1
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$("p")`、`$("#myDiv")`、`$(".myClass")`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
33 0
|
5月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
71 2
|
5月前
|
JSON JavaScript 数据格式
技术好文:tabel表格的dom操作
技术好文:tabel表格的dom操作
26 0