很久之前看的 存个笔记
JavaScript DOM 编程艺术 笔记
DOM
什么是DOM？
DOM是一套对文档的内容进行抽象和概念化的方法。
DOM是一种API(应用编程接口) [API就是一组已经得到有关各方共同认可的基本决定]
DOM工作模式
先加载文档的静态内容 再动态刷新 动态刷新不影响文档的静态内容
对页面内容进行刷新却不需要在浏览器里刷新页面
DHTML
DHTML Dynamic HTML 动态HTML
描述HTML CSS JavaScript技术组合的术语
强类型和弱类型语言
强类型语言 strongly typed
必须明确类型声明的语言
弱类型语言 weakly typed
不需要进行类型声明 这意味着程序员可以在任何阶段改变变量的数据类型
数组
var arr = Array(2) //2为长度
var arr = Array() //不知道长度可以不指定
arr[0]='hello'
arr[1]='world'
arr[1]='!'
var arr = Array('hello','world','!' ) // 也可以直接填充数组
条件语句
conditional statement
if(conditional){
statements
}
如果if语句中的花括号部分只包含一条语句 那就可以不适用花括号
if(1<2) alert('22222');
if(false == " ") //true 相等操作符认为空字符串和false含义相等
所以再比较的时候就要使用 ===
var
如果在某个函数中使用了var 那么这个变量将被视为一个局部变量
如果没有使用var 那么这个变量将被视为一个全局变量
如果脚本里已经存在一个与之同名的全局变量 那么这个函数就会改变那个全局变量的值
对象
包含在对象里的数据 可以通过两种形式访问
属性和方法
属性是隶属于某个特定对象的变量
方法是只有某个特定对象才能调用的函数
宿主对象 host Object
是由运行环境提供的 from image element
childNodes
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素(空格和换行符都会被包括，都是节点)，它是一个包含这个元素全部子元素的数组
访问childNodes数组的第一个元素
node.childNodes[0] -> firstChild
最后一个元素
node.childNodes[node.childNodes.length-1] -> lastChild
nodeType
每一个节点都有一个nodeType属性
node.nodeType=1/2/3
1:元素节点
2:属性节点
3:文本节点
nodeValue
改变一个文本节点的值
node.nodeValue
不仅可以用来检索节点的值 还可以设置节点的值
nodeName
总是返回一个大写字母的值
onkeypress
按下键盘任意一个按键都会触发该事件
onclick
用tab键移动到某个链接然后按下回车的动作也会触发onclick事件
弹窗问题
应该只在绝对必要的情况下才使用弹出窗口 因为这牵扯到网页的可访问性
window.open()
JavaScript使用window对象的open方法来创建新的浏览器窗口
window.open(url,name,feature)
url : 想在新窗口打开的网页的url地址 如果不写则弹出一个空白的浏览器窗口
name：新窗口的名字 可以在代码里通过这个名字来与新窗口进行通信
feature : 是一个以逗号分隔的字符串 内容是新窗口的各种属性
新窗口的大小(宽高) 新窗口被启用或被禁用的各种浏览功能(工具条、菜单条、初始显示位置等) 新窗口的功能要少而精
这个方法对DOM没有影响
伪协议
pseudo-protocal
真协议用来在因特网上的计算机之间传输数据包 如HTTP,FTP等
伪协议则是一种非标准化的协议
JavaScript伪协议让我们通过一个链接来调用JavaScript函数
平稳退化
graceful degradation
网站的访问者可能禁用了JavaScript或者是浏览器不支持,在访问网站时就可能遇到各种麻烦,所以需要正确使用JavaScript,在不支持的情况下仍然能正常访问. 这就是所谓的平稳退化.
如果JavaScript网页不能平稳退化 这将在搜索引擎上排名受到极大损害
向后兼容
解决方案:
把某个方法打包在一个if语句里 就可以根据这条if语句的条件表达式的求值结果: true 这个方法存在 false 这个方法不存在 来决定采取怎样的行动
这种检测方法被称为: 对象检测(object detection)
在使用对象检测时 一定要删除方法名后面的括号
如果不删除 测试的方法将会是结果 无论方法是否存在
性能考虑
尽量少访问DOM和尽量减少标记
1.
访问DOM的方式对脚本性能会产生非常大的影响
因为只要是查询DOM的某些元素 浏览器都会搜索整个DOM树
从中查找可能匹配的元素
最好的方法是把第一次搜索的结果保存在一个变量中 然后重用
2.
同时还要尽量减少文档中的标记数量 过多不必要的元素只会增加DOM树的规模 进而增加遍历DOM树以查找特定元素的时间
3.
同时还要尽量合并脚本文件 减少加载页面时发送的请求数量
减少请求数量通常都是在性能优化时首先要考虑的
4.
脚本在标记中的位置对页面初次的加载时间也有很大影响
位于块中脚本会导致浏览器无法并行加载其他的文件(如图像或其他脚本文件)
根据HTTP规范 浏览器每次从一个域名中最多只能同时下载两个文件
而在下载脚本期间 浏览器不会下载其他任何文件
即使是来自不同域名的文件也不会下载 所有的资源都要等待脚本文件加载完成后才能下载
解决方法
把所有的
Modernzr兼容性检查
inputtypes.type
检查浏览器是否支持某个输入类型的控件
if(!Modernizr.inputtypes.date)
input.attribute
if(!Modernizr.input.placeholder)
在样式表中导入样式表css
@import url(base.css)
可以把样式表都汇总到一个总的样式表
为了减少请求的数量，就需要把所有的样式都汇总到一个样式表中，
这样也有助于最后缩减代码
indexof
indexof方法用于在字符串中寻找子字符串的位置
返回子字符串第一次出现的位置
如果没有匹配到返回-1
返回其他值则为匹配
split方法
根据分隔符把一个字符串分成两或多部分的一种便捷方式
string.split(separator,howmany)
separator 必须/字符串或正则表达式，从该参数指定的地方分割string
howmany 可选/该参数可指定返回数组的最大长度
如果设置则按照要求不会超出 如果没设置则会整个字符串都会被分割 不考虑长度
返回值
一个字符串数组
通过separator指定的边界处将字符串string分割成子串创建的
返回的数组中的字符串不包括separator自身
form对象-elements
HTML文档中每个元素都是一个对象
文档中每一个表单都是form对象
每个form对象都有一个elements.length属性
这个属性返回表单中的包含的表单元素的个数
相应的，表单中所有字段都保存在form对象的elements属性中。
即： form.elements 是一个包含所有表单元素的数组
elements数组只返回input、select、textarea
BOM
window对象对应着浏览器窗口本身 这个对象的属性或方法通常统称为
BOM 浏览器对象模型