JavaScript DOM编程艺术 读书笔记

绕不过去的坑。港拔蛋

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


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文档,减少加载页面时发出的请求数量
四 把所有

你可能感兴趣的:(JavaScript DOM编程艺术 读书笔记)