第01階段web前端頁面布局基礎(chǔ)dom代碼與

1、北京傳智播客教育 DOM基礎(chǔ)加強(qiáng)傳智 . 陸遜本章內(nèi)容DOM概述及分類？XML DOM 和 HTML DOM 關(guān)系?結(jié)點(diǎn)，結(jié)點(diǎn)樹，結(jié)點(diǎn)屬性與方法？XML DOM操作綜合練習(xí)HTML DOM操作練習(xí)擴(kuò)展原型，類，對(duì)象，繼承擴(kuò)展with 與for.in語句結(jié)構(gòu)北京傳智播客教育 本章知識(shí)點(diǎn)1.Dom概述？1.什么是DOM？2.它的作用？3.分類？4.xml介紹？2.DOM樹1.結(jié)點(diǎn)？2.結(jié)點(diǎn)的屬性？3.結(jié)點(diǎn)的分類4.結(jié)點(diǎn)的關(guān)系3.對(duì)結(jié)點(diǎn)進(jìn)行CRUD操作1.查找結(jié)點(diǎn)？2.刪除結(jié)點(diǎn)？3.添加結(jié)點(diǎn)？4.修改或替換結(jié)點(diǎn)？北京傳智播客教育 DOM是什么？組成部分?document object model 文

2、檔對(duì)象模型是W3C織制訂的一套用于訪問XML和HTML文檔的標(biāo)準(zhǔn).允許腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式.分類DOM CoreXML DOMHTML DOMXML介紹北京傳智播客教育 北京傳智播客教育 DOM結(jié)構(gòu)模型北京傳智播客教育 XML DOM 和 HTML DOM 關(guān)系XML DOM 定義了訪問和處理 XML 文檔的標(biāo)準(zhǔn)方法 HTML文檔格式 符合XML語法標(biāo)準(zhǔn)，所以可以使用XML DOM API在XML DOM每個(gè)元素 都會(huì)被解析為一個(gè)節(jié)點(diǎn)Node，而常用的節(jié)點(diǎn)類型又分為元素節(jié)點(diǎn) Element屬性節(jié)點(diǎn) Attr文本節(jié)點(diǎn) Text文檔節(jié)點(diǎn) DocumentHTML DOM 定義

3、了針對(duì) HTML文檔的對(duì)象，可以說是一套 更加適用于 JavaScript 技術(shù)開發(fā) 的APIHTML DOM是對(duì)XML DOM的擴(kuò)展進(jìn)行 JavaScript DOM開發(fā) 可以同時(shí)使用 XML DOM和 HTML DOM北京傳智播客教育 BOM 和HTML DOM關(guān)系圖北京傳智播客教育 特性/方法類型/返回類型說 明nodeNameString節(jié)點(diǎn)的名字；根據(jù)節(jié)點(diǎn)的類型而定義nodeValueString節(jié)點(diǎn)的值；根據(jù)節(jié)點(diǎn)的類型而定義nodeTypeNumber節(jié)點(diǎn)的類型常量值之一ownerDocumentDocument指向這個(gè)節(jié)點(diǎn)所屬的文檔firstChildNode指向在childNo

4、des列表中的第一個(gè)節(jié)點(diǎn)lastChildNode指向在childNodes列表中的最后一個(gè)節(jié)點(diǎn)childNodesNodeList所有子節(jié)點(diǎn)的列表parentNodeNode返回一個(gè)給定節(jié)點(diǎn)的父節(jié)點(diǎn)。previousSiblingNode指向前一個(gè)兄弟節(jié)點(diǎn)；如果這個(gè)節(jié)點(diǎn)就是第一個(gè)兄弟節(jié)點(diǎn)，那么該值為nullnextSiblingNode指向后一個(gè)兄弟節(jié)點(diǎn)；如果這個(gè)節(jié)點(diǎn)就是最后一個(gè)兄弟節(jié)點(diǎn)，那么該值為nullhasChildNodes()Boolean當(dāng)childNodes包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí)，返回真attributesNamedNodeMap包含了代表一個(gè)元素的特性的Attr對(duì)象；僅用于El

5、ement節(jié)點(diǎn)appendChild(node)Node將node添加到childNodes的末尾removeChild(node)Node從childNodes中刪除nodereplaceChild(newnode, oldnode)Node將childNodes中的oldnode替換成newnodeinsertBefore(newnode, refnode)Node在childNodes中的refnode之前插入newnodeNODE接口的特性和方法北京傳智播客教育 Document對(duì)象常用方法getElementById()返回對(duì)擁有指定 id 的第一個(gè)對(duì)象的引用 getElements

6、ByName()返回帶有指定名稱的對(duì)象集合 getElementsByTagName()返回帶有指定標(biāo)簽名的對(duì)象集合 北京傳智播客教育 DOM 節(jié)點(diǎn)常用屬性nodeName如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，nodeName返回這個(gè)元素的名稱如果是屬性節(jié)點(diǎn)，nodeName返回這個(gè)屬性的名稱如果是文本節(jié)點(diǎn)，nodeName返回一個(gè)內(nèi)容為#text 的字符串 nodeTypeNode.ELEMENT_NODE -1 - 元素節(jié)點(diǎn)Node.ATTRIBUTE_NODE -2 - 屬性節(jié)點(diǎn)Node.TEXT_NODE -3 - 文本節(jié)點(diǎn)nodeValue如果給定節(jié)點(diǎn)是一個(gè)屬性節(jié)點(diǎn)，返回值是這個(gè)屬性的值如果給定節(jié)點(diǎn)是

7、一個(gè)文本節(jié)點(diǎn)，返回值是這個(gè)文本節(jié)點(diǎn)內(nèi)容如果給定節(jié)點(diǎn)是一個(gè)元素節(jié)點(diǎn)，返回值是 null北京傳智播客教育 練習(xí)問題: 打印 ”明天休息” (利用兩種以上方法) 提示:使用(firstChild lastChild childNodes)var h1Node = document.getElementsByTagName(h1);/alert(h1Node0.firstChild.nodeValue);/alert(h1Node0.lastChild.nodeValue);/alert(h1Node0.childNodes0.nodeValue);/alert(h1Node0.innerHTML);

8、/alert(h1Node0.innerText);北京傳智播客教育 練習(xí)問題:打印出 id=“bj” 該節(jié)點(diǎn)的所有子節(jié)點(diǎn)的(nodeName, nodeType, nodeValue)同時(shí)打印文本值 北京 海淀 奧運(yùn) 北京傳智播客教育 練習(xí)問題: 輸出select元素下的所有option元素中對(duì)應(yīng)的文本內(nèi)容 例如:中專 輸出-中專 作業(yè):取出的value屬性北京傳智播客教育 DOM節(jié)點(diǎn)常見操作DOM 獲取節(jié)點(diǎn) DOM 改變節(jié)點(diǎn) DOM 刪除節(jié)點(diǎn) DOM 替換節(jié)點(diǎn) DOM 創(chuàng)建節(jié)點(diǎn) DOM 添加節(jié)點(diǎn) 北京傳智播客教育 練習(xí)問題:當(dāng)單擊”北京”這個(gè)節(jié)點(diǎn)時(shí),北京這個(gè)節(jié)點(diǎn)被 ”打灰機(jī)”替換提示：bj

9、Node.replaceNode(gameNode);IE能用 bjNode.parentNode.replaceChild(gameNode,bjNode);北京傳智播客教育 練習(xí)問題: 在id=edu下增加小學(xué)請(qǐng)用三種方式寫的提示:createElement(“option”); createTextNode(“小學(xué)”);appendChild()北京傳智播客教育 練習(xí)北京傳智播客教育 練習(xí)北京傳智播客教育 練習(xí)提示：selectedIndex得到當(dāng)前選中項(xiàng),options得到所有選項(xiàng) appendChild()添加子結(jié)點(diǎn)北京傳智播客教育 練習(xí) 提示： 1.city.options.add

10、(new Option(cityListij) ; 2.city.options.length=0; 北京傳智播客教育 練習(xí)綜合作業(yè)北京傳智播客教育 擴(kuò)展javascript中模擬類的定義1.定義類并創(chuàng)建類的實(shí)例對(duì)象2.定義公有屬性和私有屬性3.定義公有方法和私有方法4.靜態(tài)屬性和靜態(tài)方法5.構(gòu)造函數(shù)（無參，有參）6.原型方式聲明屬性與方法7.直接用Object或函數(shù)對(duì)象加屬性與方法北京傳智播客教育 擴(kuò)展javascript擴(kuò)展(類，對(duì)象，原型)擴(kuò)展Array類的getMax()方法 Atotype.getMax = function()繼承 類名.prototype = 父類對(duì)象重載與重寫重載借助argum