dom | 易学教程

JavaScript 文档对象模型（DOM）

阅读更多关于 JavaScript 文档对象模型（DOM）

文档对象模型通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 Core DOM 定义了一套标准的针对任何结构化文档的对象。 XML DOM 定义了一套标准的针对 XML 文档的对象。 HTML DOM 定义了一套标准的针对 HTML 文档的对象。 document 文档对象 DOM使用一系列对象表示加载到浏览器中的网页，主要对象是document对象，该对象又包含其他几个子对象。DOM阐明了脚本可以检索文档的什么属性，以及可以改变文档的什么属性，它还定义了一些方法，可以调用这些方法为文档执行一个操作。根节点 document.documentElement：返回存在于 XML 以及 HTML 文档中的文档根节点 document.body：对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问常见浏览器对象 Window：JavaScript 层级中的顶层对象，表示浏览器窗口。 Navigator：包含客户端浏览器的信息。 Screen：包含客户端显示屏的信息。 History：包含了浏览器窗口访问过的

正则表达式

阅读更多关于正则表达式

正则表达式dom /*--> */ /*--> */ 正则表达式dom 请输入您的邮箱：请输入您的密码：记住我登录清空显示邮箱的提示显示密码的提示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则表达式dom</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <style> form{width:1200px;margin:0 auto;} #emailTip{display: block;} h1{text-align: center;} </style> <script> /*测试提示*/ function usershow(){ $('#emailTip').popover('show'); }

Vue学习（十二）Dom模版和字符串模版

阅读更多关于 Vue学习（十二）Dom模版和字符串模版

Dom模版 dom模版直接写在dom结构中，例如： <div id="box"> <name></name> </div>  <template id="name"> <h2>{{msg}} => {{string}}</h2> <age :data-msg='msg' :data-string='string'></age> </template>  <template id="age"> <h2>18</h2> <span>{{dataMsg}} => {{dataString}}</span> </template> <script> var vm = new Vue({ data:{ }, components:{ 'name':{ data(){ return { msg:'我是父组件数据', string:'我是父组件的另外一个数据' } }, template:'#name', components:{ 'age':{ props:['dataMsg','dataString'], template:'#age' } } } } }).$mount('#box'); </script> 字符串模版字符串模版写在template属性中，例如： <div id="box"> <aaa></aaa> </div>

React 入门之路(1)

阅读更多关于 React 入门之路(1)

React 是由 Facebook 公司推广的一套框架，已经应用 instagram 等产品 React 就是为了提供应用程序性能而设计的一套框架在以前学的 angular 中，对 dom 提供了一些指令，让 dom 具有一些功能，例如 ng-repeat 让 dom 具有动态循环渲染的功能， ng-show 让 dom 元素具有动态显隐的功能等等比如将页面比作一辆汽车， Angular 的实现就是为汽车添加一些装饰，增加一些功能，让汽车看上去很高大尚，这样势必要加大油门 React 的实现就是重新制造一辆汽车，是有四个轱辘，即可启动，不要很大的油门 React 有三大创新虚拟 dom 组件开发多端适配一处开发，处处适用体验 react https://github.com/ facebook/react 在 0.13 版本后， react 做了一个处理将 react 文件分成两个部分（创建虚拟 dom ，渲染虚拟 dom 的） React.js 核心库文件（创建虚拟 dom 的，核心模块，写的应用程序可以兼容所有端） React-dom.js 在浏览器端渲染虚拟 dom 创建虚拟 dom 由 react 对象提供的一个方法 createElement 第一个参数表示虚拟 dom 的名称，例如 div 有时我们还可以传递组件第二个参数是一个对象，表示虚拟 dom

第八讲===>slot插槽和ref、$parent

阅读更多关于第八讲===>slot插槽和ref、$parent

slot插槽 slot就是子组件里给DOM留下的坑位 <子组件>DOM</子组件> slot是动态的DOM ref获取子组件实例识别：在子组件或元素上使用属性ref="xxxx" 获取：this.$refs.xxxx 获取元素 $el 是拿其DOM $parent获取父组件实例（可在子组件直接使用this.$parent即可）代码 <!DOCTYPE html> <html> <head> <title>组件化开发</title> </head> <body> <div id="app"> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var Child={ template:` <div>我是子组件</div> `, data(){ return { msg:'hello' } }, created(){ console.log(this.$parent) } } var Parent={ template:` <div> 我是父组件 <slot name='hello'></slot> <child ref='childs'></child> </div> `, components:{ Child }, data(){ return

05-Vue入门系列之Vue实例详解与生命周期

阅读更多关于 05-Vue入门系列之Vue实例详解与生命周期

原文地址 http://www.cnblogs.com/fly_dragon/p/6220273.html 05-Vue入门系列之Vue实例详解与生命周期 Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({...}) 的代码，而且Vue初始化的选项都已经用了 data 、 methods 、 el 、 computedd 等,估计您看到这里时，应该已经都明白了他们的作用，我们就详细讲解一下他们的使用情况。更详细的请参考官网内容 5.1.1. Vue实例的的data对象介绍 Vue的实例的数据对象data 我们已经用了很多了，数据绑定离不开data里面的数据。也是Vue的核心属性。它是Vue绑定数据到HTML标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。 data对象的类型：

【浏览器中的页面】

阅读更多关于【浏览器中的页面】

浏览器中的页面一、DOM树 1、在渲染引擎中，DOM有三个层面的作用： DOM是表述HTML的内部数据结构，它会将Web页面和JavaScript脚本连接起来，并过滤一些不安全的内容 2、DOM树如何生成：网络进程和渲染进程建立一个管道，HTML解析器直接解析，不需要等待text/html类型的数据全部接受完毕再进行解析 3、HTML 解析过程 ①通过分词器将字节流转换为token ②将token解析为DOM节点（将token压入栈中，然后一个一个分析） ③将DOM节点添加到DOM树中 4、JavaScript如何影响DOM生成暂停HTML解析，下载解析执行完毕后再继续进行html解析（如果执行js代码期间遇到CSSDOM，则需要等待CSS 下载加载完成）为了快速执行js，在DOM生成前，会有个预解析操作（当渲染引擎收到第一个字节流后，会开启一个预解析线程，用来分析HTML文件包含的JS，CSS等相关文件，并提前下载） CSS样式文件本身不会阻塞DOM生成，但是JS会阻塞DOM生成，而CSS样式文件会阻塞JS执行 5、渲染引擎有一个安全检查模块叫XSSAuditor，用来检查词法安全二、CSS如何影响首次加载时的白屏时间 CSSDOM作用：提供给Javascript操作样式表的能力为布局树的合成提供基础的样式信息 URL 请求开始，到首次显示页面的内容

react的组件的两种形式

阅读更多关于 react的组件的两种形式

1.如果需要传参，在函数中加一个 props 参数来接受，并且必须向外return一个合法的jsx创建的虚拟DOM。 //1. 组件名首字母为大写 2. 必须return 合法的jsx // 这里就可以相当于子组件 function Hellow (props){ //props为父组件传过来的数据 //如果打印props的话，只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据，因此只会打印出前三个来。 return <div> 姓名: {props.name}, 性别: {props.sex}, 年龄: {props.age} </div> } // 这里就想当于父组件 const person = { name: 'zs', sex: 'gener', age: 12, a: 2 } //将组件渲染到页面上来 // 有两个参数分别为,1.填写组件，2. 将组件渲染到指定的位置，也就是指定的DOM元素上。 ReactDOM.render(<div> //1. 使用ES6的展开运算符 <Hellow {...person}/> //2. 直接赋值 <Hellow name='zs' sex='gener' age={12}/> //3. 使用`.`的形式，父组件 <Hellow name={person.name} sex={person.sex} age=

Jquery设置获取DOM元素属性

阅读更多关于 Jquery设置获取DOM元素属性

Jquery设置获取DOM元素属性 1, attr() $("button").click(function(){ $("#runoob").attr("href","www.96net.com.cn"); }); 2, 可以传递匿名函数 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); 3，删除属性 removeAttr $("button").click(function(){ $("#runoob").attr("href"); }); attr() 来源： https://www.cnblogs.com/96net/p/12573881.html

38.认识DOM及获取元素

阅读更多关于 38.认识DOM及获取元素

JS 分三个部分： ECMAScript(基本语法) DOM BOM DOM: Document Object Model 文档对象模型（操纵 html 行内css) 站在js角度：html标签叫做节点 DOM 总共12种节点：先了解： nodeType 获取节点数字类型：　　　　　　　　　　　　 nodeName 获取标签的名字：　　　　　　　　　　　　 nodeValue :返回文本节点与注释节点的内容 attributes:返回节点的属性集合：　　　　　　　　　　　　获取元素：两个系列 get/querySelector 　　　　1.document.documentElement 　　　　　　　　 2.document.getElemnetById() //通过id获取文档节点

订阅 dom