dom | 易学教程

如何设计 Web App 应用架构？「两分钟了解 IOING」

阅读更多关于如何设计 Web App 应用架构？「两分钟了解 IOING」

IOING 在做些什么？ IOING 在你的代码和浏览器之间架设了一个中间解释层，该解释层提供了一套新的语法来填补浏览器所不具备的能力。 SPA 开发痛点开发一个 SPA 应用的痛点是不同模块页面的状态保存，当从一个页面跳转到另一个页面的时候窗口的所有状态都将被清空重载，历史页面与当前页面将不产生任何联系，这个过程是一个拆毁重建的过程，如果你要回到历史同样只能再次拆毁重建，并且在这个过程中不可避免的出现加载期的窗口白屏，显然这样的丑陋效果不符合一个高贵 App 的设定，但正因这种方式前后页面不共存的简单特性也使得开发逻辑变得简单，开发者只需考虑单个页面的逻辑即可，而每一次新页面的加载都能将之前页面进行完全释放，完全不需要担心高耦合和内存无法完全释放的问题，这也算是传统技术的优点，虽然简单粗暴，但是它很管用。那到底有没有两全其美的办法呢？传统模式带来的挑战和 SPA 应用不同的是多页面应用往往相对要变得简单，页面与页面之间不需要有复杂的数据交换，也无需保存页面历史状态，因此使用传统技术最适合不过了。而 SPA 应用则要协调页面间的关系，它的每一个模块都可能是联动的，而且需要保持窗口的数据状态，因而催生了另一个技术的流行，即通过使用 Ajax 和模版将新模块内容载入到当前页面，但这也导致新载入模块的脚本和 DOM 树内容在主文档下不断堆积，且在不需要时也无法将其很好移除和释放

html dom SetInterVal()

阅读更多关于 html dom SetInterVal()

HTML DOM setInterval() 方法 HTML DOM Window 对象定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法 setInterval(code,millisec[,"lang"]) 参数描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。返回值一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。实例 <html> <body> <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t } </script> </form> <button

js知识点小结

阅读更多关于 js知识点小结

文章目录 1、原始值和引用值类型及区别 2、判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor 3、类数组与数组的区别与转换 4、数组的常见API 5、bind、call、apply的区别 6、new的原理 7、如何正确判断this（区别箭头函数） 8、严格模式与非严格模式的区别 9、原型和原型链 10、prototype与__proto__的关系与区别 11、继承的实现方式及比较 12、作用域和作用域链、执行上下文 13、闭包及其作用 14、深拷贝与浅拷贝 15、防抖和节流 16、Js事件绑定时，函数名加括号和不加括号区别 17、DOM常见的操作方式 18、 Array.sort()方法与实现机制 19、 Ajax的请求过程 20、JS的垃圾回收机制 21、JS中的String、Array和Math方法 22、addEventListener(DOM2级事件处理程序)和onClick()(DOM0级事件处理程序)的区别 23、立即执行函数 24、整个HTML解析过程与JS脚本解析和执行顺序 25、new和Object.create的区别 26、DOM的location对象 27、浏览器从输入URL到页面渲染的整个流程 28、跨域、同源策略及跨域实现方式和原理 29、浏览器的回流（Reflow

Vue面试题

阅读更多关于 Vue面试题

1.Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API； Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。 2.什么是 mvvm？ MVC MVP MVVM MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 3.简述Vue的响应式原理当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖

JavaScript--浅谈DOM操作

阅读更多关于 JavaScript--浅谈DOM操作

JavaScript之浅谈DOM操作 1.理解DOM：　　 DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。　　怎么说，我从两个角度理解：对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。　　所以说，有了DOM，在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点，触摸Html每寸肌肤。（咳。。。） 2.介绍Html的DOM树：说明：html标签通过浏览器的解析后才会形成dom树，此后HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，JavaScript都能通过dom的提供的编程接口操作到每个节点，去了解浏览器的渲染机制能够帮助我们了解dom。 Html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom</title> </head> <body> <div> <a href="www.baidu.com">百度</a> </div> </body> </html>

JQuery高性能优化

阅读更多关于 JQuery高性能优化

使用JQuery时，你可以使用多种选择器，选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。通常比较常用的选择器有以下几个： ID选择器 $("#id") 标签选择器 $("td") 类选择器 $(".target") 属性选择器 $("td[target='target']") 伪类选择器 $("td:hidden") 根据经验，我们应该知道这5种选择器的性能是依次下降的测试html片段： <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable"> <tr> <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td> </tr> </table> 测试结果测试方案：对每个脚本执行1w次，统计3次运行结果的平均值方案 IE6 IE7 IE8 IE9 chrome firefox opera safari $("#mytable td.target") 5150 5630 780 293 69 148 31 102 $("#mytable .target"

【jQuery】基础学习（二）DOM操作

阅读更多关于【jQuery】基础学习（二）DOM操作

【jQuery】基础学习（二）DOM操作 1. 内容操作 2. 属性操作 2.1 通用属性的操作 2.2 对Class属性的操作 3. CRUD操作 1. 内容操作 1. html ( ) : 获取 / 设置元素的标签体内容 < a > < font > 内容 < / font > < / a > -- > < font > 内容 < / font > 2. text ( ) : 获取 / 设置元素的标签体纯文本内容 < a > < font > 内容 < / font > < / a > -- > 内容 3. val ( ) ：获取 / 设置元素的value属性值例： < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < script src = "../js/jquery-3.3.1.min.js" > < / script > < script > $ ( function ( ) { // 获取myinput 的value值 var val = $ ( "#myinput" ) . val ( ) ; alert ( val ) ; // $("#myinput").val("李四"); // 获取mydiv的标签体内容 var html = $ (

JS的Dom树小结

阅读更多关于 JS的Dom树小结

一【DOM树节点】 DOM节点分为三大类：元素节点、文本节点、属性节点文本节点、属性节点，为元素节点的两个子节点；通过getElement系列方法，可以去到元素节点。二【查看节点】 1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个； 2、getElementsByName：通过Name取到一个数组，包含1到多个节点；使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length 三【查看和设置属性节点】 1、查看属性节点： getAttribute("属性名"); 2、设置属性节点： setAttribute("属性名","属性值"); 四【JS修改样式总结】 1、.className : 为元素设置一个新的class名字； div1.className = "class1"; 2、.style : 为元素设置一个新的样式，注意驼峰命名法； div1.style.backgroundColor = "red"; 3、.style.cssText : 为元素同时修改多个样式； div1.style.cssText = "width:100px;height100px;"; 五【查看节点】 1、tagName属性：获取节点的标签名； 2、innerHTML:设置或者获取节点内部的所有HTML代码； 3、innerText

DOM Nodes Adding, Deleting, Alerts

阅读更多关于 DOM Nodes Adding, Deleting, Alerts

问题 So a little lost here, I'm not sure how to approach this, I've done the HTML and CSS but not sure how to do it in JS. My HTML: <!doctype html> <html lang="en"> <head> <title> Task 1 </title> <meta charset="utf-8"> <script src="DomNodes.js"></script> <style> #output { border: blue 5px solid; padding: 10px; margin-bottom: 10px; margin-top: 10px; width: 50%; } #output p { padding:10px; border: black 1px dashed; } </style> </head> <body> <h2> TASK 3 - Creating, Appending and Deleting Nodes in the

DOM Nodes Adding, Deleting, Alerts

阅读更多关于 DOM Nodes Adding, Deleting, Alerts

订阅 dom