【JavaScript DOM编程艺术(第二版)】笔记
第1章 javascript简史
1.什么是DOM?
简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\
第2章 javascript语法
1.内建对象:
内建在javascript语言里的对象.(可以new出来的)
2.宿主对象:
由浏览器提供的预定义对象称为宿主对象.
第3章 DOM
1.getElementById():
使用getElementById()方法,返回一个与那个有着给定ID属性值的元素节点对应的对象,该方法的参数就是指定的ID,注意大小写.
2.getElementsByTagName():
使用getElementsByTagName()方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素.这个方法只有一个参数,就是要查询标签的名字.也可以用"*"表示所有标签.
3.getElementsByClassName():
使用getElementsByClassName()方法返回一个具有该方法参数为名的class属性的标签的数组,这个方法非常有用,但只有较新的浏览器才支持它.
4.获取和设置属性
getAttribute():该方法不属于document对象,所以不能通过document对象调用.它只能通过元素节点调用.作用:获取节点属性的名字.
setAttribute():该方法同上类似,不过它允许我们对属性节点的值做出修改.有两个参数,第一个参数是节点属性的名字,第二个参数是要修改的值.
第4章 案例研究:javascript图片库
1.this
在函数中参数使用this表示使用这个函数的对象.
2.阻止默认行为:
eg:<a href="/http://www.baidu.com" onclick="show(this); return false;">click me</a>
如上,当我们点击这个链接是,让这个onclick事件处理函数所触发的javascript代码返回布尔值,这样一来,若为true,onclick事件处理函数就默认为"这个链接"被点击了,用户就会被带到百度这个链接窗口,反之,认为没被点击.所有,后面加上return false可以阻止默认行为的发生.
3.childNodes属性:
该属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组
eg:获取body元素下的所有子元素.
document.getElementByTagName("body")[0].childNodes
实际上使用这个方法获取到得个数比实际的多,因为文档树中的节点类型并非只有元素节点一种.,甚至连空格和换行符都会被解释为节点.
4.nodeType属性:
该属性可以解决上述的问题,这个属性可以告诉我们某个节点属于哪一种类型.用法跟childNodes一样
nodeType属性总共有12种可取值,但其中仅有3中具有实用价值:
元素节点的nodeType属性值为1.
属性节点的nodeType属性值为2.
文本节点的nodeType属性值为3.
5.nodeValue属性
该属性可以得到(和设置)一个节点的值.用法和上述类似.
6.firstChild和lastChild属性:
只需要访问childNodes数组的第一个元素,可用firstChild.
访问childNodes数组的最后一个,可用lastChild
第5章 最佳实践
1.平稳退化
如果正确地使用了javascript脚本,就可以让访问者在他们的浏览器不支持javascript的情况下仍能顺利地浏览你的网站.这就是所谓的平稳退化.
2.open()方法:
window对象的open()方法用来创建新的浏览器窗口,这个方法有三个参数:window.open(url,name,features)
第一个参数表示在新窗口里打开网页的URL地址;
第二个参数表示新窗口的名字.
第三个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性.
eg:window.open("www.baidu.com","baidu","width=320,height=480");
3"javascript:"伪协议
它可以让我们通过一个链接来调用javascript函数.
4.对象检测
对象检测最好使用逻辑非来操作,,表示"如果不存在","请离开",这样检测最好
eg:
if(!object){return false;}
5.性能考虑
尽量少访问DOM,每次一查询DOM中的某些元素,浏览器都会搜索整个DOM树,从中查找可能匹配的元素,所以最好不要重复查询,最好一次查询并把结果存放在变量中.
尽量减少标记,过多不必要的元素只会增加DOM树的规模,进而增加遍历DOM树以查找特定元素的时间.
压缩脚本,写完脚本,将它放到文档中的适当位置后,去掉不必要的字节,如空格和注释,统统删除.从而达到压缩的目的.这样可以加快加载速度.
第6章 案例研究:图片库改进版
1.addLoadEvent()函数:
该函数是自己定义的,它可以不管在页面中加载多少执行函数,它都可以绑定到window.onload事件中.每个想要执行的函数调用一次.代码如下
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
第7章 动态创建标记
1.document.write()方法:
不解释了.
2.innerHTML属性
该属性可以用来读,写某给定元素里的HTML内容.
3.DOM方法:
document.createElement()方法:
用于创建元素,参数是要创建元素的名字.
appendChild()方法:
父节点.appendChild(子节点)
用于将创建的节点插入到文档中指定的位置.参数是要插入的由createElement()方法创建的节点.
document.createTextNode()方法:
用于创建文本节点,即一段文字,参数是任意内容的字符串.
在已有元素前插入一个新元素:
insertBefore()方法:该方法将一个新元素插入到一个现有元素的前面.
调用此方法时,你必须告诉它三件事
<1>新元素:你想插入的元素(newElement).
<2>目标元素:你想把这个元素插入到哪个元素(targetElement)之前.
<3>父元素:目标元素的父元素(parentElement).
parentElement.insertBefore(newElement,targetElement)
在现有方法后插入一个新元素.
insertAfter()方法:该方法将一个新元素插入到一个现有元素的后面
4.Ajax
Ajax技术的核心就是XMLHttpRequest对象,这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色.以往的请求都由浏览器发出,而javascript通过这个对象可以自己发送请求,同时也自己处理响应.
不用IE版本中使用的XMLHTTP对象也不完全相同.为了兼容所有浏览器,getHTTPObject.js文件中的getHTTPObject函数要这样来写:
function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = 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();
}
第8章 充实文档的内容
1选用HTML,XHTML还是HTML5
若要使用XHTML DOTYPE,应将下列内容写在文档开头
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
若要使用HTML5的文档类型声明:
<!DOCTYPE HTML>
2.显示"快捷键清单"
accesskey属性可以把一个元素(如链接)与键盘上的某个特定按键关联在一起
eg:<a href="index.html" accesskey="1">Home</a>
快捷键清单代码:
<head>
<title>无标题页</title>
<script type="text/javascript">
function displayAccesskeys() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;//判断浏览器是否支持DOM
var links = document.getElementsByTagName("a"); //获取文档中所有的链接
var akeys = new Array(); //创建一个数值,保存访问键
for (var i = 0; i < links.length; i++) {//遍历链接
var current_link = links[i];
if (!current_link.getAttribute("accesskey")) continue; //如果没有accesskey属性,继续循环
var key = current_link.getAttribute("accesskey");//取得accesskey的值
var text = current_link.lastChild.nodeValue;//取得链接文本
akeys[key] = text;//添加到数组
}
var list = document.createElement("ul");//创建列表
for (key in akeys) {//遍历访问键
var text = akeys[key];//
var str = key + ": " + text;//创建放到列表项中的字符串
var item = document.createElement("li");//创建项
var item_text = document.createTextNode(str);
item.appendChild(item_text);
list.appendChild(item);//把列表项添加到表中
}
//创建标题
var header = document.createElement("h3");
var header_text = document.createTextNode("Accesskeys");
header.appendChild(header_text);
//把标题添加到页面主体
document.body.appendChild(header);
//把列表添加到页面主体
document.body.appendChild(list);
}
</script>
</head>
<body>
<ul>
<li><a href=# accesskey="1">Home</a></li>
<li><a href=# accesskey="4">Search</a></li>
<li><a href=# accesskey="9">Contact</a></li>
</ul>
<script type="text/javascript">
displayAccesskeys();
</script>
</body>
运行结果:
第9章 CSS-DOM
1.三位一体的网页
结构层,表示层,行为层
结构层:HTML标签
表示层:由CSS负责完成,CSS描述页面内容应该如何实现
行为层:负责内容应该如何响应事件这一问题.这是javascript和DOM主宰的领域
2.获取样式:
element.style.xxx
3.内嵌样式:
通过style属性获取样式有很大的局限性
style属性只能返回内嵌样式.换句话,只有把CSS style属性插入到标记里,才可以用DOM style属性去查询那些信息.
来自外部文件的样式就不能用DOM style属性检索出来的,如果把样式添加到<head>部分的<style>标签里,DOM style属性也是提取不到样式的.
4.className属性
该属性是一个可读可写的属性,凡是元素节点都有这个属性,表示给该属性的节点的class添加或替换或叠加样式名
element.className
第10章 用javascript实现动画效果
1.position属性
合法值有static,fixed,relative,absolute四种.
static:表示有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里.
relative:和staitc类似,不过它还可以(通过应用float属性)从文档的正常显示顺序里脱离出来.
absolute:我们可以把拥有该属性的元素摆放到容纳它的"容器"的任何位置.
fixed:拥有这个属性的元素在原始标记里出现的位置与它显示位置无关,因为它的显示位置由top,left,right,bottom等属性决定.
2.overflow属性
合法值有4种:visible,hidden,scroll和auto
visible:不裁剪溢出内容,浏览器将把溢出的内容呈现在其容器元素的显示区域以外,全部内容都可见.
hidden:隐藏溢出的内容.内容只显示在其容器元素的显示区域里,这意味着只有一部分内容可见.
scroll:类似于hidden,浏览器将对溢出的内容进行隐藏,但显示一个滚动条以便让用户能够滚动看到内容的其他部分.
auto:类似于scroll,但浏览器只在确实发生溢出时才显示滚动条,如果内容没有溢出,就不显示滚动条.
3.动画的代码(三个函数)
<body>
<p id="message">whee!</p>
<p id="message2">whoa!</p>
<script src="js/prepareSlideshow.js" type="text/javascript"></script>
</body>
prepareSlideshow.js中的代码:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function moveElement(elementID, final_x, final_y, interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if (xpos > final_x) {
dist = Math.ceil((xpos - final_x) / 10);
xpos = xpos - dist;
}
if (ypos < final_y) {
dist = Math.ceil((final_y - xpos) / 10);
ypos = ypos + dist;
}
if (ypos < final_y) {
dist = Math.ceil((ypos - final_x) / 10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
elem.movement = setTimeout(repeat, interval);
}
function prepareSlideshow() {
if (!document.getElementsByTagName) return false;
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", 125, 25, 20);
if (!document.getElementById("message2")) return false;
var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("message2", 125, 125, 500);
}
addLoadEvent(prepareSlideshow);第11章 HTML5
1.HTML5新标记请查看规范(http://www.w3.org/TR/html5 )
2.若想把文档升级到HTML5,就把文档类型声明改成<!DOCTYPE html>即可
HTML5的目标是和已有的HTML及XHTML文档全部兼容.
3.Modernizr(http://www.modernizr.com/)是一个开源的javascript库,利用它的检测功能,可以对HTML5文档进行更好的控制.
4.HTML5属性
Canvas
该属性可以动态创建和操作图形图像
在网页中支起一块"画布"很简单:
<canvas id="draw-in-me" width="120" height="40">
<p>Powered by HTML5 canvas</p>
</canvas>
要了解详细的绘画方法,请参考<canvas>元素的规范(http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html)
5.音频和视频
<video>,<audio>这两个元素让HTML具有了原生视屏和音频的能力.
HTML5的<video>元素为在文档中嵌入影片以及与影片交互定义了一种标准方式,同时嵌入操作简化了一个标签.:
<video src="movie.mp4">
<!--不支持原生视屏时替代内容-->
<a href="movie.mp4">Download movie.mp4</a>
</video>
自定义播放控件,可以通过一些DOM属性来实现,主要包括:
currentTime:返回当前播放的位置,以秒表示.
duration:返回媒体的总时长,以秒表示,对于流媒体返回无穷大.
paused:表示媒体是否处于暂停状态.
此外,还有一些与特定媒体相关的事件,可以用来触发你的脚本,主要事件有:
play:在媒体播放开始时发生.
pause:在媒体暂停时发生.
loadeddtata:在媒体可以从当前播放位置开始播放时发生.
ended:在媒体已播放完成而停止时发生.
不管创建什么控件,都别忘了在<video>元素中添加control属性:
<video src="movie.ogv" control>
这行代码会呈现出一个类似播放控制界面
6.表单
THML5新的输入控件类型包括:
email:用于输入电子邮件地址;
url:用于输入URL;
date:用于输入日期和时间;
number:用于输入数值;
range:用于生成滚动条;
search:用于搜索框;
tel:用于输入电话号码;
color:用于选择颜色;
相应的,新的属性包括如下这些:
autocomplete:用于文本输入框添加一组建议输入项;
autofocus:用于让表单元素自动获得焦点.
form:用于对<form>标签外部的表单元素分组;
min,max和step,用在范围和数值输入框中.
pattern:用于定义一个正则表达式,以便验证输入值;
placeholder:用于在文本输入框中显示临时性的提示信息;
required:表示必填;
