dom | 易学教程

React16.4开发简书项目第4章 React高级内容

阅读更多关于 React16.4开发简书项目第4章 React高级内容

本章讲解React高级部分内容，包含PropTypes，生命周期函数，虚拟Dom，数据mock，动画实现等部分课程讲解。一. 1.1 类型校验和默认值。 1.2 什么是虚拟DOM 生成真正的DOM需要调用很多底层的东西，很耗性能，而且真实DOM的对比也很耗性能，而虚拟DOM则是JavaScript模拟的DOM，所以对于生成和对比，性能会很大程度上提高。非虚拟DOM情况：非虚拟DOM的进化： 1.3 React真实的DOM变化过程 1.4 虚拟DOM的优点：性能提升了它使得跨端应用得以实现。如React Native ，因为生成的虚拟DOM在浏览器中被编译成真实DOM，而在原生应用中可能会被编译成其他的组件，所以可以实现跨端应用。 1.5 diff算法两个虚拟DOM是怎么进行比对的呢？ 1.5.1 setState这个方法为什么是异步的呢？为了提升React的性能，比如你在很短的一段时间内多次setState，而内容又没有啥变化，那么React就会把这多次的setState合并成一个，这也是setState异步的初衷。 1.5.2 diff算法是逐层比较的。如果第一层就不一样，那么下面的就不会再做比较了，直接替换掉新的。 1.5.3 K值的概念：k值一定要稳定，因为在diff算法的时候要进行比较的在React循环渲染的时候，维护k值稳定性的重要性

前端基础之BOM和DOM

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

BOM：浏览器对象模型,可以使JS有能力操作浏览器 DOM：文档对象模型,可以访问HTML文档内的所有元素 Window对象所有浏览器都支持 window 对象。它表示浏览器窗口一些常用的Window方法： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window的子对象 navigator对象（了解即可）浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。 navigator . appName　　 // Web浏览器全称 navigator . appVersion　　 // Web浏览器厂商和版本的详细字符串 navigator . userAgent　　 // 表示是否是一个浏览器 navigator . platform　　　 // 浏览器运行所在的操作系统 screen对象（了解即可）屏幕对象，不常用。 screen.availWidth - 可用的屏幕宽度 screen.availHeight - 可用的屏幕高度 history对象（了解即可） window.history 对象包含浏览器的历史。 history . forward ( ) // 前进一页

Web APIs---4. DOM(3)

阅读更多关于 Web APIs---4. DOM(3)

5 节点操作 5.1 为什么学习节点操作 5.2 节点概述一般情况下，节点至少拥有节点类型(nodeType)、节点名称(nodeName)、节点值(nodeValue)这三个基本属性 <body>  <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <div class="box"> <span class="erweima">x</span> </div> <script> var box = document.querySelector('.box'); console.dir(box); //可以通过这个方式查看节点的属性 </script> </body> 查看部分属性：元素节点的nodeType为1（常用）属性节点的nodeType为2 文本节点的nodeType为3（包含文字空格换行等） 5.3 节点层级父级节点 node.parentNode <body>  <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li

React-native 跨平台原理

阅读更多关于 React-native 跨平台原理

1、为什么React native 可以跨平台其实通过react native的架构图就明白了，下面我们就根据架构图来理解一下为什么react native可以实现跨平台：（1）、React：不同平台上编写基于React的代码，“Learn once, write anywhere”。（2）、Virtual DOM：相对Browser环境下的DOM而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。（3）、Web/iOS/Android：上层与用户交互的UI界面。 React-Native在JavaScript中抽象操作系统原生的UI组件，代替DOM元素来渲染，使用的是Android或iOS的本地控件，所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript，但由于JavaScript是即时编译的，也就是第一次使用时会将JavaScript代码编译成二进制文件，所以JavaScript得运行效率比较高。因此，React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多

document.location does not change the webpage in IE9?

阅读更多关于 document.location does not change the webpage in IE9?

问题 I am trying to redirect to a different page in IE9 (9.0.3). When I try to get/set document.location , or document.location.href , or window.location / window.location.href , I'm unable to do so. It fails without giving any errors. I've tried to check whether the document and windows objects are set, and they are, so I have no idea why the location object is "missing". I tried getting the document.URL and that works fine, but it's read-only. Anyone know what the problem is or how to achieve

document.location does not change the webpage in IE9?

阅读更多关于 document.location does not change the webpage in IE9?

.prop（）与.attr（）

阅读更多关于 .prop（）与.attr（）

因此， jQuery 1.6具有新的功能 prop() 。 $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) 还是在这种情况下他们做同样的事情？如果我确实必须切换到使用 prop() ，那么如果我切换到1.6，所有旧的 attr() 调用都会中断？更新 selector = '#id' $(selector).click(function() { //instead of: var getAtt = this.getAttribute('style'); //do i use: var thisProp = $(this).prop('style'); //or: var thisAttr = $(this).attr('style'); console.log(getAtt, thisProp, thisAttr); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <div id='id' style=

第三章 3.1 DOM

阅读更多关于第三章 3.1 DOM

1.1 JS的组成　　1.JS语法 --> ECMAScript 　　2.BOM --> Browser Object Model(浏览器对象模型) 　　3.DOM --> Document Object Model(文档对象模型) 可以操作html+css 　　DOM也可以理解为是对HTML以及XML的标准编程接口　　DOM的结构呈树状，也把DOM叫做DOM树，DOM树是由很多DOM节点组成的参考资料： https://www.runoob.com/htmldom/htmldom-nodes.html 节点：在 HTML中叫以下的是元素和标签，在js中叫节点 4.节点的分类　　nodeType 　　文本节点　　 3 （空格部分和文字）　　注释节点　　8 （ ）　　元素节点　　1 (也就是标签) 　　属性节点　　 2 (就是那些类名ID名) 　　文档节点 (document) 9 5.DOM节点的属性 (对象属性) 　　nodeType 区分节点的类型　　 nodeName 获取节点的名称　　nodeValue 获取注释节点和文本节点的内容　　 attributes 获取元素节点的属性节点集合（类名 ID名）例： <div id="box"> <h3>2</h3> <b>哈哈</b> </div> <script> var

事件冒泡的应用

阅读更多关于事件冒泡的应用

DOM事件流：“DOM二级事件”规定的事件流包含三个阶段：事件捕获，处于目标，事件冒泡。事件捕获：不太具体的节点先捕获接收到事件，然后传递到具体的节点。事件冒泡：事件开始时由最具体的元素接收，然后逐级上上传播到最不具体的节点。那么，事件冒泡有什么作用呢？首先，我们页面里有很多DOM事件有处理程序。比如说： <body> <div class="box" style="width:100px;height:"100px";" oncick="fn1"></div> <script> function fn1(){ alert("点击事件") } </script> </body> 那么，如果我有很多DOM元素需要添加事件处理程序呢？比如说，我有100个li元素需要添加事件处理程序呢？难道一个一个添加吗？ <style type="text/css"> #outSide{ width: 540px; padding: 20px; background: lightblue; margin: 0 auto; } #outSide li{ width: 500px; height: 50px; background: lightcoral; border: 1px solid lightgoldenrodyellow; } </style> <body> <ul> <li

11-DOM介绍

阅读更多关于 11-DOM介绍

11-DOM介绍什么是DOM DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。解析过程 HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。 DOM树（一切都是节点） DOM的数据结构如下：上图可知，在HTML当中，一切都是节点：（非常重要）元素节点：HMTL标签。文本节点：标签中的文字（比如标签之间的空格、换行）属性节点：：标签的属性。整个html文档就是一个文档节点。所有的节点都是Object。 DOM可以做什么找对象（元素节点）设置元素的属性值设置元素的样式动态创建和删除元素事件的触发响应：事件源、事件、事件的驱动程序 DOM节点的获取 DOM节点的获取方式其实就是获取事件源的方式操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点： var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过标签名获得

订阅 dom