DOM操作要点

最新推荐文章于 2023-12-04 20:07:06 发布
最新推荐文章于 2023-12-04 20:07:06 发布
阅读量395 收藏
点赞数
分类专栏： DOM;JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zmyzmy1111/article/details/70550252
版权
1、 能放到DOM操作之外的操作就放到外面,DOM操作要尽量少.
2、大范围操作先把容器隐藏,在其中操作完成后,再显示
这是一个我刚接触前端时遇到的一个优化办法,当时很不理解为什么display=none之后操作就算是性能优化了.但是数据证明如此渲染确实快了很多,这个的原理要涉及到浏览器加载和渲染的原理,简单说就是隐藏的元素其中不会产生reflow.这个例子我就不写了,很简单.
3、样式操作不要注意修改属性,直接替换class
4、用变量保存DOM对象而不是多次获取,同时减少操作DOM属性的次数
ZMY_0311
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM基础操作
LKAK117的博客
08-01 555
DOM:document objectmodel文档对象模型
DOM 节点操作
php_martin的博客
08-13 44
DOM 节点操作
JavaScript—HTML—DOM操作注意事项
DAIJZ12138的博客
04-02 258
jQuery对象是数组对象 1.如何使用使用 HTML DOM 来分配事件 错误的写法： <script> document.getElementById("myBtn").onclick=function displayDate(){ //这里写法错了，不能有displayDate。 document.getElementById("demo").in...
关于DOM的一些注意事项
qq_52840130的博客
12-04 35
/ 注意点：以上的操作里面获取到的节点包含所有类型的节点（element、comment、text、 attribute...）// nodeValue 节点的值，并不是所有的节点都能返回一个值，有些有，有些没有。// nodeType 节点类型，都是以一个数字的形式返回，表示某个节点类型。// nodeName 节点名称，元素节点的名称返回的是大写的字母（重点）// 访问所有的子元素节点，结果是一个伪数组。// 访问所有的节点，结果是一个伪数组。// 访问最后一个元素节点。
解析 DOM 模板时的注意事项
Sandrahh的博客
07-06 197
解析 DOM 模板时的注意事项 有些 HTML 元素，诸如 、、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 、 和 ，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如： <table> <blog-post-row></blog-post-row> </table> 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我
使用jQuery操作 DOM使用方法及注意事项
梦寐的博客
09-13 630
DOM操作分类 DOM操作分为三类：     DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()     HTML-DOM：用于处理HTML文档，如document.forms     CSS-DOM：用于操作CSS，如element.style.color="green" jQuery中的DOM操作 jQuery对JavaScript中的DOM...
java DOM 注意事项
sunyimaying1的专栏
03-11 325
1.  W3C把标签内的文本部分也定义成一个Node2. Element对象代表的是XML文档中的标签元素，继承于Node，亦是Node的最主要的子对象3.  Attr实际上是包含在Element中的，它并不能被看作是Element的子对象，因而在DOM中Attr并不是DOM树的一部分，所以Node中的  getparentNode()，getpreviousSibli
javascript操作DOM对象的注意事项及使用方法和属性
梦寐的博客
09-02 433
操作DOM DOM：Document Object Model（文档对象模型） 访问节点 使用getElement系列方法访问指定节点     getElementById()、getElementsByName()、    getElementsByTagName() 根据层次关系访问节点 节点属性 parentNode  返回节点的父节点 childNodes  返回子节点集合，chi...
锋利的jQuery jQuery中的DOM操作
10-29
锋利的jQuery 要点归纳（二）上 jQuery中的DOM操作，需要的朋友可以参考下。
锋利的jQuery 要点归纳（二） jQuery中的DOM操作（下）
10-29
锋利的jQuery 要点归纳（二） jQuery中的DOM操作（下）
Dom技术要点
02-20
学习javascript的好资料，能够很好的学习dom操作
dom4j基础知识要点
06-14
【dom4j基础知识要点】 一、dom4j 介绍 dom4j 是一个强大的 Java XML API，被广泛应用于处理XML文件，因其高性能、功能全面和易用性而备受赞誉。作为开源软件，它在SourceForge上可以免费获取。在性能、功能和易用...
JS里的DOM操作注意点
weixin_30254435的博客
10-29 127
1.Windows对象：浏览器窗口。 2.document：页面文件 3.通用的事件： onclick 单击； onmousemove 鼠标移动；onmouseout 鼠标移出； onmouseover 鼠标移上； 4.window.open 第一部分：写要打开的页面地址第二部分：打开的方式，_blank 是在新窗口打开 _self第三部分：控制打开的窗口，可以写多个，用空格隔开...
关于DOM操作CSS的注意点
qq_41633396的博客
06-14 93
DOM在利用style设置和读取样式的时候，比如border，width，这个都是设置给内联样式的，读取的话，也是从内联样式中读取的，但是除了从内敛样式中读取外，我们还可以借助getComputedStyle（）方法和元素名(DOM对象的元素名).currentStyle.样式名来读取元素的样式，但是他们要考虑浏览器的兼容性问题，具体请看“怎么解决属性或者是方法在浏览器中的兼容性问题” 另外，还有一点值得注意的是，我们在读取元素的样式的时候，读取的往往是数值，比如：width:100px，但是，我们读取的是
XML 问题: 超越 DOM
e-Commerce Development Notes
03-14 858
XML 问题: 超越 DOM 轻松使用 DOM 的技巧和诀窍
小程序长列表显示：dom元素超出限制，如何解决空屏问题？
limpid_changli的博客
04-22 1287
用于解决长列表dom渲染溢出造成的空白无法显示问题。 思路：借助scroll-view的scroll事件的事件对象中的scrollTop的值判断当前用户可视的第一个元素的index，用v-if控制当前可视元素的前10个item和后10个item渲染，其他的不渲染，达到局部渲染的效果，从而解决dom溢出的问题。item的作用是保留高度，使滚动条保持正常位置。 前提条件是list里面的item的height要一样，才能计算出当前可视的元素的index。 示意图如下： 1)不分页情况 html结构如下： &
DOM要点总结
tgcxmxyz1011的专栏
10-24 440
2015-10-24上午 1.文档对象模型是树形结构，节点类型分为三类：元素节点、文本节点和属性节点。 2.网页的HTML的元素中，属性id的值是唯一的。 3.元素节点有innerHTML属性，它非W3C规范，但各种浏览器都支持，该属性是元素（标签）中的文本（文本中可以有标签），可以赋值。 4.获取节点的方法有：getElementById、getElementsByTagName、get
Hardware Engineering
最新发布
07-06
Hardware Engineering Resources This document provides a curated list of resources for learning about hardware engineering, including books, online courses, websites, professional organizations, and online communities. Whether you're a beginner or looking to deepen your knowledge, these resources cover a wide range of topics in hardware engineering.
软件测试面试大全2022
03-23
在软件测试面试中，关于 Selenium 技术的考察是常见且关键的部分，尤其是在 2022 年。以下是一些重要的知识点，可以...同时，对 Selenium 浏览器驱动的理解，DOM 操作，以及性能优化策略也是面试官可能关注的重要部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值