配套課程web前端開發(fā)lec4對象模型_第1頁
配套課程web前端開發(fā)lec4對象模型_第2頁
配套課程web前端開發(fā)lec4對象模型_第3頁
配套課程web前端開發(fā)lec4對象模型_第4頁
配套課程web前端開發(fā)lec4對象模型_第5頁
已閱讀5頁，還剩104頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

文本對象模型版本管理修改記錄審核記錄版本號.作者描述修改日期V01肖志譚First

Draft20121123V02袁文哲20130613版本號.職務(wù)簽名修改日期主要內(nèi)容JavaScript基礎(chǔ)DOM基礎(chǔ)DOM案例分析什么是JavaScriptJavaScript是一種腳本語言（腳本語言是一種輕量 級的編程語言）。JavaScript被設(shè)計用來向HTML頁面添加交互行 為。JavaScript

由數(shù)行可執(zhí)行計算機代碼組成。JavaScript

通常被直接嵌入HTML

頁面。JavaScript是一種解釋性語言（就是說，代碼執(zhí)行 不進行預(yù)編譯）。所有的人無需購買許可證均可使用JavaScript。JavaScript

能做什么JavaScript

為HTML設(shè)計師提供了一種編程工具。

HTML創(chuàng)作者往往都不是程序員，但是JavaScript 卻是一種只擁有極其簡單的語法的腳本語言！幾 乎每個人都有能力將短小的代碼片斷放入他們的

HTML頁面當(dāng)中。JavaScript

可以將動態(tài)的文本放入HTML

頁面。類 似于這樣的一段JavaScript聲明可以將一段可變的 文本放入HTML

頁面：document.write("<h1>"+

name+"</h1>")JavaScript

可以對事件作出響應(yīng)，可以將JavaScript

設(shè)置為當(dāng)某事件發(fā)生時才會被執(zhí)行，JavaScript

能做什么例如頁面載入完成或者當(dāng)用戶點擊某個HTML元素時，JavaScript

可以讀寫HTML

元素、

JavaScript

可以讀取及改變HTML

元素的內(nèi)容。JavaScript可被用來驗證數(shù)據(jù)，在數(shù)據(jù)被提交到服 務(wù)器之前。JavaScript可被用來檢測訪問者的瀏覽器，并根據(jù) 所檢測到的瀏覽器，為這個瀏覽器載入相應(yīng)的頁 面。JavaScript

可被用來創(chuàng)建cookies，可被用來存儲 和取回位于訪問者的計算機中的信息。JavaScript

有什么特點JavaScript使網(wǎng)頁增加互動性。 JavaScript使有規(guī)律地重復(fù)的HTML文段簡化，減少下載時間。 JavaScript能及時響應(yīng)用戶的操作，對提交表單做及時的檢查，無需浪費時間交由CGI驗證。JavaScript的特點是無窮無盡的，只要你有興趣。很多人看到Java和JavaScript都有“Java”這四個 字，就以為它們是同一樣?xùn)|西，連我自己當(dāng)初也 是這樣。其實它們是完完全全不同的兩種東西。

Java，全稱應(yīng)該是JavaApplet，是嵌在網(wǎng)頁中， 而又有自己獨立的運行窗口的小程序。Java Applet是預(yù)先編譯好的，一個Applet文件（.class）用Notepad打開閱讀，根本不能理解。Java Applet功能很強大，可以訪問http、ftp等協(xié)議，甚至可以在電腦種植病毒（之前已有先例）。相比之下，JavaScript的功能就比較小了。Java和JavaScriptJava和JavaScriptJavaScript是一種“腳步”（“Script”），它直 接把代碼寫到HTML文檔中，瀏覽器讀取它們的 時候才進行編譯、執(zhí)行，所以能查看HTML源文 件就能查看到JavaScript源代碼。JavaScript沒有獨立的運行窗口，瀏覽器當(dāng)前窗口 就是它的運行窗口。它們的相同點，我想只有同 是以Java作編程語言這一點了。加入HTML

頁面<html><body><script

type="text/javascript“>document.write("Hello

World!");</script></body></html>說明：JavaScript代碼是通過包裹在<script>標(biāo)簽中加入HTML頁面，從而實現(xiàn)其功能的JavaScript

放置位置位于head

部分當(dāng)腳本被調(diào)用時，或者當(dāng)事件被觸發(fā)時，腳本就會被執(zhí)行。當(dāng)你把腳本放置到head部分后，就可以確保在需要使用腳本之前，它已經(jīng)被載入了。位于body

部分在頁面載入時腳本就會被執(zhí)行。當(dāng)你把腳本放置于body部分后，它就會生成頁面的內(nèi)容。JavaScript

放置位置使用外部JavaScript有時希望在若干個頁面中運行JavaScript，同時不在每個頁面中寫相同的腳本，可以將JavaScript寫入一個外部文件之中。然后以.js

為后綴保存這個文件。注意：1.外部文件不能包含<script>

標(biāo)簽。2.把.js

文件指定給<script>

標(biāo)簽中的"src"屬性JavaScript

放置位置應(yīng)用服務(wù)器IE解析HTML標(biāo)簽和JavaScript腳本返回響應(yīng)

從服務(wù)器端下載含JavaScript的頁面客戶端請求含JS的頁面1用戶輸入2發(fā)送請求3JavaScript

執(zhí)行原理JavaScript的基本語法多行注釋/*多行注釋示例注釋多行注釋示例*/單行注釋//注釋第1行//注釋第2行JavaScript注釋JavaScript數(shù)據(jù)類型JavaScript數(shù)據(jù)類型基本類型特殊類型組合類型Number：數(shù)字

String：字符

Boolean：布爾Null：空

Undefined：未定義Array：數(shù)組

Object：對象數(shù)字類型整數(shù)十進制：使用0～9

的數(shù)字序列表示。如：25，+234，-998，085八進制：使用0～7的數(shù)字序列表示，首位必須是0。如：0235，-065十六進制：使用0～9、A、B、C、D、E、F（或a、b、c、d、e、f）的數(shù)碼序列表示，前兩位必須是0X

或0x。如：0x235，-0XA8，0XEF數(shù)字類型浮點數(shù)浮點數(shù)是可以有小數(shù)部分的數(shù)值。普通形式。由整數(shù)部分、小數(shù)點和小數(shù)部分組成，如：3.2、12.0、12.、.5、-1.8指數(shù)形式。如5.34e5（表示5.34×105）、312E-4（表示312×10-4）NaN:

非數(shù)字,表示無意義的數(shù)學(xué)運算結(jié)果null：一個特殊的空值String數(shù)據(jù)類型字符串用于表示文本數(shù)據(jù)，由0個或多個字符組 成的序列組成字符串常量:

必須為字符串首尾添加成對的雙引 號“或單引號‘，例如："Hello

word!"Boolean數(shù)據(jù)類型Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0布爾值也可以看作on/off、yes/no、1/0對應(yīng)true/falseBoolean值主要用于JavaScript的控制語句，例如：if

(x==1){y=y+1;}else{y=y-1;}特殊數(shù)據(jù)類型空值NullJavaScript中的關(guān)鍵字null是一個特殊的值，它表示為空值，用于定義空的或不存在的引用。未定義值Undefied未定義類型的變量是undefined，表示變量還沒有賦值（如var

a;），或者賦予一個不存在的屬性值（如var

a=String.notProperty;）。比較結(jié)果null與空字符串不相等，null代表什么也沒有，空字符串則代表一個為空的字符串null與false不相等，但是!null等于truenull與0不相等，但是在C++等其他語言中是相等的null與undefined相等，但是null與undefined并不相同變量的聲明和賦值聲明一個變量的格式var

變量名;聲明多個變量的格式var

變量1，變量名2,變量名3;賦值：聲明時給出初始值var

name="張三";賦值：使用賦值語句age

=

20;運算符號運算符對一個或多個變量或值（操作數(shù)）進行運算，并返回一個新值根據(jù)所執(zhí)行的運算，運算符可分為以下類別：算術(shù)運算符+、-、*

、/、%、++、--、-(求反)比較運算符==、!=、>、>=、<、<=邏輯運算符&&、||、！運算符的優(yōu)先順序。計算復(fù)雜表達式的順序依賴于運算符的優(yōu)先級（優(yōu)先級越高越先計算）算術(shù)運算符＞關(guān)系運算符關(guān)系運算符＞邏輯運算符邏輯運算符＞賦值運算符例邏輯控制語句if條件語句switch多分支語句for、while循環(huán)語句if(條件){//JavaScript代碼;}else{//JavaScript代碼;}switch(表達式){case

常量1:JavaScript語句1;break;case

常量2:

JavaScript語句2;break;...default:

JavaScript語句3;}for(初始化;條件;增量){語句集;}while(條件){語句集;}數(shù)據(jù)類型轉(zhuǎn)換如果操作數(shù)的數(shù)據(jù)類型不是運算符所要求的類型，那么JavaScript

會進行隱式類型轉(zhuǎn)換控制方法：對于+運算符若1個操作數(shù)為字符串，則為字符串連接運算若兩個操作數(shù)都不是字符串，則為算術(shù)加運算對于其他運算符，將操作數(shù)轉(zhuǎn)換為相應(yīng)類型的值使用函數(shù)parseInt()

和parseFloat()數(shù)據(jù)類型轉(zhuǎn)換

+運算符數(shù)字+字符串：數(shù)字轉(zhuǎn)換為字符串?dāng)?shù)字+布爾值：true轉(zhuǎn)換為1，false轉(zhuǎn)換為0字符串+布爾值：布爾值轉(zhuǎn)換為字符串true或false強制類型轉(zhuǎn)換函數(shù)函數(shù)parseInt：強制轉(zhuǎn)換成整數(shù)eg：parseInt("6.12")=6parseInt(“12a")=12parseInt(“a12")=NaNparseInt(“1a2")=1函數(shù)parseFloat：強制轉(zhuǎn)換成浮點數(shù)eg：parseFloat("6.12")=6.12函數(shù)eval：將字符串強制轉(zhuǎn)換為表達式并返回結(jié)果eg：eval("1+1")=2eval("1<2")=true數(shù)據(jù)類型轉(zhuǎn)換類型查詢函數(shù)typeof

：查詢數(shù)值當(dāng)前類型(string/

number/boolean/object)eg：typeof("test"+3)="string",eg：

typeof(null)="object“eg：

typeof(true+1)=“number”eg：

typeof(true-false)=“number”使用對話框2021/8/18

中山大學(xué)計算機科學(xué)系

30使用對話框進行輸入和輸出3

種對話框:警示、確認(rèn)和提示對話框警示對話框:alert()方法alert("歡迎瀏覽本頁面！");確認(rèn)對話框:confirm()，返回true

或falsevisited=confirm(“您來過湖北嗎？");show_text=visited?“您也認(rèn)為湖北很美吧！”:“歡迎您有機會來湖北參觀!";document.write(show_text);提示對話框:prompt()，返回用戶輸入name=prompt("請輸入您的姓名:","");document.write("尊敬的"+name+"：歡迎您進入我的主頁！");JavaScript函數(shù)函數(shù)函數(shù)的定義所謂“函數(shù)”，是有返回值的對象或?qū)ο蟮姆椒?。函?shù)的種類常見的函數(shù)有：構(gòu)造函數(shù)，如Array()，能構(gòu)造一個數(shù)組、全局函數(shù)，即全局對象里的方法、自定義函數(shù)等等。JavaScript自定義函數(shù)定義函數(shù)用以下語句：function

函數(shù)名([參數(shù)集]){...[return[<值>];]...}

function之后和函數(shù)結(jié)尾的大括號是不能省去的，就算整個函數(shù)只有一句。函數(shù)名與變量名有一樣的起名規(guī)定，也就是只包含字母數(shù)字下劃線、字母排頭、不能與保留字重復(fù)等。參數(shù)集可有可無，但括號就一定要有。JavaScript自定義函數(shù)eg：function

addAll(a,

b,

c)

{return

a

+

b

+

c;}var

total

=

addAll(3,

4,

5);這個例子建立了一個叫“addAll”的函數(shù)，它有3

個參數(shù)：

a,b,c，作用是返回三個數(shù)相加的結(jié)果。在函數(shù)外部，利用“var

total=addAll(3,4,

5);”接收函數(shù)的返回值。window.onload用法這是匿名函數(shù)的寫法,就相當(dāng)于window的onload事 件調(diào)用了一個方法，但是這個方法是匿名的。常規(guī)寫法：不帶參數(shù)：

function

Alert(){alert("Hello

World!");}window.onload=Alert();輸出：Hello

World!帶參數(shù)：

function

Alert(int){alert("int");}window.onload=Alert(5);輸出：5JSonload()調(diào)用方式onload是一個事件屬性，該事件會在頁面或圖像 加載完成后立即發(fā)生。比如<bodyonload="一個js函數(shù)">，那就會在加載 完整個頁面后觸發(fā)此事件。也可以直接window.onload=function(){//代碼}來調(diào)用JS判斷變量是否被定義不要直接這樣判斷if(!a){//如果沒有定義。。。。}上述方法不可取，js讀取一個沒有定義的變量會 報錯，可以更換為if(!window.a){//如果沒有定義}JS判斷變量是否被定義因為window對象是整個dom的對象，表示window 的某個屬性是否存在，這種方法也是適用全局變 量，如果是函數(shù)體內(nèi)的話就要使用typeof（）了if(typeof

（a）

==

"undefined"){//相關(guān)操作}實例名稱同時調(diào)用兩個方法JS怎么寫實例描述在body標(biāo)簽中可以使用“onload”事件調(diào)用一個方 法，如何使此事件同時調(diào)用兩個方法呢?本例學(xué)習(xí) 如何同時調(diào)用兩個方法。實例代碼<!DOCTYPE

html

PUBLIC

"-//W3C//DTDXHTML

1.0

Transitional//EN"

"

">同時調(diào)用兩個JS方法<html

xmlns="

"><head><metahttp-equiv="Content-Type"

content="text/html;charset=utf-8"

/><title>同時調(diào)用兩個方法JS怎么寫</title><script

language="javascript">function

test1(){alert("第一個方法");}//第一個方法同時調(diào)用兩個JS方法function

test2()

//第二個方法{alert("第二個方法");}function

together(){test1();test2();}</script></head>//同時調(diào)用的方法同時調(diào)用兩個JS方法<body

onload="together()">同時調(diào)用2個方法實例</body></html>運行效果同時調(diào)用兩個JS方法同時調(diào)用兩個JS方法難點剖析本例的重點是“together”方法。其完成了對兩個方法的調(diào)用，然后使用body標(biāo)簽的“onload”事件調(diào)用

“together”方法。本例主要以變通的方式實現(xiàn)兩個方法的同時調(diào)用。DOM文檔對象模型DOM:英文全稱為DocumentObjectModel，譯成 中文即是：文檔對像模型。DOM其實就是文檔內(nèi) 容的結(jié)構(gòu)關(guān)系，文檔類型可以是HTML或XML。 DOM具有對HTML文件和XML文件元素的訪問控 制能力，簡單點說利用DOM可以對某個HTML或 XML文件添加、修改、刪除元素、更改其現(xiàn)有的 結(jié)構(gòu)或內(nèi)容。DOM類型文檔的子節(jié)點文檔信息查找元素特殊集合DOM一致性檢測文檔寫入文檔的子節(jié)點雖然DOM標(biāo)準(zhǔn)規(guī)定Document節(jié)點的子節(jié)點可以是

DocumentType、Element、ProcessingInstruction或 Comment，但還有兩個內(nèi)置的訪問其子節(jié)點的快 捷方式。第一個就是documentElement屬性，該屬性始終指 向HTML頁面中的<html>元素。另一個就是通過childNodes列表訪問文檔元素，但 通過documentElement屬性則能更快捷、更直接地 訪問該元素。文檔的子節(jié)點<html><body>#</body></html>,這個頁面在經(jīng)過瀏 覽器解析后，其文檔中只包含一個子節(jié)點，即<html>元素?？梢酝ㄟ^documentElement或childNodes列表來訪問這個元素，如下所示。var

html=document.documentElement；//取得對<html>的引用alert（html===document.childNodes[0]）;//truealert（html===document.firstChild

[0]）;//true這個例子說明，documentElement、firstChild和childNodes[0]的值相同，都指向<html>元素。文檔信息var

originalTitle=document.title;//取得文檔標(biāo)題document.title=“New page

title”;//設(shè)置文檔標(biāo)題var

url=document.URL;//取得完整的URLvar

domain=document.domain；//取得域名var

referrer=document.referrer；//取得來源頁面的

URLURL與domain屬性是相互關(guān)聯(lián)的。例如，如果

document.URL等于http：/WileyCDA/,那么

document.domain就等于。查找元素取得元素的操作可以使用document對象來完成， 其中Document類型為此提供了兩個方法：第一個方法，getElementById()，接受一個參數(shù)<div

id=“myDiv”>Some

text</div>var

div=document.getElementById(“myDiv”);//取得<div>元素的引用另一個常用方法，getElementsByTagName()，下 列代碼會取得頁面中所有的<img>元素，并返回 一個HTMLCollection。var

images=document.getElementsByTagName(“img”)；DOM一致性檢測由于DOM分為多個級別，也包含多個部分，因此 檢測瀏覽器實現(xiàn)了DOM的哪些部分就十分必要。document.implementation屬性就是為此提供相應(yīng)信 息和功能的對象，與瀏覽器對DOM的實現(xiàn)直接對 應(yīng)。DOM1級只為document.implementation規(guī)定了 一個方法，即hasFeature()。這個方法接受兩個參 數(shù)：要檢測的DOM功能名稱及版本號。如果瀏覽 器支持給定名稱和版本的功能，則該方法返回true，如下面的例子所示：varhasXmlDom=document.implementation.hasFeature(“XML”,”1.0”);文檔寫入<html><head><title>document.write(

)Example</title></head><body><p>The

current

date

and

time

is:<script

type=“text/javascript”>document.write(“<strong>”+(new

Date(

)).toString()+”</strong>”)</script></p></body></html>這個例子展示了在頁面加載過程中輸出當(dāng)前日期和時間的代碼。其中，日期包含一個<strong>元素中，就像在

HTML頁面中包含普通的文本一樣。這樣做會創(chuàng)建一個

DOM元素，而且可以在將來來訪問該元素。通過write()和writeln()輸出的任何HTML代碼都將會如此處理。DOM樹形結(jié)構(gòu)在DOM中，HTML文檔的層次結(jié)構(gòu)被表示為一個樹形結(jié) 構(gòu)。樹的根節(jié)點是一個表示當(dāng)前HTML文檔的Document 對象，樹的每個子節(jié)點表示HTML文檔中的不同內(nèi)容。查找HTML

元素通常，通過JavaScript需要操作HTML

元素。為了做到這件事情，您必須首先找到該元素。有 三種方法來做這件事：通過id

找到HTML

元素通過標(biāo)簽名找到HTML

元素通過類名找到HTML

元素通過id

查找在DOM中查找HTML元素的最簡單的方法，是 通過使用元素的id。這行代碼用來查找id="intro"元素：var

x=document.getElementById("intro");如果找到該元素，則該方法將以對象（在x中） 的形式返回該元素。如果未找到該元素，則x

將包含null。通過標(biāo)簽名查找本例查找id="main"的元素，然后查找"main"中 的所有<p>

元素：var

x=document.getElementById("main");var

y=x.getElementsByTagName("p");提示：通過類名查找HTML元素在IE5,6,7,8中 無效。通過類名查找用類名定位元素是一種廣泛流傳的技術(shù)，這一技 術(shù)是非常易行的：遍歷所有元素(或所有元素的一 個子集)，選出其中具有特定類名的。從所有元素 中找出具有特定類名的元素的一個函數(shù)function

hasClass(name,type)

{var

r=[];

//限定類名(允許多個類名)var

re

=

new

RegExp("(^|\\s)"

+

name

+

"(\\s|$)");//用類型限制搜索范圍，或搜索所有的元素

var

e=document.getElementsByTagName_r(type||

“*”);for(var

j=0;

j<e.length;

j++)//如果元素類名匹配，則加入到返回值列表中通過類名查找if

(

re.test(e[j])

)

r.push(

e[j]

);return

r;}//返回匹配的元素現(xiàn)在你可以通過一個指定的類名使用些函數(shù)來快 速地查找任何元素，或特定類別的任何元素(比如<li>或<p>)。指定要查找的標(biāo)簽名總會比查找全部

(*)要快，因為查找元素的范圍被縮小了。比如在我們的HTML文檔里，如果想要查找所有類名包含”test”的元素，你可以這么做：hasClass(“test”);通過類名查找如果你只想查找類名包含”test”的所有<li>元素， 則這樣：hasClass(“test”,”li”)最后，如果你想找到第一個類名包含”test”的<li> 元素，則這么做：hasClass(“test”,”li”)[0]這個函數(shù)單獨使用已經(jīng)很強大了，而當(dāng)與

getElementById和getElementByTagname聯(lián)合使用 時，你就擁有了非常強大的可完成最復(fù)雜的DOM 工作的一套工具。改變HTML

輸出流JavaScript

能夠創(chuàng)建動態(tài)的HTML

內(nèi)容：今天的日期是：Thu

Jun

13

2013

17:12:58

GMT在JavaScript

中，document.write()

可用于直接向HTML

輸出流寫內(nèi)容。在火狐瀏覽器代碼見下頁改變HTML

輸出流代碼如下：<html

xmlns="

"><head> <meta

http-equiv="Content-Type"content="text/html;

charset=utf-8"

/><title>

</title></head><html><body><script>document.write(Date());改變HTML

內(nèi)容修改HTML

內(nèi)容的最簡單的方法時使用innerHTML

屬性。如需改變HTML

元素的內(nèi)容，請使用這個語法：document.getElementById(id).innerHTML=new

HTML在火狐瀏覽器代碼見下頁改變HTML

內(nèi)容代碼如下：<html

xmlns="

"><head>

<meta

http-equiv="Content-Type"content="text/html;

charset=utf-8"

/><title>

</title></head><body><p

id="p1">Hello

World!</p><script>改變HTML

樣式如需改變HTML

元素的樣式，請使用這個語法：

document.getElementById(id).perty=new style在火狐瀏覽器代碼見下頁改變HTML

樣式代碼如下：<html

xmlns="

"><head><meta

http-equiv="Content-Type"

content="text/html;charset=utf-8"

/><title>

</title></head><body><p

id="p1">Hello

World!</p><p

id="p2">Hello

World!</p>改變HTML

樣式<script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";</script><p>上面的段落已被一段腳本修改。</p></body></html>節(jié)點的類型和組成每個節(jié)點都由一個Node對象表示，Node對象提供 了nodeType屬性來表示節(jié)點的類型、nodeName 屬性表示節(jié)點的名稱、nodeValue屬性表示節(jié)點的 值。DOM為不同類型的節(jié)點提供了相應(yīng)的接口， 當(dāng)知道一個節(jié)點為某種類型時，則可以使用相應(yīng) 的接口所定義的屬性和方法。節(jié)點之間的關(guān)系節(jié)點與節(jié)點之間通常有3種關(guān)系：父子關(guān)系、兄弟關(guān)系和 祖孫關(guān)系。在上圖中，節(jié)點<html>是節(jié)點<head>和節(jié)點<body>的父節(jié)點，<head>和<body>節(jié)點是<html>節(jié)點的子節(jié)點，而<head>和<body>互為兄弟關(guān)系。同樣，<body>節(jié)點是<h1>和<p>節(jié)點的父節(jié)點，<h1>和<p>節(jié)點是<body>節(jié)點的子節(jié)點，<h1>和<p>節(jié)點互為兄弟節(jié)點。一個節(jié)點的父節(jié)點以上級別的節(jié)點，稱為這個節(jié)點的祖先節(jié)點，這個節(jié)點稱為祖先節(jié)點的子孫節(jié)點。例如<html>節(jié)點是<p>節(jié)點的祖先節(jié)點，<p>節(jié)點是<html>節(jié)點的子孫節(jié)點。

DOM為Node對象提供了一組屬性來表達這些關(guān)系，使得程序可以非常方便的獲得對節(jié)點的引用。節(jié)點的引用需要對一個節(jié)點做相應(yīng)操作時，首先需要獲得對 這個節(jié)點的引用。DOM定義了大量的屬性和方法 可以使程序方便的獲得對目標(biāo)節(jié)點的引用。一般 可以通過id屬性、name屬性、標(biāo)簽名、節(jié)點間的 關(guān)系來獲得想要的節(jié)點。根據(jù)id屬性引用節(jié)點在HTML中，可以給節(jié)點添加一個id屬性，從而通過

document對象的getElementById方法來查找擁有指定id屬性 值的節(jié)點。說明：id屬性是全局唯一的，每一個元素只能有一個id根據(jù)name屬性引用節(jié)點通過docment對象的getElementsByName方法可以取得文檔 中所有具有指定name屬性的節(jié)點的集合，該方法返回的是 一個數(shù)組。根據(jù)標(biāo)簽名引用節(jié)點Node對象提供了getElementsByTagName方法來查找所有標(biāo) 簽名與給定參數(shù)一致的下屬節(jié)點，該方法返回一個數(shù)組。 在介紹document對象的links屬性時，已經(jīng)向讀者介紹過一 個改變文檔中所有鏈接背景色的示例。引用父節(jié)點Node對象提供了parentNode屬性來引用當(dāng)前節(jié)點的父節(jié)點引用子節(jié)點Node對象提供了3個屬性來引用其直屬子節(jié)點，分別是

childNodes、firstChild和lastChild。childNodes屬性來引用 其所有的直屬子節(jié)點。firstChild屬性等于childNodes返回的 元素集合中的第一個元素。lastChild屬性等于childNodes返 回的元素集合中的最后一個元素。說明：此效果是在IE上實現(xiàn)的，火狐將空格看成文本，當(dāng)成其子元素引用相鄰的節(jié)點Node對象的previousSibling和nextSibling屬性保存 了節(jié)點的上一個和下一個兄弟節(jié)點的引用。代碼引用相鄰的節(jié)點效果圖運行火狐顯示效果點擊按鈕ChickMe！的效果點擊確定后的效果點擊確定后的效果創(chuàng)建元素節(jié)點當(dāng)需要創(chuàng)建一個元素節(jié)點時，可以使用document 對象的createElement方法。該方法接受一個標(biāo)識 需要創(chuàng)建的元素的標(biāo)簽名的字符串參數(shù)，返回對 被創(chuàng)建的節(jié)點的引用。代碼創(chuàng)建元素節(jié)點效果圖運行火狐顯示效果創(chuàng)建文本節(jié)點使用createTextNode方法可以創(chuàng)建一個文本節(jié)點， 該方法接受一個字符串作為創(chuàng)建的文本節(jié)點的文 本值。示例代碼如下：

document.createTextNode(‘It

is

a

text

node’);代碼創(chuàng)建文本節(jié)點代碼創(chuàng)建文本節(jié)點效果圖點擊按鈕addButton點擊按鈕addFragment運行火狐顯示效果添加節(jié)點Node對象提供了appendChild方法來將程序創(chuàng)建的 節(jié)點，添加到父節(jié)點的直屬子節(jié)點列表的末尾。 該方法也可作用于已經(jīng)存在于DOM樹中的節(jié)點， 執(zhí)行方法后會改變節(jié)點在DOM樹中的位置，而不 是插入一個新的節(jié)點。代碼添加節(jié)點代碼添加節(jié)點效果圖運行火狐效果顯示雙擊按鈕效果顯示插入子節(jié)點Node對象提供了insertBefore方法來將新節(jié)點插入 到指定子節(jié)點的前面，其語法格式如下所示：

parentNode.insertBefore(newNode,childNode);代碼插入子節(jié)點效果圖運行火狐效果顯示，插入了一個內(nèi)容為

World

Hello的節(jié)點替換子節(jié)點Node對象提供了replaceChild方法來使用一個新的 節(jié)點替換一個子節(jié)點，其語法格式如下所示：

parentNode.replaceChild(newNode,childNode);代碼替換子節(jié)點效果圖Word

Hello

替換了Hello

World運行火狐效果顯示復(fù)制節(jié)點Node對象提供了cloneNode方法來得到Node對象的 一個副本。cloneNode方法接受一個布爾值參數(shù)， 來標(biāo)識返回的節(jié)點副本中是否包含原節(jié)點的子節(jié) 點。當(dāng)參數(shù)為true時，則包含子節(jié)點；當(dāng)參數(shù)為

false時，則不包含子節(jié)點。代碼復(fù)制節(jié)點代碼復(fù)制節(jié)點效果圖運行火狐效果顯示刪除子節(jié)點Node對象提供了removeChild方法來刪除一個直屬 子節(jié)點，該方法接受一個參數(shù)，為需要參數(shù)的子 節(jié)點的引用。基本語法如下所示：

parentNode.removeChild(childNode);刪除子節(jié)點代碼刪除子節(jié)點運行火狐效果顯示雙擊確認(rèn)效果顯示刪除子節(jié)點刪除了子節(jié)點C刪除了子節(jié)點b讀取節(jié)點屬性使用Node對象的getAttribute方法可以得到節(jié)點的 某一屬性的值，該方法接受一個屬性名作為參數(shù)，返回指定屬性的值。代碼讀取節(jié)點屬性效果圖瀏覽器左上角顯示彈出對話框添加和修改屬性節(jié)點當(dāng)需要添加或者修改一個屬性節(jié)點時，可以使用

Node對象的setAttribute方法。W3C并沒有為這兩 部操作提供兩部不同的方法，而是將這兩項功能 集中到了setAttribute這一個方法。setAttribute方法 的基本語法格式如下所示：

node.setAttribute(attName,attValue);刪除屬性節(jié)點當(dāng)需要刪除一個節(jié)點的某個屬性時，可以使用

removeAttribute方法。removeAttribute方法接受一 個參數(shù)，表明了需要刪除的屬性的名稱。其基本 語法格式如下所示：

node.removeAttribute(attName);代碼刪除屬性節(jié)點效果圖運行火狐效果顯示去掉js代碼效果顯示獲取和設(shè)置元素CSS類通過設(shè)置元素的class屬性，可以為元素指定一個css類來設(shè)置元素的樣式。例子:代碼效果圖獲取和設(shè)置元素樣式DOM為Node對象定義了style屬性，以此作為對

CSS樣式操作的接口。元素的style屬性是一個對 象，保存了元素的CSS樣式信息。例如

node.style.backgroundCo

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論