第一部分目录
第1章 JavaScript简史
1.1 JavaScript的起源
1.2 浏览器之争
1.3 制定标准
1.4 小结
第2章 JavaScript语法
2.1 准备工作
2.2 语法
2.3 语句
2.4 变量
2.5 操作
2.6 条件语句
2.7 循环语句
2.8 函数
2.9 对象
2.10 小结
第3章 DOM
3.1 文档：DOM中的“D”
3.2 对象：DOM中的“O”
3.3 模型：DOM中的“M”
3.4 趁热打铁
3.5 小结
第4章 案例研究：JavaScript美术馆
4.1 编写标记语言文档
4.2 编写JavaScript函数
4.3 JavaScript函数的调用
4.4 对JavaScript函数进行功能扩展
4.5 小结
第5章 JavaScript编程原则和良好习惯
5.1 不要误解JavaScript
5.2 预留退路
5.3 向CSS学习
5.4 分离JavaScript
5.5 向后兼容性
5.6 小结
第6章 案例研究：JavaScript美术馆改进版
6.1 快速回顾
6.2 解决“预留退路”问题
6.3 解决“分离JavaScript”问题
6.4 JavaScript函数的优化：不要做太多的假设
6.5 DOM Core和HTML-DOM
6.6 小结
第7章 动态创建HTML内容
7.1 document.write()方法
7.2 innerHTML属性
7.3 DOM提供的方法
7.4 重回“JavaScript美术馆”
7.5 小结
7.6 下章简介
第8章 充实文档的内容
8.1 不应该做的事情
8.2 把“不可见”变成“可见”
8.3 原始内容
8.4 XHTML文档
8.5 CSS
8.6 JavaScript代码
8.7 小结
8.8 下章简介
第9章 CSS-DOM
9.1 三位一体的网页
9.2 style属性
9.3 何时该用DOM脚本去设置样式信息
9.4 className属性
9.5 小结
第10章 用JavaScript实现动画效果
10.1 何为动画
10.2 实用的动画
10.3 改进动画效果
10.4 最后的优化
10.5 小结
第11章 学以致用：JavaScript网站设计实战
11.1 案例背景介绍
11.2 页面视觉效果设计
11.3 CSS
11.4 颜色
11.5 XHTML文档
11.6 JavaScript脚本
11.7 小结
11.8 下章简介
第12章 展望DOM脚本编程技术
12.1 Web的现状
12.2 Ajax技术
12.3 Web应用
12.4 小结
附录 DOM方法和属性
第二部分 笔记
《JavaScript DOM 编程艺术》(1~6章)
1、对象，属性，方法 Object.property Object.method()
2、JavaScript 中的对象分为三种类型：用户定义的对象（user-defined object）；内建对象（native object）内建在 JavaScript语言里的对象，如Array、Math和Date等；宿主对象（host object）由浏览器提供的对象
3、节点：元素节点（element node）如<body>、<p>、<ul>等；文本节点（text node）文本节点总是包含在元素 节点的内部，但并非所有的元素节点都包含有文本节点；属性节点（attribute node）如href,value。文档中的每个
元素节点都是一个对象。
4、getElementById() 方法将返回一个对象
getElementsByTagName() 方法返回一个对象数组
5、childNodes 属性可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。返回一个包含给定元素节点的全 体子元素。element.childNodes
6、元素节点的 nodeType=1，属性节点的 nodeType=2，文本节点的 nodeType=3
7、如果想改变某个文本节点的值，使用 nodeValue 属性 node.nodeValue, node必须是文本节点，如果不是文本节点是无效的
如果节点是元素节点，那么返回null；（注意下） ，
如果是属性节点，nodeValue将返回这个属性的值。
如果是文本节点，nodeValue将返回这个文本节点的内容。
<div id="c">aaaaaaaaaaaaaaaa</div>
var c= document.getElementById("c");
c.nodeValue =" dddddddddddd"; //不能设置
//alert( c.firstChild.nodeValue ) if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点
c.firstChild.nodeValue = "test"//能设置
}
如果要检索 description对象<p> 元素中的 文本值，使用 description.childNodes[0].nodeValue
8、firstChid、lastChild
9、预留退路
循序渐进 ：就是用一些额外的信息层去包裹原始 数据的作法。按照“循序渐进”原则创建出来的网页几乎，如果不是“全部”的话，都符合“预留退路”原则。
10、在HTML文档完成加载之前，DOM是不完整的。nodeName 属性总是返回一个大写字母的值，即使元素在HTML文档
里是小写字母。
读书笔记:《JavaScript DOM 编程艺术》(7章)
1、应当避免使用 document.write() 方法；innerHTML 属性是一项专利技术，不是一项业界标准。编写JavaScript 代 码时应该避免使用任何形式的专利。
2、DOM提供的几种常用方法：createElement() 创建元素节点，createTextNode() 创建文本节点，appendChild()
insertBefore()
3、两个很有用的方法：addLoadEvent()
function addLoadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
insertAfter()
function insertAfter (newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild (newElement);
} else {
parent.insertBefore (newElement, targetElement.netSibling);
}
}
读书笔记:《JavaScript DOM 编程艺术》(8章)
1、CSS 的 display 属性：inline 可以将列表项从纵向排列变成横向排列； block 可以由横向变成纵向；none
藏。
2、“可以做一件事”并不意味着“应该做这样事”。
3、循序渐进
正确的结构；然后再逐步充实被加上的正确标记的内容。充实的内容既可以通过CSS样式表实现各种呈现效果，也可以
是通过DOM脚本添加各种操作行为。
4、JavaScript 脚本只应该用来充实文档的内容，要避免使用 DOM 技术来直接插入核心内容。
5、三个不错的方法：
①显示“缩略词语表” displayAbbreviations()
function displayAbbreviations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false;
var defs = new Array();
// loop through the abbreviations
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
// create the definition list
var dlist = document.createElement("dl");
// loop through the definitions
for (key in defs) {
var definition = defs[key];
// create the definition title
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// create the definition description
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
// add them to the definition list
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
// create a headline
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
// add the headline to the body
document.body.appendChild(header);
// add the definition list to the body
document.body.appendChild(dlist);
}
②显示“文献来源链接表” displayCitations()
function displayCitations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the blockquotes
var quotes = document.getElementsByTagName("blockquote");
// loop through all the blockquotes
for (var i=0; i<quotes.length; i++) {
// if there is no cite attribute, continue the loop
if (!quotes[i].hasAttribute("cite")) continue;
// store the cite attribute
var url = quotes[i].getAttribute("cite");
// get all the element nodes in the blockquote
var quoteChildren = quotes[i].getElementsByTagName('*');
// if there are no element node, continue the loop
if (quoteChildren.length < 1) continue;
// get the last element node in the blockquote
var elem = quoteChildren[quoteChildren.length - 1];
// create the markup
var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);
var superscript = document.createElement("sup");
superscript.appendChild(link);
// add the markup to the last element node in the blockquote
elem.appendChild(superscript);
}
}
③显示“快速访问键清单”displayAccesskeys()
function displayAccesskeys() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the links in the document
var links = document.getElementsByTagName("a");
// create an array to store the accesskeys
var akeys = new Array();
// loop through the links
for (var i=0; i<links.length; i++) {
var current_link = links[i];
// if there is no accesskey attribute, continue the loop
if (current_link.getAttribute("accesskey") == null) continue;
// get the value of the accesskey
var key = current_link.getAttribute("accesskey");
// get the value of the link text
var text = current_link.lastChild.nodeValue;
// add them to the array
akeys[key] = text;
}
// create the list
var list = document.createElement("ul");
// loop through the accesskeys
for (key in akeys) {
var text = akeys[key];
// create the string to put in the list item
var str = key + " : "+text;
// create the list item
var item = document.createElement("li");
var item_text = document.createTextNode(str);
item.appendChild(item_text);
// add the list item to the list
list.appendChild(item);
}
// create a headline
var header = document.createElement("h3");
var header_text = document.createTextNode("Accesskeys");
header.appendChild(header_text);
// add the headline to the body
document.body.appendChild(header);
// add the list to the body
document.body.appendChild(list);
}读书笔记:《JavaScript DOM 编程艺术》(9-10章)
1、CSS属性 font-family 在DOM脚本代码里应写成 fontFamily
2、一般原则
3、有用的方法：
//对某一类元素设置样式
function styleElementSiblings(tag, theclass) {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName(tag);
for (var i=0; i<headers.length; i++) {
var elem = getNextElement(headers[i].nextSibling);
addClass(elem, theclass);
}
}
//设置某个元素的样式
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
element.className+= " ";
element.className+= value;
}
}
//获得下一个元素节点
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
4、用 JavaScript 实现动画效果
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);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/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);
}
笔记:《JavaScript DOM 编程艺术》(11章-End)
1、11章是将以前10章学的知识综合起来，作成一个网站，基本上没有什么新的东西，但其整体思路很好，比如说将布局、颜色、字型的CSS分开来。看完了这本书，再回顾《精通CSS》一书，其中的许多地方还值得研究，可惜当时没有像这样记录下要点，有机会再补上吧。^_^
2、DOM 方法
创建节点
①创建元素节点 createElement()
reference = document.createElement(element)
②创建文本节点 createTextNode()
reference = document.createTextNode(text)
使用appendChild把两者联系起来参见createElement.htm
复制节点
复制节点 cloneNode()
reference = node.cloneNode(deep)
这个方法只有一个布尔类型的参数：true 或 false ，true 表示复制子节点，false表示不复制子节点
插入节点
①给元素节点追加一个子节点 appendChild()
reference = element.appendChild(newChild)
②把一个给定节点插入到一个给定元素节点的给定子节点前面 insertBefore()
reference = element.insertBefore(newNode, targetNode)
删除节点
从一个给定元素里删除一个子节点 removeChild()
reference = element.removeChild(node),
参数node也是一个元素节点，比如
<div id="contain">
<p>h1</p>
<div id="ts">ts</div>
<div id="tss">tss</div>
</div>
var dd=document.getElementById("ts");
dd.parentNode.removeChild(dd);
如果想把某个节点从文档的一部分移动另一部分，appendChild() 和 insertBefore() 方法都自动删除这个节点，再把它重新插入到新位置去。
替换节点
将一个给定父元素里的一个子节点替换为另外一个节点 replaceChild()，返回值是一个指向已被替换的那个子节点的引用指针。
reference = element.replaceChild(newChild, oldChild)
如果 newChild 节点是文档树上的一个现有节点， replaceChild() 方法将先删除它再用它去替换 oldChild
参见上一个实例
var dd = document.getElementById("ts");
var ddd = document.getElementById("tss");
dd.parentNode.replaceChild(dd,ddd);使用dd替换ddd
设置属性节点
为给定元素节点添加一个新的属性值或是改变皮笑肉不笑现有属性的值 setAttribute()
element.setAttribute(attributeName, attributeValue)
查找节点
① getAttribute() ， 返回一个给定元素的一个给定属性节点的值
attributeValue = element.getAttribute(attributeName)
② getElementById() ，返回的元素节点是一个对象，这个对象有 nodeName 、nodeType 、parentNode 、childNodes 、nextSibling ,previousSibling
element = document.getElementById(ID)
③ getElementsByTagName()
elements = document.getElementsByTagName(tagName)
④ hasChildNodes()
booleanValue = element.hasChildNodes()
dd.childNodes[0] = ts
3、DOM属性
节点的属性
① nodeName
name = node.nodeName
如果节点是元素节点，nodeName 返回这个元素的名字；如果为属性节点，返回这个属性的名字；如果为文本节点，返回一个内容为＃text 的字符串。nodeName
② nodeType
integer = node.nodeType
最重要是 ELEMENT_NODE = 1， ATTRIBUTE_NODE = 2，
③ nodeValue
value = node.nodeValue
如果节点为属性节点，返回这个属性的值；如果为文本节点，返回这个文本节点的内容；如果为元素节点，返回 null
4 className 返回给定节点的class的值，id返回给定节点的id的值
node = document.getElementById("ts");
node.className,node.id
遍历节点树
① childNodes
nodeList = node.childNodes
文本节点和属性节点都不包含任何子节点，所以返回值永远为一个空数组；如果想知道某个元素有没有子节点，可用 hasChildNodes 方法；想知道某个元素有多少个子节点 node.childNodes.length
在Ie中子结点不嵌套，在firfox中只要是下级的节点就都是子结点，例如
<div id="contain">
dd</div>
<div id="id2">ddd</div>
</div>
ie中子结点的个数是2，firfox中的个数是5
② firstChild、lastChild、nextSibling、parentNode、previousSibling
