JavaScript DOM 编程艺术（第2版）读书笔记（二）

第七章动态创建标记
document.write()方法可方便快捷的把字符串插入到文档中，它不能做到javascript完全与html分离，必须把<script>放到<html>里调用。
innerHTML 属性可以用来读、写某给定元素里的html内容。该属性无细节可言。是带有标签的内容。
利用这个技术无法区分“插入一段html内容”与“写入一段html内容”。一旦使用innerHTML,它的全部内容将被替换。
DOM方法
在DOM看来，一个文档就是一颗节点树，如果想在节点树上添加内容，就必须插入新的节点，如果想添加一些标记到文档，就必须插入元素节点。
createElement方法
document.createElement(nodename); 创建的节点它还不是DOM节点树的组成部分，这种情况称为文档碎片。
appendChild方法
parent.appendChild(child); 将新创建的节点插入某个文档节点树中，让其成为文档中某个现有节点的一个子节点。
createTextNode方法
document.createTextNode(text); 创建一个文本节点；注意与createElement的区别。
insertBefore()方法
parentElement.insertBefore(newElement, targetElement)；将一个新元素插入到目标元素之前，
parentElement父元素是targetElement的父元素，元素节点的父元素必须是另一个元素节点。

insertAfter()方法
DOM中没有此方法函数，本书中扩展的写法如下；在现有元素后插入一个新元素。

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

【parentNode属性：父元素节点；nextSibling属性：下一个兄弟元素节点；】

Ajax
Ajax的主要优势就是对页面的请求以异步方式发送到服务器。其核心就是XMLHttpRrquest对象。
javascript获取XMLHttpRrquest对象的兼容写法：

function getHTTPObject(){
	if(typeof XMLHttpRrquest == ’undefined’){
		XMLHttpRrquest = function(){
			try {return new ActiveXObject(“Msxml2.XMLHTTP.6.0”);}
			catch (e){ }
			try {return new ActiveXObject(“Msxml2.XMLHTTP.3.0”);}
			catch (e){ }
			try {return new ActiveXObject(“Msxml2.XMLHTTP”);}
			catch (e){ }
			return false;
 }
}
return new XMLHttpRequest();
}

当在脚本中要使用XMLHttpRequest对象，可将这个新对象直接赋值给一个变量；
var request = getHTTPObject();

书中的例子：
function getNewContent(){
var request = getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange = function(){
if(request.readyState ==4){
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
} else{
alert('Sorry,your browser doesn\'t support XMLHttpRequest');
}
alert(‘Function Done!’)
}
addLoadEvent(getNewContent);
当页面加载完成，以上代码发起一个GET请求，加载exemple.txt文件；
代码中的onreadystatechange是一个时间处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行；
request.onreadystatechange = dosomething
然后就可以发送请求
request.send(null)
浏览器会在不同阶段更新readyState属性
0 代表未初始化 1 代表正在加载 2代表加载完毕 3代表正在交互 4表示完成。
只要readyState属性值变成4，就可以访问服务器发送回来的数据；
在使用Ajax时，要注意同源策略，发送的请求只能访问与其所在的html处于用一个域中的数据。

第八章充实文档的内容
for/in 循环
语法：for(variable in array){ }
该循环可以用来遍历数组（也可以是对象），主要应用于下标不是数字的数组（或对象）
是数字的话，数组一般是for循环：for(var i=0;i<array.length;i++){ }
例子：
var arr = new Array();
arr["first"] = "my";
arr["second"] = "name";
arr["third"] = "is";
arr["fourth"] = "Eva";
for(key in arr){
console.log(key)
console.log(arr[key])
}
var obj = {
'first':'my',
'second':'name',
'third':'is',
'fourth':'Eva'
}
for(key in obj){
console.log(key)
console.log(obj[key])
}
【两个例子得出的一样的结果】
查找节点不确定时，可打印查看或者检查nodeType属性，
我们可以把“*”通配符作为参数传进getElementsByTagName(),获取全部的元素节点，再取最后一个元素节点，这样就可以保证获得最后一个元素节点。

第九章 CSS-DOM
三位一体的网页：结构层（html）、表示层（css）、行为层（javascript DOM）。
style属性
文档中每个元素都是一个对象，每个对象又有着各种各样的属性。
element.style.property
style属性是一个对象，如果要具体的style样式的话，可以用style.cssText获取；
当引用一个中间带减号的css属性时，DOM要求用驼峰命名法。
例子：<div id='example' style='background-color: yellow; width:200px; height: 50px;color:red'>测试style属性</div>
var example = document.getElementById("example");
console.log(typeof (example.style))
console.log(example.style.cssText)
console.log(example.style. backgroundColor)

nextSibling属性，表示的是下一个节点，而工作中我们碰到是对元素节点做操作时，则需要运用一个函数来查找下一个元素节点；getNextElement
function getNextElement( node ){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
【此方法用到递归，当满足第一个条件，返回元素节点，不满足条件时，在函数中调用自己本身。如果没有下一个节点，则返回null 】

table表格隔行变色，平时经常都是用css3表示：tr:nth-child(odd) / tr:nth-child(even)
JS写法：
function stripeTable(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for(var i = 0; i < tables.length; i++){
odd = false; //条件判断或者称为开关
rows = tables[i].getElementsByTagName("tr");
for (var j = 0; j < rows.length; j++) {
if(odd == true){
rows[j].style.backgroundColor = "#ffc";
odd = false;
}else{
odd = true;
}
};
}
}

className属性
element.className = value 用来设置类名或者替换类名；当元素本来就有类名时，你要追加一个类名，则需要利用字符串拼接操作：

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

对函数进行抽象：把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象（abstraction），把具体的值转换为函数的参数，就可以让其成为一个更通用的函数。

第十章用JavaScript实现动画效果

setTimeout( “function”, interval )
clearTimeout( )

setTimeout能够让某个函数在经过一段时间之后才开始执行。这个函数带有两个参数:第一个参数通常是一个字符串，其内容是将要执行那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间以后才开始执行一个参数所给的函数。

一般把这个函数调用赋值给一个变量 variable = setTimeout("function",interval)
clearTimeout(variable) 表示取消某个正在排队等待执行的函数；
例子：
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var distX,distY;
if(elem.movement){
clearTimeout(elem.movement);
}
if(xpos==final_x&&ypos==final_y){
return true;
}

if(xpos<final_x){
distX = Math.ceil((final_x -xpos)/10)
xpos += distX;
}
if(xpos>final_x){
distX = Math.ceil((xpos-final_x)/10)
xpos -= distX;
}
if(ypos<final_y){
distY = Math.ceil((final_y -ypos)/10);
ypos += distY;
}
if(ypos>final_y){
distY = Math.ceil((ypos-final_y)/10);
ypos -= distY;
}
elem.style.left = xpos+"px";
elem.style.top = ypos+"px";
//var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
//elem.movement= setTimeout(repeat,interval);
//setTimeout递归调用，函数带有参数会报错，需要用匿名函数包装下
elem.movement = setTimeout(function(){
moveElement(elementID,final_x,final_y,interval)
},interval)
}

function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";

moveElement("message",200,200,100)
}
positionMessage()

*** Math.ceil(number) 向上取整
Math.floor(number) 向下取整

Math.round(number) 四舍五入

第十一章HTML5

Canvas 视频音频和表单新特性，详细知识可百度学习。
贝塞尔曲线可以去查看相关资料；
addEventListener() 绑定监听事件，多个事件都可执行；如果用on()绑定事件的话，多个事件，后面的事件会覆盖前面的事件，只执行最后一个事件。

第十二章综合示例
利用之前章节的知识做了一个小站点。
@import url( ) 可以将多个css样式表导入合并成一个样式表；
关于综合示例中导航栏的分类，当跳转页面时，高亮显示导航中对应的页面的方法：
判断导航中a链接中的href值；与当前页面的url 是否相同；同时根据当前链接中的文本给每个页面添加一个id 属性，给每个页面头部应用不同的背景图；
function highLightPage( href ){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var headers = document.getElementsByTagName("header");
if(headers.length == 0) return false;
var navs = headers[0].getElementsByTagName("nav");
if(navs.length == 0) return false;
var links = navs[0].getElementsByTagName("a");
var linkUrl;
for (var i = 0; i < links.length; i++) {
linkUrl = links[i].getAttribute("href");
if(window.location.href.indexof(linkUrl) != -1){
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext)
}
};
}
*** string.indexof( substring ) 在字符串中寻找子字符串的位置，返回子字符串第一次出现的位置，如果匹配不到则返回 -1；
array = string.split( character ) 根据分隔符把一个字符串分割成字符串数组
例子：
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"hello".split("", 3) //可返回 ["h", "e", "l"]

Ajax 的内容我觉得还是需要额外的看些其他的资料再全面的学习一下。
这本书知识点就整理到这，我觉得对于我来说还是挺有帮助的，对于模糊的知识还是要多敲敲代码。

JavaScript DOM 编程艺术（第2版）读书笔记（二）

猜你喜欢