javascript DOM编程艺术 读书笔记
第一部分目录第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.4XHTML文档
8.5CSS
8.6JavaScript代码
8.7小结
8.8下章简介
第9章CSS-DOM
9.1三位一体的网页
9.2style属性
9.3何时该用DOM脚本去设置样式信息
9.4className属性
9.5小结
第10章用JavaScript实现动画效果
10.1何为动画
10.2实用的动画
10.3改进动画效果
10.4最后的优化
10.5小结
第11章学以致用：JavaScript网站设计实战
11.1案例背景介绍
11.2页面视觉效果设计
11.3CSS
11.4颜色
11.5XHTML文档
11.6JavaScript脚本
11.7小结
11.8下章简介
第12章展望DOM脚本编程技术
12.1Web的现状
12.2Ajax技术
12.3Web应用
12.4小结
附录DOM方法和属性
第二部分 笔记
《JavaScript DOM 编程艺术》(1~6章)
1、对象，属性，方法 Object.property Object.method()
2、JavaScript 中的对象分为三种类型：用户定义的对象（user-defined object）；内建对象（nativeobject）内建在 JavaScript语言里的对象，如Array、Math和Date等；宿主对象（host object）由浏览器提供的对象
3、节点：元素节点（element node）如<body>、<p>、<ul>等；文本节点（textnode）文本节点总是包含在元素 节点的内部，但并非所有的元素节点都包含有文本节点；属性节点（attributenode）如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.nodeValue
8、firstChid、lastChild
9、预留退路：确保页面在没有JavaScript的情况下也能正常工作；分离JavaScript：把网页的结构和内容与JavaScript
脚本的动作行为分开；向后兼容性。“javascript:”伪协议的作法不好。循序渐进：就是用一些额外的信息层去包裹原始 数据的作法。按照“循序渐进”原则创建出来的网页几乎，如果不是“全部”的话，都符合“预留退路”原则。
10、在HTML文档完成加载之前，DOM是不完整的。nodeName 属性总是返回一个大写字母的值，即使元素在HTML文档
里是小写字母。
读书笔记:《JavaScript DOM 编程艺术》(7章)
<div class="cnt">1、应当避免使用 document.write() 方法；innerHTML 属性是一项专利技术，不是一项业界标准。编写JavaScript 代 码时应该避免使用任何形式的专利。
2、DOM提供的几种常用方法：createElement() 创建元素节点，createTextNode() 创建文本节点，appendChild()
把新节点插入到某个节点中，insertBefore() 把一个新元素插入到一个现有元素的前面。
3、两个很有用的方法：addLoadEvent() 可以将多个 JavaScript 函数绑定到 onload 事件处理函数上
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章)
<div class="cnt">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;
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs = definition;
}
// create the definition list
var dlist = document.createElement("dl");
// loop through the definitions
for (key in defs) {
var definition = defs;
// 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.hasAttribute("cite")) continue;
// store the cite attribute
var url = quotes.getAttribute("cite");
// get all the element nodes in the blockquote
var quoteChildren = quotes.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;
// 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;
// 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 = text;
}
// create the list
var list = document.createElement("ul");
// loop through the accesskeys
for (key in akeys) {
var text = akeys;
// 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、一般原则：如果想改变某个元素的呈现效果，就应该选用CSS；如果想改变某个元素的行为，就应该选用DOM。
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.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)
<div class="date">
页:
[1]