dom对象

什么是DOM，DOM level 1\2\3 的区别是什么： https://www.cnblogs.com/PopularProdigal/p/6506003.html DOM 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。 根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。 1级DOM 1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。 2级DOM 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展

DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 定义了访问 HTML 和 XML 文档的标准： W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM 是 Document Object Model（文档对象模型）的缩写。 DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）： 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 浏览器兼容 所有浏览器都支持DOM。各浏览器有不同程度的支持。 DOM0 当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认 为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。 DOM1 1级DOM在1998年10月份成为W3C的提议，由

1.DOM操作 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 提示：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 2.jQuery中的DOM操作 jQuery对JavaScript中的DOM操作进行了封装 样式操作 内容及Value值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操作 使用jquery操作样式 jquery.css("background","red"); jquery.css({"background":"red","font-size":"25px"}); 追加样式 $(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN); 移除样式 $(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ; 3.html( ) 和text( )方法的区别 4.表单元素 一种：

DOM方式读取XML 一、Dom初步 DOM是Document Object Model的缩写，即文档对象模型。前面说过，XML将数据组织为一颗树，所以DOM就是对这颗树的一个对象描叙。通俗的说，就是通过解析XML文档，为 XML文档在逻辑上建立一个树模型，树的节点是一个个对象。我们通过存取这些对象就能够存取XML文档的内容。 下面我们来看一个简单的例子，看看在DOM中，我们是如何来操作一个XML文档的。 这是一个XML文档，也是我们要操作的对象： <?xml version="1.0" encoding="UTF-8"?> <messages> <message>Good-bye serialization, hello Java!</message> </messages> 下面，我们需要把这个文档的内容解析到一个个的Java对象中去供程序使用，利用JAXP，我们只需几行代码就能做到这一点。首先，我们需要建立一个解析器工厂，以利用这个工厂来获得一个具体的解析器对象： DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); 我们在这里使用DocumentBuilderFacotry的目的是为了创建与具体解析器无关的程序，当DocumentBuilderFactory 类的静态方法newInstance(

目录 原生js部分 关于JQ部分 原生js部分 参考文章 js性能优化的小知识 javascript性能优化技巧 JavaScript性能优化之小知识总结 DOM编程 建议将对象进行缓存处理，特别是DOM访问是比较消耗资源的 使用DocumentFragment优化多次append 一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。 for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; document.body.appendChild(el); } //可以替换为： var frag = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); 使用一次innerHTML赋值代替构建dom元素 对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。 var frag =

目录 Vue 简介 什么是 Vue？ 优势 如何使用 Vue 常用网站 Vue 简介 渐进式 JavaScript 框架 渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。你需要用它的什么组件就用什么组件，没有强主张 什么是 Vue？ 可以独立完成前后端分离式 web 项目的 JavaScript 框架 前后端不分离： 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需要的数据，不在渲染 HTML 页面，不再控制前端效果 至于前端用户看到什么效果，从后端请求的数据如何加载到前端，都是由前端自己决定，网页有网页的处理方式，App 有 App 的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可 为什么要学习 Vue ？ 前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级） Vue一手文档是中文、中文API（低学习成本） 实现前后台分离开发，节约开发成本 special -- 特点 虚拟DOM 数据的双向绑定 单页面应用 数据驱动 优势 有指令（分支结构，循环结构...），复用页面结构等 有实例成员（过滤器，监听）

vue的生命周期很重要，以前觉得会用就行，但是知其所以然能让学习事半功倍，今天详细整理了一下，重在理解记忆，明白生命周期就了解了vue的执行过程，以后用着再补充吧 vue生命周期分三个阶段 1.创建阶段（执行一次） 创建实例前：beforeCreated（组件实例化刚被创建，还没实例化之前，执行一些初始化操作） 创建实例后：created（这是最早拿到data和methods的钩子函数 dom还未被加载，页面还没展示，可以发起Ajax（异步）请求） 挂载前：beforeMount（模板：这里是#app里的内容，1.如果是组件的话就是template里的内容，2.如果没有组件，则将外部的HTML作为模板编译（template中的模板优先级高于outer HTML的优先级）） 模板里的dom节点被编译成虚拟的dom（js对象）在这里已经编译成功了 虚拟dom并没有渲染成真实的dom（{{msg}}）） 挂载后：mounted （把上述虚拟的dom变成真实的dom，并挂载在页面上，（hello world）这个时候可以拿到虚拟dom的上节点 这是最早可以拿到dom节点然后进行操作的钩子函数） 2.运行阶段（当data发生变化时触发 执行0次和无数次） 更新前：beforeUpdate（真实的dom更新之前，这个时候数据已经发生了变化，我们能拿到变化后的数据

一、js HTML DOM （一）DOM简介 1.通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树： HTML DOM 是： • HTML 的标准对象模型 • HTML 的标准编程接口 • W3C 标准 W3C DOM 标准被分为 3 个不同的部分： ·Core DOM - 所有文档类型的标准模型 ·XML DOM - XML 文档的标准模型 ·HTML DOM - HTML 文档的标准模型 总之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。 2. 创建动态 HTML DOM一般用法 • 改变 HTML 元素的内容 • 改变 HTML 元素的样式（CSS） • 对 HTML DOM 事件作出反应 • 添加和删除 HTML 元素 3. javascript 有三部分构成，ECMAScript，DOM和BOM （二）DOM方法 1.在 DOM 中，所有 HTML 元素都被定义为对象。 HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。 HTML DOM 属性是您能够设置或改变的 HTML 元素的值。 document.getElementById("demo")

属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取，自定义属性不行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var input=document.querySelector("input"); console.log(input.type);//text console.log(input.value);//txt console.log(input.a);//undefined console.log(input.title);//"" }); </script> </head> <body> <input type="text" value="txt" a="b"> </body> </html> .attributes 返回类数组，获取所有属性，包括自定义属性和固有属性 如果定义了同名属性，后面的属性会被忽略 如果自定义属性时出现了大写

节点查找方法 document.getElementById() 前面必须是document document.getElementsByName() 前面必须是document ele.getElementsByTagName() 前面元素不限 ele.getElementsByClassName() 前面元素不限 querySelector() querySelectorAll() .tagName 元素名称 在低版本IE中，document.getElementById() 存在bug 用来获取id或者name为指定值的元素 如果某个元素的name属性值和另一个元素的id属性值相同 会根据顺序选取排在前面的元素 识别IE浏览器：在IE浏览器中，\V会解析成V；其他浏览器中，\V为垂直制表符（相当于空格） !+"\v1" 在IE中：!+"\v1"=!+"v1"=!NaN=true；其他浏览器中：!+"\v1"=!+" 1"=!1=false document.all是页面内所有元素的集合 document.all(0) 获取第一个元素 document.all[0] 获取第一个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body