javascript DOM编程艺术读书笔记

最新推荐文章于 2023-02-06 00:11:06 发布

最新推荐文章于 2023-02-06 00:11:06 发布 · 163 阅读

文章标签：

#编程 #读书 #JavaScript #CSS #脚本 #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本书全面介绍了JavaScript DOM编程的基础知识和技术，包括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.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、预留退路：确保页面在没有JavaScript的情况下也能正常工作；分离JavaScript：把网页的结构和内容与JavaScript

脚本的动作行为分开；向后兼容性。“javascript:”伪协议的作法不好。循序渐进：就是用一些额外的信息层去包裹原始数据的作法。按照“循序渐进”原则创建出来的网页几乎，如果不是“全部”的话，都符合“预留退路”原则。

10、在HTML文档完成加载之前，DOM是不完整的。nodeName 属性总是返回一个大写字母的值，即使元素在HTML文档

里是小写字母。

读书笔记:《JavaScript DOM 编程艺术》(7章)

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章)

1、CSS 的 display 属性：inline 可以将列表项从纵向排列变成横向排列； block 可以由横向变成纵向；none 表示隐

藏。

2、“可以做一件事”并不意味着“应该做这样事”。

3、循序渐进原则：从最核心的内容开始，逐步添加额外的功能。应该先用标记语言给核心内容加上正确的标记以使其获得

正确的结构；然后再逐步充实被加上的正确标记的内容。充实的内容既可以通过CSS样式表实现各种呈现效果，也可以

是通过DOM脚本添加各种操作行为。

4、JavaScript 脚本只应该用来充实文档的内容，要避免使用 DOM 技术来直接插入核心内容。

5、三个不错的方法：

①显示“缩略词语表” displayAbbreviations()

②显示“文献来源链接表” 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()

读书笔记:《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[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 实现动画效果

笔记:《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也是一个元素节点，比如

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() 寻找有着给定标签名的所有元素，返回一个节点集合,数组所以要使用element[0]的形式

elements = document.getElementsByTagName(tagName)

④ hasChildNodes() 用来检查一个给定元素是否有子节点，返回 true 或 false,一般来说文本节点是其元素节点的子结点

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， TEXT_NODE = 3

③ 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>

ie中子结点的个数是2，firfox中的个数是5

② firstChild、lastChild、nextSibling、parentNode、previousSibling

http://hi.baidu.com/wmywind/blog/calendar/200705/index/1

javascript DOM编程艺术 读书笔记

javascript DOM编程艺术读书笔记