(一) 基礎(chǔ)
1.現(xiàn)在的XHTML都是符合XML規(guī)范的，XML里面
<??? ?>
包含的內(nèi)容稱為處理指令（processing instruction),它主要給XML解析器一些額外的信息，來(lái)告訴解析
器如何處理XML數(shù)據(jù)，例如所有的XML文件開(kāi)頭都有
???
<?xml version="1.0"?>
也可以指定XML文件的樣式表
???
<?xml-stylesheet type="text/css"?>
?2. DOM 節(jié)點(diǎn)的類型
?? ?
Document
最頂層節(jié)點(diǎn)，所有的其它節(jié)點(diǎn)都是附屬于它的。
??
?DocumentType?? ?
DTD引用（使用<!DOCTYPE>語(yǔ)法）的對(duì)象表示形式，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.
它不能包含子節(jié)點(diǎn)。
??
?DocumentFragment
可以象Document一樣保存其它節(jié)點(diǎn)。
??
?Element
一對(duì)標(biāo)簽的內(nèi)容。
??
?Attr
標(biāo)簽里面的屬性名稱和屬性值
??
?Text
標(biāo)簽之間的文本或者CDataSection里面的文本
??
?CDataSection
<![CDATA[ ]]>
的對(duì)象表現(xiàn)形式
??
?Entity?? ?
表示DTD中的一個(gè)實(shí)體定義，例如
<!ENTITY foo "foo">
。這個(gè)節(jié)點(diǎn)類型不能包含子節(jié)點(diǎn)
??
?EntityReference
代表一個(gè)實(shí)體引用，例如"。這個(gè)節(jié)點(diǎn)類型不能包含子節(jié)點(diǎn)
??
?ProcessingInstruction
代表一個(gè)處理指令，例如：
<?xml-stylesheet type="text/css"?>
??
?Comment
XML注釋，不能包含子節(jié)點(diǎn)
??
?Notation
代表在DTD中定義的記號(hào)，很少用。
?3. DOM操作函數(shù)
?? ??? ?a. 對(duì)屬性的操作，
getAttribute(),setAttribute(),removeAttribute()
, 或者attributes.getNamedItem(), attributes.setNamedItem(),
attributes.removeNamedItem()
?? ?b. 對(duì)子節(jié)點(diǎn)的訪問(wèn)，
?? ??? ?
getElementsByTagName()
, 可以傳入"*"來(lái)獲得所有的節(jié)點(diǎn)，但是這個(gè)結(jié)果和document.all是等價(jià)的
?? ??? ?
getElementsByName()
， IE6和Opera7.5在這個(gè)方法上有些錯(cuò)誤，它們還會(huì)返回id等于傳入?yún)?shù)的Element，而且它們只檢查<input/><img/>
元素
?? ??? ?
getElementById()
id是唯一的，所以返回值最多只有一個(gè)Element，IE6對(duì)于這個(gè)方法有一個(gè)bug，如果傳入?yún)?shù)匹配某個(gè)元素的name，它也
會(huì)返回這個(gè)元素
?? ?c. 創(chuàng)建和操作節(jié)點(diǎn)
?? ???
?
createAttributge
?? ??? ?createCDATASection
?? ??? ?createComment
?? ??? ?createDocumentFragment
?? ??? ?createElement
?? ??? ?createEntity
?? ??? ?createProcessingInstruction
?? ??? ?createTextNode
?? ?d. 增加節(jié)點(diǎn)常用方法：
createElement(),createTextNode(),appendChild()
,使用這些方法的時(shí)候要注意，有些Element是不可以appendChild的。
?? ?e. 刪除節(jié)點(diǎn)常用方法：
removeChild(), replaceChild(), insertBefore()
?? ?f. 如果操作的次數(shù)比較多，會(huì)導(dǎo)致多次刷新，這個(gè)時(shí)候可以使用
createDocumentFragment()
函數(shù)創(chuàng)建document片段，整理好了，一次性的添加到document里面
(二) HTML DOM
a.
<img src="mypicture.jpg" border="0"/>
,如果要改屬性可以通過(guò)
getAttribute()
或者
setAttribute()
,也可以直接寫為 var nodeImg = document.getElementByID(); nodeImg.src = ""; nodeImg.border = "1";因?yàn)閏lass是ECMAScript的關(guān)鍵字，所以對(duì)于class屬性，我們調(diào)用nodeImg.className = "".注意：IE在setAttribute()上有個(gè)很大的問(wèn)題，無(wú)法及時(shí)刷新。
b. HTML DOM 對(duì)table的操作有一套專門的API
?? ??? ?caption ?? ??? ?指向<caption/>元素（如果存在）
?? ??? ?tBodies?? ??? ??? ?指向<tbody/>元素（如果存在）
?? ??? ?tFoot?? ??? ??? ?指向<tfoot/>元素（如果存在）
?? ??? ?tHead?? ??? ??? ?指向<thead/>元素（如果存在）
?? ??? ?rows
?? ??? ?createTHead()
?? ??? ?createTFoot()
?? ??? ?createCaption()
?? ??? ?deleteTHead()
?? ??? ?deleteTFoot()
?? ??? ?deleteCaption()
?? ??? ?deleteRow(position)
?? ??? ?insertRow(position)
?? ??? ?<tbody/>元素添加了以下內(nèi)容：
?? ??? ??? ?rows
?? ??? ??? ?deleteRow(position)
?? ??? ??? ?insertRow(position)
?? ??? ??? ?<tr/>元素添加了以下內(nèi)容：
?? ??? ??? ??? ?cells
?? ??? ??? ??? ?deleteCell(position)
?? ??? ??? ??? ?insertCell(position)
c. NodeIterator用來(lái)遍歷對(duì)象
?? ??? ?
?? ??? ?這個(gè)對(duì)象的構(gòu)造函數(shù)有四個(gè)參數(shù)：
?? ???
?root
: ?? ??? ?從樹中開(kāi)始搜索的那個(gè)節(jié)點(diǎn)
?? ???
?whatToShow
: ?? ?一個(gè)數(shù)值代碼，代表一個(gè)枚舉，后面詳細(xì)介紹
?? ???
?filter：?? ?
自定義的NodeFilter對(duì)象，決定需要忽略哪些節(jié)點(diǎn)
?? ???
?entityReferenceExpansion
: bool值，表示是否需要擴(kuò)展實(shí)體引用
?? ??? ?
?? ??? ?通過(guò)下面一個(gè)或者多個(gè)常量的與或操作，可以設(shè)置whatToShow的值：
?? ??? ?NodeFilter.SHOW_ALL
?? ??? ?NodeFilter.SHOW_ELEMENT
?? ??? ?NodeFilter.SHOW_ATTRIBUTE
?? ??? ?NodeFilter.SHOW_TEXT
?? ??? ?NodeFilter.SHOW_CDATA_SECTION
?? ??? ?NodeFilter.SHOW_ENTITY_REFERENCE
?? ??? ?NodeFilter.SHOW_ENTITY
?? ??? ?NodeFilter.SHOW_PROCESSING_INSTRUCTION
?? ??? ?NodeFilter.SHOW_COMMENT
?? ??? ?NodeFilter.SHOW_DOCUMENT
?? ??? ?NodeFilter.SHOW_DOCUMENT_TYPE
?? ??? ?NodeFilter.SHOW_DOCUMENT_FRAGMENT
?? ??? ?NodeFilter.SHOW_NOTATION
?? ??? ?方法：
????????
//
?不使用自定義NodeFilter參數(shù)，可以傳入null
????????
var
?iterator?
=
?document.createNodeIterator(document,?NodeFilter.SHOW_ALL,?
null
,?
false
);
????????
var
?node1?
=
?iterator.nextNode();??
????????
var
?node2?
=
?iterator.nextNode();?
????????
var
?node3?
=
?iterator.previousNode();
????????alert(node1?
==
?node3);?
//
?output?"true"
????????
//
?擴(kuò)展NodeFilter對(duì)象，該對(duì)象只有一個(gè)方法acceptNode()
????????
var
?myNodeFilter?
=
????????
{
????????
????????????acceptNode?:?
function
(oNode)
????????????
{
????????????
????????????????
return
?(oNode.tagName?
==
?
"
p
"
)?
?
?NodeFilter.FILTER_REJECT?:?NodeFilter.FILTER_ACCEPT;
????????????}
????????}
????????或者
????????
var
?myNodeFilter?
=
?
new
?Object();
????????myNodeFilter.acceptNode?
=
?
function
(oNode)
????????
{
????????????
return
?(oNode.tagName?
==
?
"
p
"
)?
?
?NodeFilter.FILTER_REJECT?:?NodeFilter.FILTER_ACCEPT;
????????}
????????
????????
//
?使用自定義NodeFilter對(duì)象：?
var
?iterator?
=
?document.createNodeIterator(document,?NodeFilter.SHOW_ALL,?myNodeFilter,?
false
);
????????
//
?如果使用NodeIterator遍歷，如果使用自定義的NodeFilter，忽略掉一個(gè)節(jié)點(diǎn)，它也就不遍歷該節(jié)點(diǎn)的子節(jié)點(diǎn)了，
????????
//
?所以子節(jié)點(diǎn)也會(huì)被忽略，如果不想忽略，就要使用下面的TreeWalker
d. TreeWalker有點(diǎn)像NodeIterator的大哥：它有NodeIterator所有的功能（nextNode()和previousNode()），并且添加了一些遍歷方法：
???
parentNode()
----進(jìn)入當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
???
firstChild()
----進(jìn)入當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
???
lastChild()
----進(jìn)入當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
???
nextSibling()
----進(jìn)入當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)
???
previousSibling()
----進(jìn)入當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)
??? 可以通過(guò)
document.createTreeWalker()
來(lái)創(chuàng)建TreeWalker
(三)CSS DOM 編程
1. IE4.0為
每一個(gè)Web頁(yè)面元素
引入了一個(gè)style對(duì)象來(lái)管理元素的css樣式，最后被DOM沿用至今
2. 改變border line的代碼
var
?oDiv?
=
?document.getElementById(
"
div1
"
);
oDiv.style.border?
=
?
"
1px?solid?black
"
;
3. 通過(guò)下面的代碼，可以實(shí)現(xiàn)hover的效果
<
div?
id
="div1"
?onmouseover
="this.style.backgroundColor='blue'"
?onmouseout
="this.style.backgroundColor='red'"
>
4. style對(duì)象有一些方法,這些是DOM標(biāo)準(zhǔn)里面有的，但是IE不支持，所以最好還是直接使用style的屬性,如：style.backgroundColor的形式來(lái)設(shè)置style的property值比較好。
???
style.getPropertyValue(propertyName);
??? style.getPropertyPriority();
??? style.item(index);
??? style.removeProperty(propertyName);
??? style.setProperty(propertyName, value, privority);
5. Copy下面的內(nèi)容到txt文件，然后改后綴為.htm，用IE打開(kāi)，可以看到一個(gè)黃色的Tip，主要原理是操作style.Visibility屬性，這個(gè)屬性和style.display是不一樣的，前者只是控制visible，不會(huì)影響布局，后者不僅僅控制visible，還會(huì)影響布局。
<!
DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html?
xmlns
="http://www.w3.org/1999/xhtml"
>
??? <
head
>
??? ??? <
title
>
Style?Example
</
title
>
??? ??? <
script?
type
="text/ecmascript"
>
??? ??? ??? function
?showTip(oEvent)
??? ??? ??? {
??? ??? ??????? var
?oDiv?
=
?document.getElementById(
"
divTip1
"
);
??? ??? ??????? oDiv.style.visibility?
=
?
"
visible
"
;
??? ??? ??????? oDiv.style.left?
=
?oEvent.clientX?
+
?
5
;
??? ??? ??????? oDiv.style.top?
=
?oEvent.clientY?
+
?
5
;
??? ??? ??? }
??? ??? ??? function
?hideTip(oEvent)
??? ??? ??? {
??? ??? ??? ??? var
?oDiv?
=
?document.getElementById(
"
divTip1
"
);
??? ??? ??? ??? oDiv.style.visibility?
=
?
"
hidden
"
;
??? ??? ??? }
??? ??? </
script
>
??? </
head
>
??? <
body
>
?? ? ? <
p
>
??? ?? ? ?? Move?your?mouse?over?the?red?square.
??? ??? </
p
>
??? ??? <
div
??? ? ??? ? id
="div1"
??? ?? ? ?? style
="background-color:?red;?height:?50px;?width:50px"
??? ? ??? ? onmouseover
="showTip(window.event)"
?onmouseout
="hideTip(window.event)"
>
??? ??? </
div
>
??? ??? <
div
??? ?? ? ?? id
="divTip1"
??? ?? ? ?? style
="background-color:?Yellow;?position:absolute;visibility:hidden;padding:5px"
>
??? ? ??? ? <
span?
style
="font-weight:bold"
>
??? ?? ?? ? ??? Custom?Tooltip
??? ? ??? ? </
span
>
??? ? ??? ? <
br
/>
??? ??? ? ??? ? More?details?can?go?here.
??? ??? </
div
>
??? </
body
>
</
html
>
6. 下面代碼利用style的display屬性控制折疊功能
<!
DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html?
xmlns
="http://www.w3.org/1999/xhtml"
>
????
<
head
>
????????
<
title
>
Toggle?Example
</
title
>
????????
<
script?
type
="text/ecmascript"
>
????????????
function
?toggle(sDivId)
????????????
{
????????????????
var
?oDiv?
=
?document.getElementById(sDivId);
????????????????oDiv.style.display?
=
?(oDiv.style.display?
==
?
"
none
"
)?
?
?
"
block
"
?:?
"
none
"
;
????????????}
????????
</
script
>
????
</
head
>
????
<
body
>
????????
<
div
????????????
style
="?background-color:Blue;?color:white;font-weight:bold;padding:10px;cursor:pointer"
????????????onclick
="toggle('divContent1')"
>
????????????Click?here.
????????
</
div
>
????????
????????
<
div
????????????
id
="divContent1"
?
????????????style
="border:3px?solid?blue;?height:100px;?padding:10px"
>
????????????This?is?some?content?to?show?and?hide.
????????
</
div
>
????????
????????
<
p
>
</
p
>
????????
????????
<
div
????????????
style
="background-color:Blue;?color:White;?font-weight:bold;?padding:10px;?cursor:pointer"
????????????onclick
="toggle('divContent2')"
>
????????????Click?here
????????
</
div
>
????????
<
div
????????????
id
="divContent2"
????????????style
="border:?3px?solid?blue;?height:10px;?padding:10px"
>
????????????This?is?some?content?to?show?and?hide.
????????
</
div
>
????
</
body
>
</
html
>
6. 有些元素通過(guò)設(shè)置class屬性來(lái)設(shè)置樣式，我們可以通過(guò)
document.styleSheets
集合拿到當(dāng)前文檔所有的css class。如果修改css class的設(shè)置，將影響所有的使用這個(gè)css class的元素。
??? DOM中可以使用
document.styleSheets[0].
css
Rulers
,但是IE中對(duì)應(yīng)的屬性叫
document.styleSheets[0].rulers
7. 我們可以為一個(gè)element設(shè)置style，也可以給它的父Element設(shè)置style，還可以設(shè)置css class，最后我們?cè)跒g覽器看到的效果是所有這些設(shè)置的合并，IE提供或者最后看到的style的屬性是
element.currentStyle
，它是只讀的。DOM提供的是一個(gè)方法,可以通過(guò)
document.defaultView.getComputedStyle(
element
,
hover
)
獲得，第一個(gè)參數(shù)是元素， 第二個(gè)參數(shù)是偽類：:hover,:first-letter.
(四) 表單(Form)操作
1. 創(chuàng)建表單元素是為了滿足用戶向服務(wù)器發(fā)送數(shù)據(jù)的要求，Web表單使用的Html元素有<form/>,<input/>,<select/>,<textarea/>等
2. <form/>用來(lái)向服務(wù)器傳輸數(shù)據(jù)，它的屬性有：
???
method??
表示瀏覽器發(fā)送GET請(qǐng)求或是發(fā)送POST請(qǐng)求。
???
action?? ??
表示表單所要提交到的地址URL。
???
enctype??
當(dāng)向服務(wù)器提交數(shù)據(jù)時(shí)，數(shù)據(jù)應(yīng)該使用的編碼方法，默認(rèn)是application/x-www-url-encoded,不過(guò)，如果要上傳文件，可以設(shè)置multipart/form-data
???
accept???
當(dāng)上傳文件時(shí)候，列出服務(wù)器能正確處理的mime類型。
???
accept-charset?
? 當(dāng)提交數(shù)據(jù)時(shí)，列出服務(wù)器接受的字符編碼。
3. <input/>元素是Html的主要輸入元素。通過(guò)type特性來(lái)判斷是哪種輸入控件：
??? “text"
??? "radio"
??? "checkbox"
??? "file"
??? "password"
??? "button"
??? "submit"
??? "reset"
??? "hidden"
??? "image"
4. 獲取Form使用
document.getElementById()
或者
document.forms["formId"], document.forms[0]
.
5. 獲取Form上的輸入字段
oForm.elements[0], oForm.elements["textbox1"], oForm.textbox1, oForm["textbox1"]
6. Form 上的方法：
form.submit(), form.reset()
7. <input/>有一些屬性：
??? <input type="text" validchars = ”0123456789“/>
??? <input type="text" invalidchars = ”0123456789“/>
??? 控制input可以輸入的字符，除了設(shè)置上面的屬性，還要考慮用戶paste，
??? 在IE里面，可以直接<input text="text" onpaste="return false"/>
??? 對(duì)于其它的瀏覽器，需要組織菜單paste和Ctrl + V來(lái)paste
??? <input type="text" invalidchars="0123456789" onpaste="return false" oncontextmenu="return false"
??? ?? onkeypress="return blcokchars(this, event, true)/>
function
?blockChars(oTextbox,?oEvent,?bBlockPaste)
{
????
var
?sInvalidChars?
=
?oTextbox.getAttribute(
"
invalidchars
"
);
????
var
?sChar?
=
?String.fromCharCode(oEvent.charCode);
????
var
?bIsValidChar?
=
?sInvalidChars.indexOf(sChar)?
==
?
-
1
;
????
????
if
?(bBlockPaste)
????
{
????????
return
?bIsValidChar?
&&
?
!
(oEvent.ctrlKey?
&&
?sChar?
==
?
"
v
"
);
????}
????
else
????
{
????????
return
?bIsValidChar?
||
?oEvent.ctrlKey;
????}
}
8. 對(duì)于<select/>,我們使用oListbox.options[0]來(lái)獲得選項(xiàng)。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
