昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2.内接js <script>/*js代码*/</script> 3.外接样式 <script src = 'main.js'></script> //在前端项目中 当你看到index.main开头,这个时候应该考虑是项目的入口文件 //标签中img标签 link标…

昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 1.三种引入方式    1.行内js <div onclick = 'add(3,4)'></div>        //声明一个函数     function add(a,b){       }    2.内接js    <script…

本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3. HTML DOM 节点属性:介绍HTML DOM节点属性,如:innerHTML.innerText.nodeName.nodeValue以及nodeType等. 4. 获取 HTML 元素节点方法:介绍文档节点(document).元素节点可以通过getElementById.getEleme…

什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. DOM树(一切都是节点) DOM的数据结构如下: 上图可知,在HTML当中,一切都是节点:(非常重要) 元素节点:HMTL标签. 文本…

什么时DOM DOM:文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来范文文档结构.目的起始就是为了能让js操作html元素而指定的一个规范. DOM就是由节点组成的. 解析过程 HTML加载完毕,渲染引擎会在内存中吧HTML文档,生成一个DOM树,getElementById时获取DOM中的元素节点,然后操作的时候修改的时该元素的属性. DOM树(一切都是节点) DOM的数据结构如下: 上图可知,在HTML当中,一切都是节点:(非常重要) 元素节点:HTML标签. 文本节点:…

[转自]:https://www.jianshu.com/p/616999666920 为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,一图胜千言: 所有浏览器的引擎工作流程都差不多,如上图大致分5步:创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting 第一步,用HTML分析器,分析HTML元素,构建一颗DO…

DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 var person = { name:'派大星', fav:function(){ } } 2.js中对象分类三种 (1)用户定义对象 (2)内建对象 Array Date Math (内置) (3)宿主对象 3.Model Map(地图) (1)把 DOM 看做一颗“树” (2)DOM 把文档看做一颗“家谱树” parent child sibling(兄弟姊妹) 爷爷 爸爸 叔叔 你…

本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 z-index:数值大的在上边 overflow: hidden 超过div的宽度后隐藏 auto 出现滚动条 hover: 当鼠标移动到当前标签上时才生效 background-image:url('1.jpg')  #默认 div大,图片水平放置 background-repeat:no-re…

一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DOM对象都是以COM对象形式实现的,因此出现了不少不可兼容的东西 二.Node.ELEMENT_NODE常量 1.经本人实测,因为此常量在IE9以下就不支持了,所以一般在检测元素的时候都会用nodeType属性,而nodeType属性根据元素的类型不同,用12个常量值来表示,比如元素节点nodeTyp…

react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快!jsg更容易表示节点 所以:把js和html混写在一起来解决,React出现了!!! diff算法是虚拟dom核心: 传统的diffs算法复杂度是次方级别增长,而react用的优化过的diff算法: 过程:1.节点比较(属性.文本):2.记录差别(编号):3.增删改查(js): 优化点: 情景1:…