JavaScript DOM编程艺术 读书笔记

绕不过去的坑。港拔蛋

1.js代码应该存放于HTML中之前，这样能使浏览器更快加载脚本

    
    
    


something content here!
        
 

2.语法

<1>变量

var 声明 大小写敏感，允许字母，数字，美元符号，下划线（但是第一个字符不能为数字）

<2>字符串，数值，布尔值

<3> 数组

var beatles = Array();  //关键字申明
var beatles = [];          //类似python数组申明

特别有意思的地方是，js中有个关联数组，类似python中的字典。可以用字符串来代替数字值。如下实例:

var lennon = [];
lennon['name'] = 'John';
lennon['year'] = 1940;
lennon['living'] = false;

<4> 对象

var lennon = Object(); //关键字声明
lennon.name = 'John';
lennon.year = 1940;
lennon.living = false;
----------------------------------------
var lennon = {name:'John', year:1940; living:false}; //大括号声明

<5>操作 算术操作符

跟python差不多，只不过支持 i++， i-- 累加累减。

<6>控制流

if语句，大部分跟python差不多，值得注意的是 js的比较操作符中分为严格比较（===）和不严格比较（==），区别 ==操作符认为空字符与false相同，而 === 操作符则认为两则不同。

if(condition){
  statements;
}else{
}

逻辑操作符
&&与操作符，相当于python中的 and关键字
|| 或 操作符，相当于python中的 or 关键字

循环
while循环，for循环

var beatles = ['John', 'pual', 'George', 'Ringo'];
for(var i=0; i

函数 使用function关键字定义，值得注意的是函数的作用域，
如果函数中使用var 定义变量，则视其为局部变量，如果没有var声明，则为全局变量。

function shout(){
  var beatles = ['John', 'pual', 'George', 'Ringo'];
  for(var i=0; i

对象 使用关键字new 创建新的实例

var jeremy = new Person；  //创建新实例

内建对象
数组length属性, 获取数组有多少个元素
Math.round（） 把十进制的数值舍入为最接近的整数
Date对象包括getDay(), getHours(), getMonth()等一系列方法

var current_date = new Date();
var today = current_date.getDay();

宿主对象， 是指浏览器提供的预定义对象，包括Form, Image, Element等

3. DOM

DOM有三种节点，元素节点（element node）, 文本节点(text node), 属性节点

getElementById( id )

根据元素id 获取元素节点 对象

getElementByTagName( tag )

根据标签 返回一个 对象数组
值得注意的是，该方法可以用通配符（‘*’）为参数，返回一个所有元素的对象数组

document.getElementById('purchases');
document.getElementByTagName('a');

getElementByClassName( class )

根据标签类属性，放回一个 元素对象
值得注意的是，该方法可以带多个类名元素，用空格分局即可，而且类名顺序不重要
可惜的是该方法许多老旧浏览器不支持，所以在考虑兼容性的时候需要重写，如下函数

function getElementsByClassName(node, classname){
  if (node.getElementsByClassName){    //如果支持 使用老方法
    return node.getElementByClassName(classname);  
  }else{
      var results = [];
      var elems = node.getElementByTagName('*');
      for(var i=0; i

getAttribute

object.getAttribute( attribute )获取元素属性

var  paras = document.getElementsByTagName('p');
for(var i=0; i

setAttribute

object.setAttribut( attribute, value ) 设置属性值

3 js图片库

一 事件处理函数

showPic( this )
函数showPic以this为关键词时，其中this是指‘这个对象’ 具体表示的话为某某元素节点。

时间处理函数的处理工作机制，给某个元素添加了时间处理函数后，一旦时间发生，相应的js代码就会执行，被调用的嗲吗返回一个至，这个值将被传递那个时间处理函数，如 给某个链接添加一个onclick时间处理函数，并让这个处理函数所触发的js代码返回true 或者fasle。 js返回true，onclick时间处理函数就认为 这个链接呗点击了，js返回false，onclick事件处理函数就认为‘这个链接没有被点击’

二 childNodes属性

element.childNodes
childNodes可以用来获取任何一个元素的所有子元素

三nodeType

node.nodeType 属性有12中可取值，但是只有三种有实用价值。
元素节点 nodeType的值为 1；
属性节点 nodeType的值为 2；
文本节点 nodeType的值为 3；

四 nodeValue

node.nodeValue 获得节点的值 如:

 something here 

那么获取文本节点的值应该这样写

var description = document.getElementById( 'description' );
text = description.childNodes[0].nodeValue;
>>>text为something here

五 firstChild 和lastChild属性

node.firstChild = node.childNodes[0] 访问节点的第一个子节点
node.lastChild = node.childNodes(node.childNodes.length-1) 访问节点的最后一个子节点

4 最佳实践

平稳退化
不要使用 javascript: 伪协议
不要使用 内嵌的实践处理函数
javaScript应该与HTML分离
添加对象检测， 如 if（！getElementById） return false;
性能考虑
一 不管什么时候，只要查询DOM中的某些元素， 浏览器都会搜索整个DOM树，从中查找可能过匹配的元素
二 尽量减少文档中的标记数量
三 合并js文档，减少加载页面时发出的请求数量
四 把所有