202208-11 HTML DOM setInterval和clearInterval方法案例详解 在javascript编程中,setInterval可以帮助我们实现一个定时器的功能,能够让我们定时执行某一项操作,如果不需要继续执行了,我们只需要调用clearInterval函数,清除定时器即可。这里要重点说的是清除定时器的时机,我们一般是需要进行一个条件判断,比如varcount=5,我们定时执行count--操作,当count==0的时候,清除定时器,一般情况下,我们的代码是这样写的。这段代码,逻辑上没有什么问题, 就是当count==0的时候,我们... 继续阅读 >
202207-11 JavaScript中BOM和DOM详解 目录BOM(浏览器对象模型)1.window获取浏览器c窗口尺寸2.screen获取电脑屏幕大小3.window开启关闭窗口4.浏览器事件5.location 6.history7.navigator获取浏览器相关信息8.弹窗DOM(文档对象模型)DOM分类DOM对象Document文档对象element文档对象DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法,封装工具BOM(浏览器对象模型)所有浏览器都支持window对象,他表示浏览器窗口。所有... 继续阅读 >
202109-30 react中的DOM操作实现 目录前面的话使用场景ref【HTML元素】【类组件】【函数式组件】【对父组件暴露DOM节点】非受控组件【默认值】ReactDOM【render()】【unmountComponentAtNode()】【findDOMNode()】新ref前面的话某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是React组件实例,也可以是DOM元素。这时就要用到refs来操作DOM使用场景下面是几个适合使用refs的情况1、处理焦点、文本选择或媒体控制2、触发强制动... 继续阅读 >
202104-25 详解react应用中的DOM DIFF算法 前言对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了。然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的VirtualDOM技术,也可称作虚拟DOM。所以,到底什么是VirtualDOM?两大热门框架全部使用VirtualDOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOMDIFF算法的牛逼之处。什么是VirtualDOM?如字面意思所... 继续阅读 >
202102-21 JavaScript Dom实现轮播图原理和实例 想要制作一个轮播图我们要先弄清楚他的原理,如何能让图片自右向左滑动?让我们想一想生活中有没有类似的东西,比如电影胶片。我们可以创建一个块作为投影区,创建一个列表作为底片并使其向左移动,达到轮播图效果。创建一个块和列表创建一个块作为总的容器和显示区域。<divid="out"><ulid="imgList"><li><imgsrc="pto/many.jpg"></li><li><imgsrc="pto/hello.jpg"></li><li><imgsrc="pto/timg.jpg"></li><li><imgsr... 继续阅读 >
202010-20 DOM解析XML报错Content is not allowed in prolog解决方案详解 报错内容为:Contentisnotallowedinprolog.Nestedexception:Contentisnotallowedinprolog网上所述总结来说就是解析内容内包含BOM。这个标记是看不到的,流里面有这个标记而已。BOM:ByteOrderMark,中文名字节顺序标记。UCS规范建议在传输字节流前,先传输BOM来判断字节顺序。其实UTF-8是不需要用BOM来表明字节顺序的,但是可以用BOM来表明编码方式。BOM的UTF-8编码是EFBBBF,所以呢,如果接受者收到EFBBBF开... 继续阅读 >
202010-16 JS如何操作DOM基于表格动态展示数据 公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示我知道有一些插件可以做,但问题是我找的那个插件发现动态更新数据时IE内存一直累积,最后会造成崩溃现象使用别人的插件说起来是效果好一些,功能多一些,但是需要的JS和复杂的逻辑,一旦出问题你很难去处理它我也赶不上再去研究它,我直接手工写一个算了,虽然没有多好的效果,没有额外的功能,但是实现动态表格数据刷新,还是能充分满足要求的!先把代码... 继续阅读 >
202010-15 基于javascript原生判断DOM是否加载完毕 readyStatedocument.readyState返回当前文档的状态,属性如下:uninitialized还未开始加载loading加载中interactive已加载,文档与用户可以开始交互complete加载完成DOMContentLoaded当DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flashonload当onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了根据执行时DOM是否已经装载完毕来决定是对回调函数进行同步... 继续阅读 >
202010-10 vue 虚拟DOM的原理 为什么需要虚拟DOM?如果对前端工作进行抽象的话,主要就是维护状态和更新视图,而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费。在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,... 继续阅读 >
202010-10 Java如何基于DOM解析xml文件 一、Java解析xml、解析xml四种方法、DOM、SAX、JDOM、DOM4j、XPath此文针对其中的DOM方法具体展开介绍及代码分析sax、dom是两种对xml文档进行解析的方法(没有具体实现,只是接口),所以只有它们是无法解析xml文档的;jaxp只是api,它进一步封装了sax、dom两种接口,并且提供了DomcumentBuilderFactory/DomcumentBuilder和SAXParserFactory/SAXParser(默认使用xerces解释器)。如果是嵌入式的情况下建议使用sax方法进行解析,因为... 继续阅读 >
202010-08 Vue 解决通过this.$refs来获取DOM或者组件报错问题 1.关于this.$refs的使用场景如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素<pref="p">hello</p><!--this.$refs.p指向该DOM元素-->如果ref属性加在组件上,那么this.$refs.name指向该组件实例<child-componentref="child"></child-component><!--this.$refs.child指向该组件-->2.为什么有时候通过this.$refs.name来获取会报错?一个比较常见的场景:在一个弹窗打开的时候立刻通过this.$refs来获取内容就会... 继续阅读 >
202010-08 解决vue页面渲染但dom没渲染的操作 我就废话不多说了,大家还是直接看代码吧~this.$nextTick(()=>{$("select[name='ddlCostCenter']").select2({language:"zh-CN"});});补充知识:vue+Echarts动态数据已经赋值,但是无法渲染页面的问题最近用vue+Echarts想做一个饼状统计图,但是数据明明已经绑定完毕,但是页面渲染一直没有效果,最终才发现问题所在,自己还是个新手,主要对vue还不是很熟悉。废话不说,接下来... 继续阅读 >
202010-08 jQuery 实现DOM元素拖拽交换位置的实例代码 实现步骤1.html+bootstrap布局画3个面板。注:面板样式position属性必须是绝对位置或者相对位置。2.监听面板的的mousedown事件。记录当前对应面板的位置target_index,设置面板透明拖动。3.监听当前被拖动的面板的mousemove事件。根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置。4.监听当前被拖动的面板的mouseup事件。当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchan... 继续阅读 >
202010-08 JavaScript DOM常用操作代码汇总 1.理解DOM:DOM(DocumentObjectModel,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口。怎么说,我从两个角度理解:对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙。所以说,有了DOM,在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点,触... 继续阅读 >
202009-28 js HTML DOM EventListener功能与用法实例分析 本文实例讲述了jsHTMLDOMEventListener功能与用法。分享给大家供大家参考,具体如下:DOMEventListener用于向指定元素添加事件句柄。在用户点击按钮时触发监听事件:document.getElementById('myBtn').addEventListener('click',displayDate);addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个事件句柄。<script>varx=document.getElementById("myBtn");x.addEventListener("mouseo... 继续阅读 >
202009-24 JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析 本文实例讲述了JavaScriptHTMLDOM元素(节点)新增,编辑,删除操作。分享给大家供大家参考,具体如下:createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChildcreateElement以下代码是用于创建<p>元素:varpara=document.createElement("p");createTextNode为<p>元素添加文本节点:varnode=document.createTextNode("这是一个新的段落。");appendChild(它用于添加新元素到尾部)将文... 继续阅读 >