dom对象 | 易学教程

文档碎片及xml讲解

阅读更多关于文档碎片及xml讲解

　　1.将数据渲染到页面的几种方式　　　　1.字符串拼接　　　　2.dom循环　　　　3.模板　　　　4.文档碎片　　字符串拼接：　　优势：只进行一次dom回流　　缺点：原有的dom事件会消失　　案例分析：原有list中有3个li，并且每个li身上都有一个onmouseover的事件，但是为什么用字符串拼接，事件会消失？　　　　解析：原因在于innerHTML这个属性，这个属性是返回或设置dom中的内容，以字符串形式返回，而onmouse这些dom元素对象身上的，所以这些onmouse系列的属性就会消失；　　注意：所有的数据类型只要跟字符串发生拼接，最后都会变成字符串　　dom循环：　　优势：原有dom身上的事件不会丢失，不影响dom 　　缺点：dom回流次数过多，严重影响网页性能　　dom回流：每当对dom元素进行增删改的时候，浏览器就会重新加载一次，把新的结果渲染出来；　　模板：　　模板的本质就是字符串，只不过将html和js进行分离　　文档碎片：　　优点：既不能影响原有的dom属性，也只回流一次　　我们只需要通过document对象上的createDocumentFragment()　　创建文档碎片（相当于一个容器标签，并不会对dom创建的结构造成影响，只需把dom创建的东西放这个里面）　　案例：　　　　<!DOCTYPE html>

Vue初学者需要掌握的知识点及案例

阅读更多关于 Vue初学者需要掌握的知识点及案例

什么是Vue 前端框架的三大马车（按时间顺序）： angular 谷歌公司 m(数据) v(视图) c(控制器) 双向数据绑定 react facebook 视图层的框架view 虚拟dom vue 尤玉溪双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架入门难度最低为什么要学习Vue 高效运行效率高采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高开发效率高采用了组件化开发将开发者的精力从dom操作解放出来，转移到数据操作上 dom操作极其影响效率，是制约效率的关键，要减少dom 修改内存中的数据（变量）消耗的资源远远小于dom操作虚拟dom 就是一个内存中的一个对象该对象有一个特点和dom有相同的结构爱上Vue 一旦熟悉，就情不自禁的用Vue,会抛弃原来二阶段的写法（直接操作dom） Vue的实例化 ① /*1、下载引入 2、找到一个dom元素这个dom元素要被vue控制 3、在js中实例化Vue*/ < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 1 vue的实例化 < / title > < script src = '../vue

JAVA常用的XML解析方法

阅读更多关于 JAVA常用的XML解析方法

转并总结自（ java xml ） JAVA常用的解析xml的方法有四种，分别是DOM,JAX,JDOM,DOM4j xml文件＜?xml version="1.0" encoding="GB2312"?＞＜RESULT＞＜VALUE＞　　＜NO＞1000001＜/NO＞　　＜ADDR＞达达木图收费站＜/ADDR＞＜/VALUE＞＜VALUE＞　　＜NO＞1000002＜/NO＞　　＜ADDR＞巴彦岱收费站＜/ADDR＞＜/VALUE＞＜/RESULT＞ 1）DOM（JAXP Crimson解析器） DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。DOM以及广义的基于树的处理具有几个优点。首先，由于树在内存中是持久的，因此可以修改它以便应用程序能对数据和结构作出更改。它还可以在任何时候在树中上下导航，而不是像SAX那样是一次性的处理。DOM使用起来也要简单得多。所以，针对比较简单的，并且跨平台的，可以优先选用dom 　　下面是方法 import java.io.*; import java.util.*; import

jquery

阅读更多关于 jquery

dom对象:原生js获取的dom对象 jq对象:通过jquery的$()获取的对象 $(dom对象):dom对象转化成jq对象 jq对象[index]:jq对象转化成dom对象 ---获取--------------------------------------- text() //获取对象节点信息,传参则替换 html() //获取对象节点信息,能够解析标签 val() //获取表单元素的value，参数则是设置 index() //获取该jq对象的index ------------------------------------------- css() ----获取如name是 width:200px css(name) //获取value是200px ----设置 css(name,value) //设置单个样式 css({name:value, ...}) //多个 ------------------------------------------- Class操作 addClass(name1 name2) //添加class removeClass(name1 name2) //删除class hasClass(name1) //判断class返回true或false toggleClass(name1) //切换class，有则删，无则加 ---------

前端基础之BOM和DOM

阅读更多关于前端基础之BOM和DOM

前戏 JavaScript分为 ECMAScript，DOM，BOM。　　BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。　　DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。　　Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 BOM window对象看上面的例子你会发现，name直接封装到了window对象上，了解一下就可以了。　　所有浏览器都支持 window 对象。它表示浏览器窗口。　　*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象（了解）。　　*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象（了解）。　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。　　全局变量是 window 对象的属性。全局函数是 window

前端基础之BOM和DOM

阅读更多关于前端基础之BOM和DOM

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 window对象所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。一些常用的Window方法： window.innerHeight

DOM&&BOM

阅读更多关于 DOM&&BOM

DOM:DOM 全称是 Document Object Model，也就是文档对象模型。DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 1、DOM起源（recourse）:在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也难觅踪影了。 2、DOM方法：可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。 3、DOM内容：来自于w3school 1、通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。 2、通过 HTML DOM，您能够访问 HTML 对象的样式对象。 3、HTML

Vue.js——学习笔记（一）

阅读更多关于 Vue.js——学习笔记（一）

Vue-自学笔记 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。总之一句话：有问题，查官网。本笔记只适合学习复习使用。如果学习话，请自行查阅 Vue官网。本笔记来源于：自学过程，参考Vue官方文档。——大娃基础安装 https://cn.vuejs.org/v2/guide/installation.html 相关版本介绍 1. 直接引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2. CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> 3. 模块化构建 <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script> 起步声明式渲染

Vue 技术栈快速学习前端面试

阅读更多关于 Vue 技术栈快速学习前端面试

起因一直想着要写一定深度的文章，然后觉得学习Vue是一个好的过程，本文将带你走进Vue的世界，支持国内框架！如果看完本文还不懂Vue是什么的小伙伴，可以随便打博主！（斜眼笑），前方高能，本文可能篇幅比较长，建议收藏在闲暇时间学习，也欢迎伙伴们讨论留言学习！ Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别提问！你真的懂前端框架（framework ）与库（library）怎么区别吗？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 Framework 框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码框架规定了自己的编程方式，是一套完整的解决方案使用框架的时候，由框架控制一切，我们只需要按照规则写代码主要区别 You call Library, Framework calls you 核心点：谁起到主导作用（控制反转）框架中控制整个流程的是框架使用库，由开发人员决定如何调用库中提供的方法（辅助）好莱坞原则：Don’t call

Virtual DOM 是React的精髓所在

阅读更多关于 Virtual DOM 是React的精髓所在

Virtual DOM 毫无疑问是 React 的精髓。可能很多人包括我看完官方文档之后对Virtual DOM的理解就是：它通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。 Virtual DOM 最大的意义绝不是提升性能，而是他对DOM进行了一层抽象。当我们在浏览器中使用 React的时候，感觉不是特别明显，毕竟我们写的DOM标签跟原生的没什么区别，并且最终都被渲染成了DOM。但是react native 的推出已经完全说明了 Virtual DOM 的颠覆性意义：它抽象了DOM的具体实现。在浏览器中，Virtual DOM最终编译成了DOM，但是在 iOS中，Virtual DOM却完全可以编译成 oc 中的组件，甚至在安卓、windows、mac osx 中都完全可以编译成对应的UI组件。在没有Virtual DOM之前，我们的代码中JS逻辑和UI是完全耦合的，不具有任何可移植性。使用了Virtual DOM之后我们的代码编程这样了：注意上图分为三个部分： 1，其中蓝色部分是JS业务逻辑，完全可以借助Node移植到任意平台上。 2，其中红色部分是 Virtual DOM

订阅 dom对象