对于传统HTML而言,HTML5是一个叛逆.所有之前的版本对JavaScript接口的描述都不过三言两语,主要篇幅都用于定义标记,与JavaScript相关的内容一概交由DOM规范去定义. 而HTML5规范则围绕如何使用新增标记定义了大量JavaScript API.其中一些API与DOM重叠,定义了浏览器应该支持的DOM扩展. 与类相关的扩充 HTML4在Web开发领域得到广泛采用后导致了一个很大的变化,即 class 属性用得越来越多,一方面可以通过它为元素添加样式,另一方面还可以用它表示元…

在线DEMO地址:打开: 游戏截图:      就不贴代码了, 因为代码太多了, 大概写一下这个游戏实现思路和一些实现: 游戏一共有三关, 每一关都有一个大Boss, Boss比较好杀,主要各种外星飞船杀伤力太强, 要注意;          游戏中打死敌机有10%的几率会掉神符, 包括生命神符, 加血神符, 无敌神符, 炸弹升级神符: 每一个敌机的死亡都有100%的几率掉钻石, 如果飞船吃了钻石就可以增加左上角的积分score: 目前有两台战斗机,战斗机只是机型不同, 战斗力是相同的: 使用r…

input : required   选择必填表单域 input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域 input : focus : valid 选择当前聚焦的且含有合法输入值的表单域 使用上面的伪类选择器再编写三条新规则: input : required { border : 1px solid red; } //输入值不符合格式时,表单右边出现× input : :focus : invalid { background:url('../img/cr…

 HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时,先后顺序不重要. //取得所有类中包含"username"和"current"的元素,类名的先后顺序不重要 var allCurrentUsername = document.getElementsByClassName('username current'); //取…

第十章 NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点,但它并不是Array实例,将其转化为数组的方法: function converToArray(nodes){ var array = null; try{ array = Array.prototype.slice.call(nodes,0); //slice方法的参数 }catch(ex){ array = new Array(); for(var i = 0,len = nodes.length…

看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图: DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口).DOM描,绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1.节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点…

选择符API querySelector()方法 // 取得body元素 var tbody = document.querySelector('body'); // 取得ID为"myDIV"的元素 var myDIV = document.querySelector("#myDiv"); // 取得类为"selected"的第一个元素 var selected = document.querySelector(".selected&q…

*******************************  Chapter 11 DOM扩展  ******************************* 主要的扩展是 选择符API 和 HTML5 选择符API: document.querySelector('.img'); document.querySelector('#test'); document.querySelectorAll('a'); //这个方式浏览器支持很少,返回是否可以查询得到的结果 document.mat…

什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null． //取得 body 元素 var body = document.querySelector("body"); //取得 ID 为"myDiv"的元素 var myDiv = document.querySelector("#myDiv"); /…

自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function.prototype.call() Function.prototype.apply() Function.prototype.bind() ,本文不讲解使用,但是这三个方法并不是万能的,并不一定会执行你想要的那个函数,因…