DHTML介紹-計算機網(wǎng)絡安全與防護的 課件_第1頁
DHTML介紹-計算機網(wǎng)絡安全與防護的 課件_第2頁
DHTML介紹-計算機網(wǎng)絡安全與防護的 課件_第3頁
DHTML介紹-計算機網(wǎng)絡安全與防護的 課件_第4頁
DHTML介紹-計算機網(wǎng)絡安全與防護的 課件_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第七講(上)DHTML介紹-計算機網(wǎng)絡平安與防護的PPT-互聯(lián)網(wǎng)軟件開發(fā)第七章：

DHTML介紹內容提綱1、DHTML概述2、文檔對象模型7.2文檔對象模型什么是DOM〔1〕定義：文檔對象模型〔DocumentObjectModel〕是由W3C委員會定義的標準文檔對象模型。W3C解釋為：“文檔對象模型〔DOM〕是一個能夠讓程序和腳本動態(tài)訪問和更新文檔內容、結構和樣式的語言平臺，提供了標準的HTML和XML對象集，并有一個標準的接口來訪問操作它們〞DOM的由來：最初是W3C為了解決瀏覽器混戰(zhàn)時代不同瀏覽器環(huán)境之間的差異而制定的模型標準?；贒OM標準，Web開發(fā)人員可以很快捷、平安創(chuàng)立多樣化的程序。DOM可以提供了HTML和XML兩種文檔編程接口，其中HTML文檔編程接口可以處理HTML文檔內容。7.2文檔對象模型什么是DOM〔2〕DOM實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。DOM將整個頁面映射為一個由層次節(jié)點組成的文件〔節(jié)點樹〕DOM是與編程語言無關的，因此有多種實現(xiàn)，可以和任何程序語言共同運作，如C/C++、VB、Java、C#。Web開發(fā)中最常和JavaScript合作。7.2文檔對象模型DOM的標準DOM的概念主要有：核心DOM：將帶有標記的文檔看成樹狀結構并據(jù)此對文檔進行操作；DOM事件：包括使用者熟悉的鼠標、鍵盤事件，同時包括DOM特有事件，當操作文檔對象模型的各元素對象時發(fā)生。HTMLDOM：提供用于操作HTML文檔以及類似于Javascript對象模型語法的功能部件，在核心DOM的根底上支持對所有HTML元素對象進行操作。DOMCSS：提供腳本編程實現(xiàn)CSS的接口。7.2文檔對象模型HTMLDOM節(jié)點樹HTMLDOM把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結構〔節(jié)點樹〕。圖7.1.1HTMLDOM節(jié)點樹7.2文檔對象模型DOM節(jié)點根據(jù)DOM，HTML文檔中的每個成分都是一個節(jié)點。DOM是這樣規(guī)定的：整個文檔是一個文檔節(jié)點每個HTML標簽是一個元素節(jié)點包含在HTML元素中的文本是文本節(jié)點每一個HTML屬性是一個屬性節(jié)點注釋屬于注釋節(jié)點7.2文檔對象模型節(jié)點的層次<html><head><title>DOMTutorial</title></head><body><h1>DOMLessonone</h1><p>Helloworld!</p></body></html>父節(jié)點：除文檔節(jié)點之外的每個節(jié)點都有父節(jié)點。舉例，<head>和<body>的父節(jié)點是<html>節(jié)點，文本節(jié)點"Helloworld!"的父節(jié)點是<p>節(jié)點。子節(jié)點：大局部元素節(jié)點都有子節(jié)點。比方說，<head>節(jié)點有一個子節(jié)點：<title>節(jié)點。<title>節(jié)點也有一個子節(jié)點：文本節(jié)點"DOMTutorial"。同級節(jié)點：當節(jié)點分享同一個父節(jié)點時，它們就是同級節(jié)點。比方說，<h1>和<p>是同輩，因為它們的父節(jié)點均是<body>節(jié)點。7.2文檔對象模型DOM訪問節(jié)點可通過以下方法來查找希望操作的元素：通過使用getElementById()和getElementsByTagName()方法getElementById()可通過指定的ID來返回元素，例如document.getElementById(‘maindiv’)返回ID為’maindiv’的元素。getElementsByTagName()方法會使用指定的標簽名返回所有的元素〔作為一個節(jié)點列表〕，如document.getElementsByTagName(“p〞)返回頁面中所有<p>元素這兩種方法會返回任何你所需要的HTML元素，不管它們在文檔結構中的哪個層次。7.2文檔對象模型節(jié)點列表〔nodeList〕當使用節(jié)點列表時，通常要把列表保存在一個變量中：varx=document.getElementsByTagName("p");變量x包含著頁面中所有<p>元素的一個列表，可以通過索引號來訪問這些<p>元素。通過使用length屬性來循環(huán)遍歷節(jié)點列表：varx=document.getElementsByTagName("p");for(vari=0;i<x.length;i++){//dosomethingwitheachparagraph}7.2文檔對象模型parentNode、firstChild以及l(fā)astChild<table><tr><td>John</td><td>Doe</td><td>Alaska</td></tr></table>可以通過使用一個元素節(jié)點的parentNode、firstChild以及l(fā)astChild屬性來查找和訪問元素。在右邊的HTML代碼中，第一個<td>是<tr>元素的首個子元素〔firstChild〕，而最后一個<td>是<tr>元素的最后一個子元素〔lastChild〕。此外，<tr>是每個<td>元素的父節(jié)點〔parentNode〕。7.2文檔對象模型根節(jié)點有兩種特殊的文檔屬性可用來訪問根節(jié)點：第一個屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點；第二個屬性是對HTML頁面的特殊擴展，提供了對<body>標簽的直接訪問。7.2文檔對象模型常用的對象表7.1.1常用對象對象描述WindowJavaScript層級中的頂層對象，表示瀏覽器窗口Navigator包含客戶端瀏覽器的信息History包含了瀏覽器窗口訪問過的URLLocation包含了當前URL的信息Document代表整個HTML文檔，可被用來訪問頁面中的所有元素7.2文檔對象模型Window對象Window對象在Javascript瀏覽器對象的層次圖中位于最高一層，具有唯一性，只要瀏覽器窗口翻開，就會建立Window對象。Window對象中存放的是瀏覽器整個窗口的屬性，包括各種工具條的設置、瀏覽器的外觀以及Document對象、History對象、Location對象等內容。7.2文檔對象模型Window對象的屬性〔1〕表7.1.2Window對象的常用屬性屬性描述closed返回窗口是否已被關閉。defaultStatus設置或返回窗口狀態(tài)欄中的默認文本。document對Document對象的只讀引用history對History對象的只讀引用。location用于窗口或框架的Location對象opener返回對創(chuàng)建此窗口的窗口的引用status設置窗口狀態(tài)欄的文本。top返回最頂層的先輩窗口。7.2文檔對象模型Window對象的屬性〔2〕Closed、Opener屬性Closed屬性可以判斷一個窗口是否已經(jīng)被關閉；通過Opener屬性可以通過一個窗口來操縱它的父窗口。當一個窗口翻開另外一個窗口后，它們只是通過Opener屬性，子窗口可以和父窗口發(fā)生聯(lián)系，通過Open()方法的返回值，父窗口可以和子窗口發(fā)生聯(lián)系，這樣兩個相關的窗口之間就可以實現(xiàn)互操作7.2文檔對象模型Window對象的屬性〔3〕defaultStatus、status屬性defaultStartus屬性的值是在瀏覽器窗口下面的狀態(tài)欄中缺省顯示的信息，status屬性的值是狀態(tài)欄中當前顯示的信息。例如，將瀏覽器狀態(tài)欄的當前顯示的信息通過對話框反響給用戶：<ahref="3-44.htm"OnMouseOver="Window.status='Window對象的status屬性的用法'">測試Window對象的status屬性的用法</a>Document、History、Location屬性Document屬性、History屬性、Location屬性就是瀏覽器對象中的Document對象、History對象、Location對象7.2文檔對象模型Window對象的方法〔1〕表7.1.3Window對象的常用方法方法描述alert()顯示帶有一段消息和一個確認按鈕的警告框。close()關閉瀏覽器窗口open()打開一個新的瀏覽器窗口或查找一個已命名的窗口confirm()顯示帶有一段消息以及確認按鈕和取消按鈕的對話框7.2文檔對象模型Window對象的方法〔2〕Open(頁面地址，窗口名稱，窗口風格)方法Open()方法能夠翻開一個窗口，返回的是窗口的引用，它有3個參數(shù)：頁面地址、窗口名稱和窗口風格窗口風格中可以指定瀏覽器是否具有toolbar〔工具欄〕、Location〔地址欄〕、directories〔目錄按鈕〕、status〔狀態(tài)欄〕、menubar〔菜單條〕、scrollbars〔滾動條〕，它們可以設置為yes或no，窗口風格也可以指定瀏覽器窗口的width〔寬〕和height〔高〕。例如〔點此查看〕：翻開一個窗口7.2文檔對象模型Window對象的方法〔3〕alert()方法alert()方法的功能是彈出一個警告框，在警告框內顯示字符串文本，通常，在給用戶某些警告信息的時候使用。例如7.2文檔對象模型Window對象的事件表7.1.4Window對象的常用事件事件描述onfocus當對象獲得焦點時觸發(fā)onload在瀏覽器完成對象的裝載后立即觸發(fā)onunload在對象卸載前立即觸發(fā)onresize當對象的大小將要改變時觸發(fā)onscroll當用戶滾動對象的滾動條時觸發(fā)7.2文檔對象模型Ducument對象Document對象代表的是當前的整個頁面，使用document對象可以對HTML文檔進行檢查、修改或添加內容，并處理該文檔內部的事件。在Web頁面上，document對象可通過window對象的document屬性引用，或者直接引用。7.2文檔對象模型Document對象集合表7.1.5Document常用對象集合

集合描述all[]提供對文檔中所有HTML元素的訪問。anchors[]獲取所有帶有name和/或id屬性的a對象的集合applets[]獲取文檔中所有applet對象的集合forms[]獲取以源順序排列的文檔中所有form對象的集合frames[]獲取給定文檔定義或與給定窗口關聯(lián)的文檔定義的所有window對象的集合images[]獲取以源順序排列的文檔中所有img對象的集合7.2文檔對象模型Document對象屬性表7.1.6Document對象常用屬性屬性描述bgColor設置或獲取表明對象后面的背景顏色的值cookie設置或獲取cookie的字符串值documentElement獲取對文檔根結點的引用fgColor設置或獲取文檔的前景(文本)顏色linkColor設置或獲取對象文檔鏈接的顏色parentWindow獲取容器對象所在窗口的引用URL設置或獲取當前文檔的URL7.2文檔對象模型Document對象方法表7.1.7Document對象常用方法方法描述close()關閉用document.open()方法打開的輸出流，并顯示選定的數(shù)據(jù)。getElementById()返回對擁有指定id的第一個對象的引用getElementsByName()返回帶有指定名稱的對象集合getElementsByTagName()返回帶有指定標簽名的對象集合open()打開一個流，以收集來自任何document.write()或document.writeln()方法的輸出write()向文檔寫HTML表達式或JavaScript代碼。writeln()等同于write()方法，不同的是在每個表達式之后寫一個換行符。7.2文檔對象模型History對象〔1〕在用戶在網(wǎng)上瀏覽時，瀏覽器中維護著一個用戶最近訪問過的URL地址數(shù)組，通過History對象，可以獲得最近訪問過的URL地址。運用History對象的back()、forward()方法，能夠獲得和瀏覽器工具欄中的“后退〞、“前進〞按鈕相同的效果。借助于History對象，可以獲取瀏覽器訪問過地址的信息history對象并不給出瀏覽器歷史的實際URL。該對象只提供了通過back,forward和go方法在瀏覽器歷史中導航的功能。瀏覽器歷史中的特定文檔可以由與當前頁面相對的索引值代表。例如，指定-1作為go方法的參數(shù)和單擊“后退〞按鈕一樣。7.2文檔對象模型History對象〔2〕History對象的屬性length獲取歷史列表中的元素數(shù)目。History對象的方法有三個：back()：載入歷史記錄中前一個歷史記錄的URL地址forward()：載入歷史記錄中下一個歷史記錄的URL地址go()：載入歷史記錄中任意歷史記錄的URL地址。有一個參數(shù)，代表載入歷史記錄列表中相對位置的歷史記錄，例如go(-1)那么代表載入前一條歷史記錄，和back()方法的功能一致；go(1)代表載入后一條歷史記錄，和forward()方法的功能一致。7.2文檔對象模型Navigator對象Navigator對象中存儲著關于瀏覽器版本和瀏覽器運行平臺的一些信息。由于各種瀏覽器之間還存在著不完全兼容性，而且，用戶所使用的瀏覽器版本也有差異，所以，在建立網(wǎng)站的時候，有時候有必要建立多個不同版本的網(wǎng)頁，以適應不同瀏覽器的需要，在這里就需要運用Navigator對象進行判斷。7.2文檔對象模型Navigator對象的屬性〔1〕appName屬性。通過Navigator對象的appName屬性可以獲得瀏覽器的名稱，例如，當在IE瀏覽器中運行腳本，獲得瀏覽器名稱為MicrosoftInternetExplorer。appCodeName屬性。通過appCodeName屬性可以獲得瀏覽器代碼名稱，對于IE瀏覽器，它的代碼名稱為MozillaappVersion屬性。通過appVersion屬性可以獲得瀏覽器的版本信息以及瀏覽器運行平臺的信息，例如，在下運行的瀏覽器中，返回值為〔compatible;MSIE5.0;WindowsNT〕。7.2文檔對象模型Navigator對象的屬性〔1〕userAgent屬性。在HTTP協(xié)議中，客戶端向效勞器端請求時，會發(fā)出一段USER-AGENT信息，Navigator對象的userAgent屬性值就是USER-AGENT信息，可以獲得瀏覽器及所在操作系統(tǒng)的信息，這個屬性和其他屬性比起來，獲得的

溫馨提示

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

評論

0/150

提交評論