`
hn2002
  • 浏览: 59178 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript DOM编程艺术 读书笔记

编程读书JavaScriptCSS脚本 
阅读更多

第一部分目录

第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()

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、一般原则 ：如果想改变某个元素的呈现效果，就应该选用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 实现动画效果

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() 寻找有着给定标签名的所有元素，返回一个节点集合,数组所以要使用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 id="contain">

  <div id="id1">dd</div>

    <div id="id2">ddd</div>

</div>

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

② firstChild、lastChild、nextSibling、parentNode、previousSibling

 

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

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| 75个真正有用的javascript技术
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript_DOM_编程艺术读书笔记

    ### JavaScript DOM 编程艺术读书笔记关键知识点解析 #### 一、JavaScript简史与相关技术简介 - **XHTML（可扩展的超文本标记语言）**：这是一种更加严格、更加强大的HTML版本，旨在提高网页的可读性和可扩展性。 ...

    JavaScript dom编程艺术：个人笔记.pdf

    但根据标题和描述提供的信息，我可以为您概述“JavaScript DOM编程艺术”这本书的一些核心知识点。以下内容是基于这本书中可能涉及的主题和内容进行的假设性介绍： 1. JavaScript基础知识：学习DOM编程之前，首先要...

    javaScript DOM编程艺术2版学习笔记

    JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的权威书籍，第二版则更新了现代Web开发中的相关技术。在这个学习笔记中，涵盖了从基础到高级的JavaScript和DOM操作技巧，一共涉及1~9章的内容。以下是对...

    JavaScript DOM编程艺术（中文第二版）学习笔记

    总的来说，JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用，是学习网页动态交互和JavaScript编程的重要资源。通过学习，开发者能够熟练地创建交互式、动态的网页内容。

    JavaScript+DOM编程艺术笔记整理

    JavaScript+DOM编程艺术是前端开发领域的一本经典书籍，它涵盖了JavaScript语言的基础和DOM操作的实践技巧。在学习这本书的过程中，我们首先会了解到JavaScript的历史及其重要性，特别是它与W3C标准化的DOM（文档...

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

    《JavaScript DOM编程艺术》一书中涉及的JavaScript语法，涵盖了变量命名规则、字符串处理、数组与对象的概念、注释方式以及数据类型和相等性操作符的使用等多个方面。 首先，变量命名是编程中的一项基础工作。在...

    《JavaScript DOM 编程艺术》读书笔记之DOM基础

    在《JavaScript DOM 编程艺术》读书笔记之DOM基础中，我们将深入了解文档对象模型（Document Object Model，简称DOM）的基本概念、结构及JavaScript中的DOM操作方法。这些知识点对于前端开发人员来说至关重要，因为...

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

    以上内容总结了《JavaScript DOM 编程艺术》第一章的读书笔记，概括了JavaScript简史，从而让我们了解到这一语言的发展脉络，以及它如何从最初的技术竞争中走向标准化，并最终成为现代Web开发不可或缺的一部分。

    读JavaScript DOM编程艺术笔记

    JavaScript DOM编程艺术笔记的知识点涵盖了在网页开发中，如何通过JavaScript操作文档对象模型（DOM）来实现各种动态网页效果。以下是根据提供的内容总结的知识点： 1. 获取DOM元素的下一个兄弟节点 在DOM操作中，...

    《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

    在深入探讨JavaScript DOM编程艺术和图片库的细节之前，我们首先要理解什么是DOM。DOM，即Document Object Model（文档对象模型），是一种标准，用于表示XML或HTML文档的结构，并提供了访问和操作这些文档的方法。它...

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术是关于如何有效且高效地利用JavaScript操作网页文档对象模型（DOM）的一本书。在第二版的读书笔记中，作者提出了一些关键的实践原则，旨在提升网页性能和用户体验。以下是对这些实践的详细...

    js看书笔记

    **JavaScript和DOM编程艺术** 这篇笔记主要聚焦于JavaScript的基础知识以及如何使用DOM（Document Object Model）进行网页交互。JavaScript是一种广泛应用于web开发的脚本语言，它赋予网页动态功能，使得用户与网页...

    leetcode新手刷题指南-Study-Notes:学习资料，笔记整理

    leetcode新手刷题指南 学习资料、文章收集 TypeScript 类型体操姿势合集 React :heart_suit: React Hook Flutter 备注：中文文档内容略有滞后，版本更新没有完全...DOM编程艺术 锋利的jQuery CSS权威指南 H5匠人手册

    javascript 学习之旅 （1）

    掌握JavaScript的基础语法和编程理念，是进一步学习DOM编程艺术的前提。在未来的学习旅程中，我们还将深入探讨JavaScript如何与HTML文档对象模型（DOM）交互，以及如何利用JavaScript来动态地修改页面内容，添加交互...

    html css js网页制作实例processing-开发笔记p

    在"processing"部分，可能是指Processing.js，这是一个基于JavaScript的编程环境，专门用于创建可视化和交互式艺术作品。它简化了2D和3D图形的绘制，使得开发者可以使用类似Java的语言进行编程，但运行在浏览器中。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics