jsDOM编程艺术记录

jsDOM编程艺术读书笔记

js语法

语句

语句

1. 语句末尾加分号
2. 每条语句独占一行

注释

1. 单行注释

//我是注释内容

2. 多行注释

/*我是注释内容
我是注释内容*/

后面的内容在首页不显示，请点击下方的展开全文或者

变量和数据类型

变量

1. 可以直接对变量赋值而不用事先声明，js会自动声明，但建议要提前声明
2. 可以一次声明多个变量
3. 可以把变量声明和变量赋值一次完成
4. 变量名不能包含空格和标点符号
5. 变量命名规则：允许包含字母，数字，美元符号，和下划线（但第一个字符不能是数字），可以驼峰式命名
6. 声明变量的关键字是var

数据类型

1. js是一门弱类型的语言，不需要进行类型声明‘
2. 数据类型：字符串，数值，布尔，null，undefined，对象
3. 字符串，必须包含在引号里，如果引号需要被看作是一个普通字符，需要用反斜线\对这个字符转义
4. 数值，可以是整数或小数，
5. 布尔类型，值为true或false
6. 数组，用一个变量表示一个值的集合，集合中的每个值都是这个数组的元素

• 用关键字Array声明，声明方式有

var arr = new Array();
var arr = new Array(4);
var arr = [];
var arr = [1,2,3];

• 可以存储任意数据类型数据
• 可以通过length动态改变长度

7. 对象是使用一个名字表示一组值，对象的每个值都是对象的一个属性

运算符

算数运算符

1. +，可以作为简单的加法操作，当涉及到字符串时为拼接操作
2. -，减法
3. *，乘法
4. /，除法
5. ++，自增
6. –，自减

比较运算符

1. ,大于

2. <,小于

3. =,大于或等于

4. <=,小于或等于
5. ==，等于
6. ===，严格等于
7. !=，不等于

逻辑运算符

1. &&，逻辑与，两边都为真时才会是真
2. ||，逻辑或，一边为真时就是真
3. !，逻辑非，布尔值取反

条件语句和循环语句

条件语句

1. if语句
2. if…else语句
3. if…else if…else语句
4. switch语句

循环语句

1. while循环
2. do…while循环
3. for循环

函数和对象

函数

1. 声明方式

function fname (a,b,...){
	....
}

2. 变量的作用域

• 全局变量，可以在脚本的任何位置引用，
• 局部变量，只存在声明它的函数内部，在函数外部无法引用
• 在函数内如果使用var关键字声明则该变量视为局部变量，反之全局变量

对象

1. 包含在对象里的数据可以通过属性和方法的形式访问，都是通过.来调用
2. 对象类型：

• 用户定义对象，
• 内建对象，内建在js中，如数组、Date、Math
• 宿主对象，由浏览器提供，如window对象

3. 内建对象

DOM

DOM的节点

1. 分类

• 元素节点
• 文本节点
• 属性节点

2. 节点树的根节点是

获取元素

1. document.getElementById(“id值”),返回一个与给定id属性值的元素节点对应的对象
2. document.getElementsByTagName(“标签名”)，返回一个对象数组，每个对象对应着文档里有着给定标签的一个元素
3. document.getElementsByClassName(“类名”)，返回具有相同类名的元素的数组

元素属性

1. 获取属性节点： 元素节点对象.getAttribute(“属性名”)
2. 修改属性节点： 元素节点对象.setAttribute(“属性名”，“值”)
3. 通过setAttribute去修改的的属性后，查看文档源码时看到的仍然是改变前的属性值，原因在于DOM的工作模式，先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容，（这也是DOM的优点，对页面内容进行刷新而不需要再浏览器里刷新页面）

子元素

1. childNodes属性，可以获取任何一个元素的所有子元素，返回一个包含所有类型节点的数组
2. nodeType属性，获取节点类型

• 元素节点的nodeType属性值是1
• 属性节点的nodeType属性值是2
• 文本节点的nodeType属性值是3

3. nodeValue属性，获取或设置文本节点的值
4. node.firstChild属性，相当于node.childNodes[0]
5. node.lastChild属性,相当于node.childNodes[node.childNodes.length-1]

优化

平稳退化

分离js

向后兼容

性能考虑

动态创建

创建元素节点，createElement

在已有元素前插入一个新元素，insertBefore();

1. 需要明确：想要插入的新元素；目标元素；目标元素的父元素
2. 语法：目标元素的父元素.insertBefore(新元素，目标元素)

在已有元素后插入一个新元素，

function insertAfter(newElement,oldElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else {
		parent.insertBefore(newElement,targetElemnt.nextSibling)
	}
}

Ajax

1. 优点：对页面的请求以异步方式发送到服务器，服务器在后台处理请求，用户还能继续浏览网页和页面交互
2. 核心：XMLHttpRequest对象，这个对象充当着客户端与服务器的中间人，js通过这个对象可以自己发送请求也可以自己处理响应
3. 使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求
4. 异步请求的异步性，脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回

js控制css

1. 当需要引用一个中间带减号的CSS属性时，需要转换成驼峰法命名
2. DOM style属性不能用来检索在外部样式表和head部分声明的样式，只能返回内嵌样式，但是用DOM设置的样式就可以检索出来
3. style对象的属性值必须放在引号里
4. className属性是一个可读可写的属性，凡是元素节点都有这个属性，使用它可以得到一个元素的class属性，用className属性和赋值运算符可以设置一个元素的class属性

element.className = value;

• 缺点：使用className属性设置某个元素的class属性时将替换（而不是追加）该元素原有的class设置，如果需要追加 使用字符串拼接操作

5. 可以在css里面设置好类名选择器的样式，js通过操作className来控制内容显示效果，不需要操作style对象

js实现动画效果

1. setTimeout可以让某个函数在经过一段预定的时间之后才开始执行，该方法会产生一个返回值

var a = setTimeout("function",interval);
//第一个参数是要执行的函数名，第二个参数是毫秒值，将返回值赋给一个变量，可以为取消函数clearTimeout提供参数

2. clearTimeout用来取消setTimeout函数，需要用setTimeout函数的返回值做参数

项目实例 跳过了

附录

1. 字面量：可以直接在js代码中写出来的数据
2. 创建新浏览器窗口的方法，BOM方法

window.open(url,name,features);//参数为可选参数

3. innerHTML是HTML特有的属性
4. 标签的含义是缩略语（单词或短语的简写形式）
5. DOCTYPE决定浏览器使用标准模式还是兼容模式来显示页面
6. 获取下一个元素节点的函数

function getNextElement(node){
	if(node.nodeType == 1){
		return node;
	}
	if(node.nextSiblng){
		return getNextElementnode.nextSiblng)
	}
	return null;
}

7. 可以绑定多个函数到页面加载事件的函数

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof(window.onload) != "function"){
		window.onload = func
	}else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

8. 表格隔行变色

function stripeTables (){
	if(! document.getElementByTagName){
		return false;
	}
	var tables = document.getElementsByTagName("table");
	var odd, rows;
	for(var i = 0; i < tables.length; i++){
		odd = false;
		rows = table[i].getElmentsByTagName("tr");
		for(var j = 0; j < rows.length; j++){
			if(odd == ture){
				rows[j].style.backgroundColor = "#ffc";
				odd = false;
			}else {
				odd = true;
			}
		}
	}
}

9. 给元素增加新的class

function addClass(element,value){
	if(!element.className){
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName += "";
		newClassName += value;
		element.className = newClassName;
	}
}