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.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編程藝術讀書筆記

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

開發人員常用CHM幫助文檔下載

2007年CSDN最受歡迎的資源top100

jquery學習筆記二

正則表達式

js事件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

javascript DOM編程藝術 讀書筆記

javascript DOM編程藝術讀書筆記