dom | 易学教程

前端开发中的设计模式

阅读更多关于前端开发中的设计模式

1、MVC设计模式 MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程：（1）用户和应用产生交互。（2）控制器的事件处理器被触发。（3）控制器从模型中请求数据，并将其交给视图。（4）视图将数据呈现给用户。 V层是视图层，控制界面显示，将界面与数据连接。M层存放数据，处理逻辑，比如处理从数据库调用的数据，还有业务逻辑处理。C层用于连接M和V，Controller 负责显示界面、响应用户的操作以及与 Model 交互，比如操作DOM、对事件的监听。这就导致了Controller和 View 紧耦合、逻辑复杂，难以维护。 2、MVVM设计模式 MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。由此和view层分开来，只是注重数据的改动即可。 MVVM设计模式中最重要的就是实现了View和Model的自动同步，所以可以不用频繁地手动操作DOM元素。比如说Vue框架，Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

Vue | 虚拟DOM

阅读更多关于 Vue | 虚拟DOM

*/ /*--> */ 一、真实DOM和其解析流程浏览器渲染引擎工作流程，大致可分为5步：创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有 attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。 DOM树的构建过程：构建DOM树是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。 CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

阅读更多关于 Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一、三种获取页面元素的方式： getElementById:通过id来获取 <body> <input type="text" value="请输入一个值：" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementById("txt");//获取id为txt的页面元素 console.log(txt); txt.value="haha";//重新给id为txt的文本输入框的value赋值 </script> </body> getElementByTagName:通过标签名来获取 <body> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <script> var inputs=document.getElementsByTagName("input");//获取标签名为input所有页面元素。 console.log

动态创建dom元素

阅读更多关于动态创建dom元素

效果图如上所示：思维nav:就相当于qq空间发表动态（说说），在输入框里输入内容，点击提交（发表），内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app，大家可以随便想象下哪些情况会遇到动态创建dom元素。代码展示如下，具体的css就不用多说，主要是写jquery 1 <body> 2 <div class="szk-newProject-header clearfix"> 3 <div class="szk-newProject-left fl"> 4 <img src="img/szk-1.png"/><a href="#">返回</a> 5 </div> 6 <div class="szk-newProject-center fl"> 7 <a href="#">新建项目</a> 8 </div> 9 <div class="szk-newProject-right fr"> 10 <a href="#"><img src="img/szk-2.png"/></a> 11 </div> 12 </div> 13 <div class="inner"> 14 <input type="text" class="shuru" placeholder="请输入文字"> 15 <div class="kong"> 16

创建DOM元素

阅读更多关于创建DOM元素

昨天感冒，一天都是昏昏沉沉的，晚上八点就休息了，一觉醒来整个神清气爽，感觉感冒好了一大截。本来今天要好好的学习的，看了一个帖子，实在挪不开眼睛，所以通常五点开始的学习，拖到了六点多。好在今年下雨，晚上不用跑步去了，嘻嘻，挺好！ createElement（标签名）创建一个节点 appendChild（节点）追加一个节点插入节点（节点，原有节点）在已有节点前面插入删除DOM元素 removeChild（节点）删除一个节点文档碎片document.createDocumentFragment（）在IE6以下可以提高效率，在现在常用到的浏览器当中，不怎么影响运行性能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var otxt=document.getElementById('txt1'); var obtn=document.getElementById('btn1'); var oul=document.getElementById('ul1'); obtn.onclick=function(){ var oli=document.createElement('li'); oli.innerHTML

从零开始学 Web 之 DOM（五）元素的创建

阅读更多关于从零开始学 Web 之 DOM（五）元素的创建

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新...... +------------------------------------------------------------ github： https://github.com/Daotin/Web 微信公众号： Web前端之巅博客园： http://www.cnblogs.com/lvonve/ CSDN： https://blog.csdn.net/lvonve/ +----------------------------------------------------------- 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！一、元素的创建 1、元素创建的三种方式 1.1、方式一 document.write("标签代码及内容"); 示例： <body> <input type="button" value="按钮" id="btn"> <script src="common.js"></script> <script> my$("btn").onclick = function() { document.write("<p>这是一个p标签</p>"); }; //

Build the querySelector string value of any given node in the DOM

阅读更多关于 Build the querySelector string value of any given node in the DOM

问题 I am trying to find a way to build the querySelector string of any given node. In other words - pick any node on a page - is it possible to walk up the DOM and build a string that would allow me to pass the generated string to document.querySelector and get back the node I chose? From what I can tell querySelector has a bug where you can only use nth-child once in the string. I have tried several times but so far have failed to find a solution. I want to do this in native JavaScript, not

变化侦测

阅读更多关于变化侦测

首先，说说变化侦测都有哪几种类型，一种是“拉”，一种是“推”。　　react的变化侦测属于是“拉”，就是说，当状态发生改变时，他不知道到具体哪个状态发生了改变，它只能通过一种信息传递，告诉框架，有状态可能发生了改变，此时框架会进行一个暴力对比，然后找出哪些DOM节点发生了变化，然后进行重新渲染。angular中使用的是脏检查流程，react中是使用虚拟DOM。　　接着说vue，vue的变化侦测属于“推”，就是当状态发生变化的时候，绑定状态的dom节点会马上检测到，重新渲染。这个就叫 “更细粒度”。　　后来vue2.0 对这个变化侦测做出调整，他引入了虚拟DOM，不是依赖具体DOM，而是检测每个组件，这样降低了依赖追踪消耗的内存。　　来源： https://www.cnblogs.com/wangfugui/p/12565619.html

Java数据解析之XML(原创）

阅读更多关于 Java数据解析之XML(原创）

文章大纲一、XML解析介绍二、Java中XML解析介绍三、XML解析实战四、项目源码下载一、XML解析介绍最基础的XML解析方式有DOM和SAX，DOM和SAX是与平台无关的官方解析方式，是基于事件驱动的解析方式。 1. DOM解析图解 DOM解析是直接把xml文件放入内存中，如果节点太多的话，就要考虑性能问题了。 2. SAX解析图解 SAX解析是走到哪个位置，就调用不同方法进行解析。二、Java中XML解析介绍 Java中常见解析XML的方式有DOM、SAX、DOM4J、JDOM 1. 各大框架比较 DOM 优点：（1）形成树结构，直观好理解，代码更容易编写（2）解析过程中树结构保留在内存中，方便修改缺点：（1）当XML文件较大时，对内存消耗比较大，容易影响解析性能并造成内存溢出 SAX 优点：（1）采用事件驱动模式，对内存消耗较小（2）适用于只需要处理XML中数据缺点：（1）不易编码（2）很难同时访问同一个XML中的多处不同数据 JDOM 优点：（1）是基于树的处理xml的java api,把树加载到内存中（2）速度快缺点: （1）不能处理大于内存的文档（2）不支持于DOM中相应遍历包 DOM4J 优点： dom4j有更复杂的api,所以dom4j比jdom有更大的灵活性三、XML解析实战 1. 测试的XML文件

Vue问题总结

阅读更多关于 Vue问题总结

3 月，跳不动了？>>> 1.用一个DOM元素赋值给一个data中的变量时，当这个DOM元素改变了其属性等，这个data中的变量不会被改变，导致不无得到最新状态的DOM。 this.audio = this.$refs.audio this.$refs.autio.src ='1.mp3' console.log(this.audio) //未更新状态的DOM 来源： oschina 链接： https://my.oschina.net/u/3757195/blog/3210350

订阅 dom