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，有则删，无则加 ---------

javascript操作DOM的方法与属性

阅读更多关于 javascript操作DOM的方法与属性

/*--> */ /*--> */ 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构。将HTML代码分解为DOM节点层次图: HTML 文档可以说由节点构成的集合，DOM节点有: 1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。 2. 文本节点: 向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 3. 属性节点: 元素属性，如<a>标签的链接属性href="http://www.baidu.com"。节点属性: 属性说明 nodeName　　节点的名称 nodeType　　　节点的类型 nodeValue　　节点的当前值点击查看详细遍历节点树: 属性说明 childNodes 所有子节点 firstChild 第一个子节点 lastChild 最后一个子节点 parentNode 父节点 nextSibling 下一个节点（同一层级中） previousSibling 上一个节点（同一层级中） DOM操作: 属性说明 creteElement(element) 创建一个新的元素节点 createTextNode() 创建一个新的文本节点 appendChild(newnode)

DOM操作方法、属性

阅读更多关于 DOM操作方法、属性

话不多说直接上demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="container" id="box"><span>我是一个div元素1</span><p>hello</p></div> 9 <script> 10 var divNode = document.getElementsByClassName("container")[0]; 11 /*节点操作*/ 12 /*获取元素节点*/ 13 console.log(divNode.nodeType) //1 14 console.log(divNode.nodeName) //DIV 15 console.log(divNode.nodeValue) //null 16 17 /*获取属性节点*/ 18 console.log(divNode.attributes[1].nodeName) //id 19 console.log(divNode.attributes[0].nodeValue); //container 20 console.log(divNode.attributes[0]); /

前端基础之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

Comparing DOM objects in jQuery

阅读更多关于 Comparing DOM objects in jQuery

问题 I have looked through the other SO posts that seem to be of the same question but they are not. I have the following: <table> <tr id="first_row"> <td><span id="first_span">item1</span></td> <td><span>item2</span></td> </tr> <tr id="second_row"> <td><span>item1</span></td> <td><span>item2</span></td> </tr> </table> and jQuery(function() { var $a = $("#first_row"); var $b = $("#first_span").parents("tr"); var $c = $("#second_row"); }); $a and $b are two different jQuery objects but referring to

订阅 dom