DOM概述 html加载完毕,渲染引擎会在内存中把html文档生成一个DOM树,getElementById是获取内DOM上的元素,然后操作的时候修改的是该元素的属性 体验事件/事件三要素1.事件源(引发后续事件的标签2.事件(js已经定义好,直接使用3.事件驱动程序(对样式和html的操作)(DOM操作 需求:点击盒子,弹出对话框alert(1)步骤:-->1.获取事件源(document.getElementById("box")2.绑定事件 (事件源.事件 = functi…
1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一个子节点的数组(同childNodes区别,只返回Element(元素) 类型节点,不返回 Text 节点) 1.2nodeType 返回节点类型 1.3attributes 返回节点属性 <!DOCTYPE html> <HTML LANG="en"> <H…
1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByClassName('p')://类似的还有 document.getElementsByName.document.getElementsByName等 通过css选择器来返回第一个匹配的dom节点:document.querySelector('#p1'): 通过css选择器来返回一个类数组的对象集合…
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap…
hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂.因此洗(wang)心(yang)革(bu)面(lao),小结一下最近玩出来的成果. 友情提示,本文也是小白向为主,如果直接想看结论可以拉到最下面看的~ 由于关系到文件的读取,那是肯定需要服务器的,我会把全部的文件放在github上,给我点个 star 我会开心…
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”,即ECMAScript不…
1.介绍一下vdom? virtual dom, 虚拟DOM 使用JS来模拟DOM结构 DOM变化的对比,放在JS层来做(图灵完备语言),提高效率 DOM操作非常昂贵(消耗性能) 2.Snabbdom的使用 var snabbdom = window.snabbdom; // 定义patch var patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners ])…
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver      // 选择目标节点   var target = document.querySelector('#some-id');       // 创建观察…
1.BOM 浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象.描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的支持,IE还扩展了BOM,加入了ActiveXObject类,可以通过js脚本实例化ActiveX对象等等) 2.DOM 文档对象模型 DOM是针对XML的基于树的API.描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档.DOM本身是与语言无关的…
  今天我们来学习js中的一些基础的操作. 一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. window对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框. open() 打开一个新的浏览器窗口或查找一个已命名的窗口. close() 关闭浏览器窗…