-
-
-
網頁的靈魂－JavaScript(下)
各種物件成員&W3C DOM介面參考
八.JavaScript的內建物件成員一覽
| 物件 | 屬性/方法 | 說明 | 備註 |
| Infinity | 表示無窮大的值 | 全域屬性 | |
| NaN | 表示非數字值 | 全域屬性 | |
| undefined | 未定義的值 | 全域屬性 | |
| *java | (待查) | 全域屬性 | |
| *Packages | (待查) | 全域屬性 | |
| isFinite() | 檢查某數值是否為無窮大 | 全域方法 | |
| isNaN() | 檢查某數值是否為數字 | 全域方法 | |
| parseFloat("字串") | 解析一个字串並傳回解析該字串所得的浮點數 | 全域方法 | |
| parseInt("字串") | 解析一个字串並傳回解析該字串所得的整數 | 全域方法 | |
| *eval("字串") | 計算JS程式碼的字串,傳回計算結果 | 全域方法 | |
| *getClass() | 傳回一個Object 的Class(待查) | 全域方法 | |
| encodeURI("字串") | 對字串進行URI編碼 | 全域方法 | |
| decodeURI("字串") | 對字串進行URI解碼 | 全域方法 | |
| encodeURIComponent() | 對元件進行URI編碼 | 全域方法 | |
| decodeURIComponent() | 對元件進行URI解碼 | 全域方法 | |
| escape("字串") | 對字串進行編碼 | 全域方法 | |
| unescape("字串") | 對escape()編碼過的字串進行解碼 | 全域方法 | |
| arguments | 1.callee:目前正在執行的函數其參考指標 2.length:參數長度,是arguments物件的陣列元素個數,指(實際上)傳遞給函數的參數個數 | 參數物件,指向一函數所傳入的參數 | |
| Object | 1.constructor:指向該物件的建構式 2.hasOwnProperty("字串"):檢查物件的屬性是自己的,還是繼承而來的 3.isPrototypeOf(物件): 檢查某物件是否是指定物件的原型 4.propertyIsEmunerable("字串"):檢查指定的屬性是否存在,以及能否用for-in列舉 5.toLocaleString():傳回件地區化的字串表示 6.toString():傳回物件的字串表示 7.valueOf():傳回物件的原始值(若存在的話) | 物件 (建構式) | |
| Function | 1.arguments[] 2.caller 3.length 4.prototype --------------------------------- 1.apply() 2.call() 3.toString() | 函數物件 (建構式) | |
| Boolean | 1.constructor 2.prototype:對物件添加屬性和方法 --------------------------------- 1.toString():根據Boolean物件所指向的布林值傳回true或false字串 2.valueOf():傳回在存放Boolean物件中的布林值 | 布林物件 (建構式) | |
| Number | 1.NaN:表示非數字的特殊值(常數) 2.MAX_VALUE:JS能表達的最大值(常數) 3.MIN_VALUE:JS能表達的最小值(常數) 4.POSITIVE_INFINITY:正無窮大(常數) 5.NEGATIVE_INFINITY:負無窮大(常數) --------------------------------- 1.toString(n):依指定進位將數字轉換成字串 2.toLocaleString():依當地數字格式,將數字轉換成字串 3.toPrecision(n):依指定的位數(n),將數字轉換成字串 4.toFixed(n):將數字四捨五入為指定小數位數的數字,並以字串傳回 5.toExponential(n):將數字採指數表示法表示,並以字串傳回 6.valueOf:傳回數字物字的原始值 | 數字物件 (建構式) | |
| String | 1.length: 取得字串長度(字串物件的這個屬性裡儲存的是字串的字元數) --------------------------------- 1.indexOf("字串",n): 傳回第一次搜尋到該字串的索引位置，若没有找到該字串會傳回-1。字串指要搜尋的字串，數值為開始搜尋時的索引位置 2.lastIndexOf("字串",n): 串",n) 從尾部開始搜尋，傳回第一次搜尋到字串的索引位置 3.charAt(n): 取得參數在數值位置的字元，數值指索引值，索引值從0開始。(在某字串中，取得在某指定位置的字) 4.charCodeAt(n): 取得參數在數值位置的unicode字碼，數值指索引值。(在某字串中，取得在某指定位置字的unicode編碼) 5.substring("數值1","數值2"):取出從數值1到數值2之間的子字串。數值1和數值2都是指索引 6.substr("數值1","數值2"):從數值1的位置開始取出數值2所指定的字元數。數值1是指索引，數值2是長度 7.slice(n,n): 擷取出指定的字串片段並傳回 8.split("字串"):使用字串作為要分割的依據分割，傳回一個陣列物件 9.concat("字串"):將該字串新增到String物件的字串後，可結合兩個字串 10.toLowerCase():將字串的英文字母轉小寫 11.toUpperCase():將字串的英文字母轉大寫 12.search("regexp"):傳回第一次搜尋到該字串的索引位置，若没有找到該字串會傳回-1 13.match("regexp"):傳回第一次搜尋到該字串的(字串)值，搜不到會傳回null 14.replace(regexp|"字串1","字串2"):搜尋到字串1時替換成字串2 15.toString():傳回string的基本字串值 16.valueOf():傳回string字串的原始字串值 17.fromCharCode(n,n,...): 把傳入的字串參數字元編碼建立新字串(靜態方法) 18.anchor():傳回<a>string</a> 19.big():傳回<big>string</big> 20.blink():傳回<blink>string</blink> 21.bold():傳回<b>string</b> 22.fixed():傳回<tt>string</tt> 23.fontcolor(#rbg):傳回<font color="#rbg">string</font> 24.fontsize(數值): 傳回<font size="數值">string</font> 25.italics():傳回<i>string</i> 26.link(url): 傳回<a href="url">string</a> 27.small():傳回<small>string</small> 28.strike():傳回<strike>string</strike> 29.sub():傳回<sub>string</sub> 30.sup():傳回<sup>string</sup> | 字串物件 (建構式) | |
| Array | 1.length:取得陣列的元素個數 --------------------------------- 1.join():將陣列的每個元素使用字串的方法顯示，元素和元素間以小逗號「,」隔開 2.reverse():顛倒陣列中元素的順序 3.sort():將陣列的所有元素進行排序 4.concat():參數指定的陣列和目前的陣列合併 5.pop():從陣列尾部刪除一個項目 6.push():從陣列尾部添加一個項目 7.shift():將陣列頭部的元素移出陣列 8.lice():傳回陣列的一個子陣列 9.splice():插入,刪除,或替換一個陣列元素 10.toLocaleString():將陣列轉成一個地區字串 11.toString():將陣列轉字串 12.unshift():在陣列頭部插入一個元素 | 陣列物件 (建構式) | |
| Date | 1.constructor:(待查?) 2.prototype:使您有能力對物件添加屬性和方法(有這個嗎?) --------------------------------- 1.getDate():取得日期值1～31 2.getDay():取得星期值0～6 3.getMonth():取得月份值0～11 4.getYear():取得年份 5.getFullYear():取得完整年份 6.getHours():取得小時0～23 7.getMinutes():取得分鐘0～59 8.getSeconds():取得秒數0～59 9.getMilliseconds():取得毫秒數，0～999 10.getTime():取得自1/1/1970年開始至今的的毫秒數. 11.getTimezoneOffset():傳回本地時間和格林威治標準時間的時差的,單位為分鐘 12.setDate(n):設定Date物件的日期1～31 13.setMonth(n):設定物件的月份0～11 14.setYear(n):設定物件的年份 15.setFullYear(n):設定Date物件的完整年份 16.setHours(n):設定物件的小時0～23 17.setMinutes(n):設定物件的分鐘0～59 18.setSeconds(n):設定物件的秒數0～59 19.setMilliseconds(n):設定物件的毫秒數,，0～999,n為毫秒 20.setTime(n):自1/1/1970年開始,添加或減少設定的時間,n為毫秒 21.toDateString():傳回Date物件的日期的字串(不含時間) 22.toTimeString():傳回Date物件的時間的字串(不含日期) 23.toLocaleString():傳回當地時間的字串 24.toLocaleDateString():傳回當地日期的字串(不含時間) 25.toLocaleTimeString():傳回當地時間的字串(不含日期) 26.toGMTString():傳回轉換成GMT時間的字串 27.toUTCString():傳回轉換成GMT時間的字串 28.toString():傳回的是本地時間的字串 29.valueOf():傳回1/1/1970午夜至今的毫秒數. 30.Date.parse("字串"):根據本地時間傳回1/1/1970到指定日期的毫秒數(靜態方法) 31.Date.UTC(yyyy,mm,dd):根據世界时傳回1/1/1970到指定日期的毫秒数(靜態方法) | 時間日期物件 (建構式) | |
| Math | 1.E: 2.71828...(=e) 2.LN2: 0.69314...(=ln2) 3.LN10: 2.30258...(=ln10) 4.LOG2E: 1.442695...(=log2e) 5.LOG10E: 0.43429448...=(=loge) 6.PI: 0.14159...(=π) 7.SQRT1_2: 0.707106...(=√1/2) 8.SQRT2 :1.414213...(=√2) --------------------------------- 1.max(n1,n2): 傳回兩數值裡的值大者(靜態函數) 2.min(n1,n2): 傳回兩數值裡的值小者(靜態函數) 3.random():傳回亂數值(靜態函數) 4.round(n): 傳回數值四捨五入後的值(靜態函數) 5.ceil(n): 傳回大於等於參數的最小整數(靜態函數) 6.floor(n): 傳回大於等於參數的最大整數(靜態函數) 7.exp(n): 自然指數(靜態函數) 8.log(n): 自然對數(靜態函數) 9.pow(x,y): 次方(靜態函數) 10.abs(n): 傳回絕對值(靜態函數) 11.sqrt(n): 傳回平方根(靜態函數) 12.sin(n): 正弦函數(靜態函數) 13.cos(n): 餘弦函數(靜態函數) 14.tan(n): 正切函數(靜態函數) 15.asin(n): 反正弦函數(靜態函數) 16.acos(n): 反餘弦函數(靜態函數) 17.atan(n): 反正切函數(靜態函數) 18.atan2(y,x): 計算從x軸到一點的角度(靜態函數) | 數學物件 | |
| Error | 1.number: 錯誤代碼(一個32bit的值,後面的16bit會顯示錯誤代碼的編號) 2.message: 錯誤訊息(儲存錯誤說明的字串) 3.descrption: 錯誤敍述(好像跟message差不多) 4.name: 指出例外型態的字串 5.message: 例外的錯誤訊息資訊 --------------------------------- 1. toString(): | 錯誤物件 (建構式) | |
| RegExp | 1.global: 全域比對,檢查RegExp物件是否具有特性g 2.ignoreCase: 忽略大小寫,檢查RegExp物件是否具有特性i 3.multiline: 多行模式,檢查RegExp物件是否具有特性m 4.lastIndex: 上次比對後的字元位置,用於在一個字串中進行多次比對 5.source: 規則運算式的文字來源 --------------------------------- 1.exec():通用的樣式比對 2.test():檢測字串是否符合個樣式 3.toString():將規則運算式轉成字串 | 規則表達式物件 (建構式) | |
| EvalError | 不正確使用eval()時丟出 | eval錯誤 (建構式) | |
| RangeError | 數字超出合法範圍時丟出 | 範圍錯誤 (建構式) | |
| ReferenceError | 讀取不存在的變數時丟出 | 參考錯誤 (建構式) | |
| SyntaxError | 語法錯誤時丟出 | 語法錯誤 (建構式) | |
| TypeError | 當數值的型態錯誤 | 型態錯誤 (建構式) | |
| URIError | 若指定的字串含有不合法的16進位跳脫序列,encodeURI()或decodeURI()就會丟出. 或指定的字串含有不合法的替代對(surrogate pair)encodeURI()或decodeURI()也會丟出 | URI錯誤 (建構式) | |
九.JavaScript的瀏覽器物件成員一覽
| 物件 | 屬性/方法 | 說明 | 備註 |
| window物件 | 1.window: 指目前的視窗 2.navigator: 包含瀏覽器的所有資訊如類型,版本等 3.screen: 包含螢幕的相關的資訊如螢幕大小等 4.document: 指視窗中的文件 5.history: 指使用者在視窗中的瀏覽記錄 6.defaultStatus/status: 可讀寫的字串,狀態列的顯示文字 7.closed: 唯讀的布林值,若該視窗是關閉的,值為true 8.opener: 指開啟該視窗的,若是使用者開啟該視窗,opener的值是null. 9.name: 指視窗的名稱(和框架的name作用一樣,要指定時就用得到) 10.frames[]:其中的window物件代表在該視窗中的框架 11.parent: 代表包含它的框架 12.top: 指包含它最上層框架 13.self: 自我參考,和window同義.指目前的視窗 14.length: 陣列frames[]中的元素個數,指視窗或框架包含的框架個數 15.location物件:指出視窗中文件所在的URL(在document中也有個location) 16.frameElement: (待查?) 17.Image物件: (待查?) 18.event 19.clientInformation 20.scrollbars 21.scrollX 22.scrollY 23.screenX 24.screenY 25.innerWidth 26.innerHeight 27.outerWidth 28.outerHeight 29.pageXOffset 30.pageYOffset 31.scrollMaxX 32.scrollMaxY 33.fullScreen 34.crypto 35.menubar 36.toolbar 37.locationbar 38.personalbar 39.statusbar 40.content 41.directories --------------------------------- 1.alert("字串"):只有確定按鈕的警示窗 2.confirm("字串"):確定或取消按鈕的警示窗 3.prompt("字串"):要求使用者輸入資訊的對話方塊 4.open():開啟新的視窗 5.close():關閉視窗 6.focus():要求該視窗成為鍵盤輸入的焦點 7.blur():取消該視窗成為鍵盤輸入的焦點 8.moveTo():移動視窗 9.moveBy():移動視窗 10.resizeTo(): 改變視窗尺寸 11.resizeBy():改變視窗尺寸 12.print():列印(視窗或框架中的內容) 13.scroll():捲動視窗中顯示的文件 14.scrollTo():捲動視窗中顯示的文件 15.scrollBy():捲動視窗中顯示的文件 16.setinterval(): 設定在某時間間隔,重覆執行某函數 17.clearInterval():取消在某時間間隔,重覆執行某函數 18.clearTimeout():取消在某時間(毫秒)後,執行某涵數 19.navigate():載入並顯示指定的URL 20.back():回上一頁,等同按瀏覽器的Back鈕 21.forward():下一頁,模擬瀏覽器的Forward鈕 22.home():首頁,模擬瀏覽器的Home 23.stop():停止,模擬瀏覽器的Stop 24.captureEvents():捕捉事件,指定接發給該視窗的事件型態 25.releaseEvents():釋放事件,指定不再捕捉的事件型態 26.routeEvent():將事件Event傳遞給下一個接收事件的處理程式 27.setResizable():待查? 28.scrollByLines():待查? 29.scrollByPages():待查? 30.find():待查? | 視窗物件 | |
| navigator物件 | 1.appCodeName: 瀏覽器的代號 2.appName: 瀏覽器名稱 3.platform: 瀏覽器執行的平台,瀏覽器所在的作業系統類別 4.appVersion: 瀏覽器版本 5.userAgent: 一個瀏覽器以HTTP標頭的user-agent送出的字串,這個屬性包含了appName和appVersion裡的的所有資訊. 6.cpuClass/oscpu: cpu的類型 7.userLanguage/language: 使用者使用的語言 8.mimeTypes: 陣列中的元素代表瀏覽器支援的一種MIME型態, 9.onLine: 是否在線(布林) 10.cookieEnabled: 是否啟用cookie(布林) 11.systemLanguage: 操作系統使用的語系 12.appMinorVersion: 副版本號(不太清楚) 13.plugins[]:陣列中的元素表示瀏覽器巳經安裝的外掛,Plugins物件提供有關外掛程式的資訊 -------------------------------------- 1.javaEnabled():是否啟用Java 2.taintEnabled():(待查?) 3.preference():(待查?) 4.registerContentHandler():(待查?) 5.registerProtocolHandler():(待查?) 6.plugins.refresh():檢測新安裝的外掛程式 | 瀏覽器物件 | |
| screen物件 | 1.width: 螢幕寬(px) 2.height: 表示螢幕高(px) 3.availWidth: 表示真正可用的螢幕寬(px) 4.availHeight表示真正可用的螢幕高(px) 5.colorDepth: 以2為底表示可顯示色彩數的指數. 6.pixelDepth: 瀏覽器的顏色深度 7.top: Y軸的起始座標 8.left: X軸的起始座標 9.availTop: 螢幕最頂部的Y座標(不含工作列) 10.availLeft: 螢幕最左側的X座標(不含工作列) | 螢幕物件 | |
| location物件 | 1.href: 是個字串,location儲存了目前視窗所顯示文件的URL完整文字內容 2.protocol: 通訊協定的類型 3.hostname: 網站的名稱,通常是網站首頁的路徑 4.host: 網站首頁的路徑,含port號 5.port: port號 6.pathname: 目前的文件(網頁)在網站中的路徑 7.search: 查詢的部分包含前導的問號? 8.hash: 錨點的部分,包含前導的#號 ------------------------------ 1.replace():重置,可以指定任可一個新URL,替換掉href中的URL 2.assign():指定,同上 3.reload():重載,同上 | 位址物件 | |
| document物件 | 1.body: 指向html中的body元素,即<body> 2.domain: 代表網域 3.URL: 代表文件的URL,屬性值是個字串,除非有重新導向,否則屬性值與window.location.href的值相同 4.location: 與URL相同,代表文件的URL 5.referrer: 連結到目前文件的文件的連結 6.title: 代表文件的抬頭(<title>) 7.cookie: 代表cookie 8.images[]:代表圖片(<img>) 9.embeds[] 10.anchors[]:文件中的錨點 11.applets[]:文件中的Java applet 12.forms[]:代表表單(<form>) 13.lastModified: 代表文件(網頁)的最後修改日期,是個字串 14.links[]:代表文件中的超連結 15.linkColor: 未訪問的連結顏色 16.alinkColor: 訪問(點擊)時的連結顏色 17.vlinkColor: 訪問過的連結顏色 18.bgColor: 背景色 19.fgColor: 前景色(文字的顏色) 20.doctype 21.dir 22.ownerDocument 23.plugins 24.activeElement: 唯讀屬性,指文件中目前活動的輸入元素(即具有輸入焦點的元素) 25.all[]:文件中所有元素的陣列 26.children[]:文件中所有直系子元素的陣列,以其在原始碼中的順序存放 27.charset: 字集 28.defaultCharset: 預設字集 29.parentWindow: 包含文件的視窗 30.readyState: 文件的載入狀態,有以下四個值可用,1.uninitialized:尚未開始載入2.loading:正在載入3.interactive:載入的文件巳足以與使用者互動4.complete:文件載入完畢 31.width: 文件的寬度: 32.height: 文件的高度 33.nodeName: 節點名稱 34.nodeType: 節點型態,傳回某節點類型 35.nodeValue 36.parentNode: 父節點,節點.parentNode則指向該節點的父節點 37.childNodes[]:子節點群,此屬性會傳回該節點的子節點清單,節點.childNodes 38.firstChild: 指某一節點的第一個小節點 39.lastChild: 指某一節點的最後一個小節點 40.nextSibling: 指某一節點的下一個兄弟節點 41.previousSibling: 指某一節點的上一個兄弟節點 42.implementation 43.documentElement 44.attributes[] 45.styleSheets 46.compatMode --------------------------------- 1.write("字串"):輸出,把字串書寫到目前的文件 2.writeln("字串"):段行輸出,把字串書寫到目前的文件,有換行功能(有附帶一個換行符號) 3.open():開啟新文件 4.close():關閉文件 5.elementFromPoint():傳回位於指定點(x,y)的元素 6.compareDocumentPosition() 7.getSelection():傳回目前選取的文件文字 8.lookupPrefix() 9.isDefaultNamespace() 10.lookupNamespaceURI() 11.isEqualNode() 12.getFeature() 13.setUserData() 14.getUserData() 15.appendChild(節點): 添加子節點 16.removeChild(節點): 移除子節點 17.replaceChild(節點1,節點2): 重置子節點,用節點1取代節點2. 18.isSameNode() 19.insertBefore() 20.hasChildNodes() 21.cloneNode() 22.createTextNode():開一個文字節點 23.importNode():對於其他適合插入此文件的文件,生它的節點副本 24.getAttributeNode() 25.setAttributeNode() 26.removeAttributeNode() 27.createElement("標籤名"):用指定的標籤名稱,創建一個元素(創造出來的是個節點) 28.createElementNS():用指定的標籤名稱和名稱空間新建一個元素節點 29.createDocumentFragment():建立新的,空的DocumentFragment節點 30.createComment():建立包含指定字串的新Comment節點 31.createCDATASection():新建一個包含指定文字的CDATASection節點 32.createProcessingInstruction():以指定標籤和貟料串新建一個ProcessingInstruction節點 33.createEntityReference():新建EntityReference節點 34.getElementsByTagName("標籤名")[n]: 依指定標籤名稱(元素)取得某特定標籤,會傳回一陣列 35.getElementsByTagNameNS():取得指定標籤名稱和名稱空間的元素節點 36.createEvent():以指定的型態新建一Event物件 37.createRange():新建一個Range物件 38.createNodeIterator():新建NodeIterator物件 39.createTreeWalker():新建TreeWalker物件. 40.getAnonymousNodes():getAnonymousElementByAttribute() 41.getElementById("id名"):依指定id名稱取得某特定標籤 42.captureEvents():請求指定型態的事件 43.releaseEvents():停止捕捉指定型態的事件 44.routeEvent():將捕捉到的事件分配到下一個指定的元素 45.removeEventListener() 46.hasAttributes() 47.hasAttributeNS() 48.createAttribute():以指定的名稱新建一個Attr節點 49.createAttributeNS():以指定的名稱或名稱或名稱空間新建一個Attr節點 50.getAttribute() 51.getAttributeNS() 52.setAttribute() 53.setAttributeNS() 54.removeAttribute() 55.removeAttributeNS() 56.removeAttributeNS() 57.normalize() 58.isSupported() 59.clear() 60.execCommand() 61.execCommandShowHelp() 62.queryCommandEnabled() 63.queryCommandIndeterm() 64.queryCommandState() 65.queryCommandSupported() 66.queryCommandText() 67.queryCommandValue() 68.getBoxObjectFor() 69.setBoxObjectFor() 70.addBinding() 71.removeBinding() 72.getBindingParent() 73.loadBindingDocument() 74.dispatchEvent() 75.adoptNode() 76.getOverrideStyle():取得指定元素(或非必要的指定虛元素)的CSS改寫樣式資訊 | 文件物件 | |
| Anchors | 1.name: 錨點的名稱,<a>的name 2.trxt: 指錨點<a>和</a>之間的純文字. 只有<a>和</a>之間没有其他html標籤,此屬性才能完全運作 | 錨點物件 | |
| Link | 1.href: 可讀寫字串,指完整的URL 2.protocol: 可讀寫字串,指URL的通訊協定片段,包含冒號 3.hostname: 可讀寫字串,指URL的主機名稱片段 4.host: 可讀寫字串,指URL的主機名稱和連接埠片段 5.port: 可讀寫字串,指URL的連接埠片段 6.pathname: 可讀寫字串,指URL的路徑片段 7.search: 可讀寫字串,指URL的查詢片段,包含前導的問號 8.hash: 可讀寫字串,指URL的錨點的片段,包含#號 9.target: 可讀寫字串,指開啟連結文件的window物件名稱(框架或視窗名) 10.text: 可讀寫字串,指<a>和</a>之間的純文字 11.onclick: 當連結被點擊時 12.onmouseout: 當滑鼠離開時 13.onmouseover: 當滑鼠移過時 | 超連結物件 | |
| Applets | Applets物件 | ||
| Form | 1.action: 可讀寫字串,<form>的action屬性,值是URL 2.elements[]:一個陣列,陣列元素是表單中的輸入元素,如Button,Checkbox,Radio,Text等 3.encoding: 可讀寫字串,<form>的enctype屬性 4.length: 可讀寫字串,表單中的元素個數,即elements.length 5.method: 可讀寫字串,<form>的method屬性,值是get或post 6.name: 可讀寫字串,<form>的name屬性 7.target: 可讀寫字串,<form>的target屬性,值是window_name ------------------------ 1.reset():重設表單 2.submit():送出表單 ------------------------ 1.onreset(): 重設表單時呼叫 2.onsubmit(): 送出表單時呼叫 | 表單物件 就是<form> | 繼承自HTMLElement的屬性 |
| Input | 1.defaultChacked: 唯讀的布林值,即<input>的checked屬性, 2.defaultValue: 指該表單元素出現的初始文字,也能在重設表單時可以使用此值來恢復元素,只有Text,Password,Textarea元素使用這個屬性, 3.form: 唯讀,指向含有該元素的Form物件,使用form屬性,表單元素的事件處理器就能輕易地指向與它處於同一表單中的兄弟元素 4.length: 對於Select表單元素,此屬性指向options[]陣列中存放的選項數 5.name: 唯讀的字串,由html的標籤屬性name設定(即指定了元素的名稱,為該元素命名),此名稱可用來指向該元素 6.option[]:對Select來說,這個陣列存放的是Option物件 7.selectedIndex: 對Select來說,這個整數指目前選取的Select物件的選項 8.type: 唯讀字串,指定表單元素的型態,即<input>的type屬性 9.value: 字串,指表單元素顯示的值,或在送出表單時,該元素要傳送出去的值,即<input>的value屬性 ------------------- 1.blur():將鍵盤焦點從元素中移開 2.click():在表單元素上模擬滑鼠點擊 3.focus():將元素上設置鍵盤焦點 4.select():對於顯示可編輯文字的單元素來說,選取其中的所有文字 ------------------------- 1.onblur: 當使用者把鍵盤焦點從元素中移開時呼叫(事件處理器) 2.onchange: 對非按鈕的表單元素來說,當使用者輸入或選擇新值時呼叫(事件處理器) 3.onclick: 對按鈕類的表單元素來說,當使用者點擊或選擇該按鈕時呼叫(事件處理器) 4.onfocus: 當使用者將鍵盤焦點對到該元素時呼叫(事件處理器) | 表單的輸入物件 就是<form></form>之間的<input> | 繼承自HTMLElement的屬性 |
| Text | 1.value: 可讀寫字串,就是<input>中屬性value的值 --------------------- 1.onchange: 若Text元素中的值被改變,並且將呼叫焦點移到別處時呼叫(事件處理器) | 文字框物件<br>就是<input>中屬性type的text值 | 繼承自Input物件和HTMLElement的屬性 |
| Password | 1. value: 可讀寫字串,就是<input>中屬性value的值 | 密碼框物件 就是<input>中屬性type的password值 | 繼承自Input物件和HTMLElement的屬性, |
| Checkbox | 1.checked: 可讀寫的布林值,若選取了該核取方塊,checked屬性為true 2.defaultChecked: 唯讀的布林值,指核取方塊的預設狀態 3.value: <input>的value屬性,指送出表單時,若該核取方塊被選取應該傳給伺服端的文字 ------------------------------ 1.onclick: 按鈕被點擊 | 核取方塊物件 就是<input>中屬性type的Checkbox值 | 繼承自Input物件和HTMLElement的屬性 |
| Radio | 1.checked: 可讀寫的布林值,若單選鈕被選取,checked屬性的值就是true 2.defaultChecked: 布林值,<input>中有使用checked屬性時,若在單選鈕的初始情況處選取狀態,defaultChecked值就是true 3.value: 可讀寫的字串,就是<input>中屬性value的值 4.onclick: 單選鈕被點擊時 | 單選鈕物件 就是<input>中屬性type的radio值 | 繼承自Input物件和HTMLElement的屬性, |
| Reset | 1.value: 字串,就是<input>中屬性value的值 --------------------------------- 1.onclick: 單選鈕被點擊時 | 重設鈕物件 就是<input>中屬性type的reset值 | 繼承自Input物件和HTMLElement的屬性,至少還定義或改寫了以下的屬性 |
| Submit | 1.Value: 字串,就是<input>中屬性value的值 -------------------------------- 1.onclick: 當確認鈕被點擊時呼叫(事件處理器) | 確認鈕物件 | 繼承自Input物件和HTMLElement的屬性,至少還定義或改寫了以下的屬性 |
| Button | 1.Value:<input<的value屬性,是唯讀的 ------------------------------- 1.onclick: 按鈕被點擊鈕被點擊時呼叫(事件處理器) | 按鈕物件 就是<input>中屬性type的button值 | 繼承自Input物件和HTMLElement的屬性 |
| FileUpload | 1.value: 唯讀字串,指使用者在FileUpload物件中中輸入的檔案名稱 -------------------------------- 1.onChange: 當使用者改變FileUpload元素的值,且將鍵盤焦點移到別處時呼叫(事件處理器) | 上傳鈕物件 就是<input>中,屬性type的屬性值file,表單輸入元素中的檔案上載欄位 | FileUpload物件繼承了Input物件和HTMLElement的屬性 |
| Select | 1.selectedIndex: 一個整數,指Select物件中被選取的選項索引,若沒有選取任何選項該屬性值為-1 2.option[]:Option物件的陣列,其中每個元素描述Select元素中顯示的選項 3.type: 唯讀字串,由有的表單元素共用,指元素的型態 4.length: 唯讀整數,指option[]陣列中的元素個數,屬性值於options.length的屬性值相同 ------------------------------- 1.onchange():當一個選項被選取或取消選取時呼叫(事件處理器) | 下拉選單物件 就是<select> | 繼承自Input物件和HTMLElement的屬性 |
| Option | 1.text: 可讀寫字串,指顯示給使用者的選項文字,屬性值就是出現在<option>後面(,或說在</option>或<select>前面)的文字 2.value: 可讀寫字串,就是<select>中的<option>的value屬性值 3.defaultSelected: 布林值,指在建立包含該屬性的Select物件時,該選項是否被選取,就是<select>中的<option>的selected屬性值所設定的值 4.selected: 可讀寫字串,指一個選項目前是否選取,可檢測某選項是否被選取,也可以選取或取消一個選項 5.index: 唯讀的整數,指選項在包含它的Selet物件的options[]陣列中的索引位置 | 下拉選單的選項物件 就是<select>中的<option> | 繼承自Input物件和HTMLElement的屬性 |
| Textarea | 1.value: 可讀寫的字串,其初始值與屬性defaultValue的值相同,就是在<textarea>和</textarea>之間的文字 ----------------------------------- 1.onchange:: 當使用者改變Textarea元素中的值,並且將鍵盤焦點移到別處時呼叫(事件處理器) | 文字區塊物件 就是<textarea> | 繼承自Input物件和HTMLElement的屬性 |
、、、、、、、、、、、、、、、、、、、
十之一.節點相關介面
1.NamedNodeMap介面
利用名稱和位置檢索的節點之集合
NamedNodeMap介面定義一個能透過nodeName或(對於使用名稱空間的節點而言)
namespaceURI和localName屬性尋找的節點集合
NamedNodeMap介面所定義最有用的屬性是Node介面的attributes,它是可以根據HTML屬性的名稱尋找的Attr節點集合.
NamedNodeMap介面的許多方法與用於操作HTML屬性的元素方法相似,透過Element介面的方法操作Element的HTML屬性最容易,通常不使用NameNodeMap介面的方法
NamedNodeMap物件是"活的",它們會立即反映出文件樹的變化,如,若取得一個代表元素屬性的NamedNodeMap物件,然後加入新HTML屬性到該元素,那麼透過NamedNodeMap就可以存取這個HTML屬性
| 成員 | 內容 | 備註 |
|---|---|---|
| length | 陣列中的節點數,唯讀,long,unsigned | |
| getNamedItem() | 尋找指定的節點 | |
| getNamedItemNS | 尋找用名稱空間指定的節點 | |
| item() | 取得NamedNodeMap中指定位置的節點,在JS中可以用節點的位置作為陣列索引來達成 | |
| removeNamedItem() | 從NamedNodeMap中刪除指定的節點 | |
| removeNamedItemNS() | 根據名稱和名稱空間從NamedNodeMap中刪除指定的節點 | |
| setNamedItem() | 加入新節點到NamedNodeMap(或替換現有的節點),Node物件的nodeName屬性將作為該節點的名稱 | |
| setNamedItemNS() | 加入新節點到NamedNodeMap(或替換現有的節點),Node物件的namespaceURI屬性和localName屬性將作為該節點的名稱 | |
(1)getNamedItem()
根據名稱尋找節點
a.用法, Node getNamedItem(String name)
b.參數,name,欲查詢的節點的nodeName屬性值
c.回傳值,指定的節點,若没有找到指具有指定名稱的節點,則傳回null
#getNamedItemNS()
根據名稱和名稱空間查詢節點
getNamedItemNS()將根據名稱空間和本地名稱尋找NamedNodeMap中的元素,只有使用名稱空間的XML文件才可以使用此方法
a.用法,Node getNamedItemNS(String namespaceURI,
String localName)
b.參數,
namespaceURI,欲取得的蠞點的namespaceURI屬性,若没有名稱空間,此屬性為null
localName,本地節點的localName屬性
c.回傳值,NameNodeMap中具有指定的namespaceURI屬性和localName屬性元素,若没有這樣的節點,則傳回null
(2)item()
根據位罝傳回NamedNodeMap中的元素
item()將傳回指定的NameNodeMap元素,在JS中,NameNodeMap物件的行為與唯讀陣列相似,我們可以用節點的位置作為陣列索引來存取元素,而不必呼叫此方法
雖然用NameNodeMap介面可以根據位置遍歷它的節點,但它不表示節點的有序集合,對NamedNodeMap物件的任何改變(如呼叫removeNamedItem()或setNamedItem()))都會讓所有元素重新排序,因此,在遍歷NamedNodeMap的元素時,不能修改它
a.用法,Node item(unsigned long index)
b.參數,index,欲取得的節點的位置或索引
c.回傳值,指定位置的節點,若index小於0或者大於等於NamedNodeMap的length屬性,則傳回null
(3)removeNamedItem()
刪除名稱指定的節點
從NamedNodeMap中刪除指定的節點,
注意,若NamedNodeMap代表一個Element的HTML屬性集合,若刪除在文件中明確設定的HTML屬性的Attr節點,會讓刪除的Attr節點自動替換成表示HTML屬性的預設值(若存在的話)的Attr新節點
a.用法,Node removeNamedItem(String name)
throws DOMException
b.參數,name,欲刪除之節點的nodeName屬性
c.回傳值,被刪除的節點
e.丟出,如果NamedNodeMap是唯讀的,不允許刪除操作,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMEexception例外.
若NamedNodeMap中不存在name指定的節點,則丟出code為NOT_FOUND_ERR的例外.
(4)remeoveNamedItemNS()
刪除由名稱空間和名稱指定的節點
此方法與removeNamedItem()相似,只是要刪除的節點由名稱空間和本地名稱指定的,而不是僅僅由名稱指定的,只有使用名稱空間的XML文件才可以使用此方法
a.用法,Node removeNamedItemNS(String namespaceURI,
String localName)
throws DOMException;
b.參數,
namespaceURI,欲刪除之節點的namespaceURI屬性,若没有名稱空間,則為null
localName,欲刪除之節點的localName屬性
c.回傳值,被刪除的節點
d.丟出,此方法丟出例外的原因和removeNamedItem()
(5)setNamedItem()
在NamedNodeMap中加入或替換一個節點
setNamedItem()將加入指定的節點到NamedNodeMap,並允許用節點的nodeName屬性的值查找它,若NamedNodeMap巳經具有指定名稱的節點,則此節點將被替換成此方法的回傳值
a.用法,Node setNamedItem(Node arg)
throws DOMException;
b.參數,arg,欲加到NamedNodeMap的節點
c.回傳值,被替換的節點,若沒有節點被替換,則傳回null
d.丟出,此方法將丟出具有下列code的DOMException例外
HIERARCHY_REQUEST_ERR
參數arg指定的節點型態不適合此NamedNodeMap節點(若不是Attr節點)
INUSE_ATTRIBUTE_ERR
參數arg是巳經關聯到一個元素的Attr節點
NO_MODIFICATION_ALLOWED_ERR
NamedNodeMap是唯讀的
WRONG_DOCUMENT_ERR
參數arg的ownerDocument屬性不同於建立NamedNodeMap節點的文件
(6)setNamedItemNS()
以名稱空間加入一個節點到NamedNodeMap
此方法與setNamedItem()相似,只是可以用namespaceURI和localName屬性查詢加入到NamedNodeMap的節點,而不是用nodeName屬性,只有使用名稱空間的XML文件才會使用此方法,
注意,在不支援XML文件的實作中,可能不支援此方法
a.用法,Node setNamedItemNS(Node arg)
throw DOMException;
b.參數,arg,欲加入到NamedNodeMap的節點
c.回傳值,被替換的節點,若没有節點被替換,則傳回null
d.丟出,此方法丟出例外的原因和setNameItem()一樣,此外,若呼叫它的實作不支援XML文件或XML名稱空間,它還會丟出code為NOT_SUPPORTED_ERR的DOMException例外.
2.Node介面
文件樹中的一個節點
也實作EventTarget,若DOM實作支援Events模組,那麼文件樹中的每個節點都會實作EventTarget介面,
而且它還在它上面註冊事件監聽器,這裡不包括EventTarget介面定義的方法,
(1)子介面
| Attr | CharacterData | Document | DocumentFragment |
| DocumentType | Element | Entify | EntityReference |
| Notation | ProcessingInstruction |
(2)常數,
每個Node物件都實作上面列出的一種子介面,每個Node物件都有nodeType屬性,指定它們實作的是什麼子介面,下面的常數是此屬性的合法值,其名稱的含義很明顯,不需要解釋,請注意,它們是Node()建構式的靜態屬性,不是個別Node物件屬性,(但IE4到6不支援這些常數)
| 常數 | 代表 | 備註 |
|---|---|---|
| Node.ELEMENT_NOTE=1 | Element | |
| Node.ATTRIBUTE_NODE=2 | Attr | |
| Node.TEXT_NODE=3 | Text | |
| Node.CDATA_SECTION_NODE=4 | CDATASection | |
| Node.ENTITY_REFERENCE_NODE=5 | EntityReference | |
| Node.ENTITY_NODE=6 | Entity | |
| Node.PROCESSING_INSTRUCTION_NODE=7 | ProcessingInstruction | |
| Node.COMMENT_NODE=8 | comment | |
| Node.DOCUMENT_NODE=9 | Document | |
| Node.DOCUMENT_TYPE_NODE=10 | DocumenType | |
| Node.DOCUMENT_FRAGMENT_NODE=11 | DocumentFragment | |
| Node.NOTATION_NODE=12 | Notation | |
(3)Node介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| attributes | 若此節點是一個元素,這個屬性指定該元素的HTML屬性,attributes是一個NamedNodeMap物件,根據名稱或編號可以查詢HTML屬性,並以Attr物件旳形式傳回此屬性,實際上,用Element介面的getAttribute()更容易以字串形式取得HTML屬性的值,注意,傳回的NamedNodeMap物件是"活的",元素HTML屬性的任何變動透過該物件都可以立刻看到 | |
| childNode | 存放目前節點的子節點,此屬性絕不會是null,因為對於沒有子節點的節點來說,childNodes是一個length為0的陣列,從技術上來說,此屬性是一個NodeList物件,但其作用更像Node物件的陣列,請注意,傳回的NodeList物件是"活的",子元素屬性的任何變動,透過該物件都可以立刻看到的,唯讀,Node[] | |
| firstChild | 目前節點的第一估子節點,若目前節點没有子節點,則為null,唯讀,Node | |
| lastChild | 目前節點的最後一個子節點,若目前節點沒有子節點,則為null,唯讀,Node | |
| localName | 使用名稱空間的XML文件中,它指定該元素的本地部分或HTML屬性名稱,HTML文件從不使用此屬性,唯讀,字串 | |
| namespaceURI | 在使用名稱空間的XML文件中,指定Element節點或Attribute節點的名稱空間的URI,HTML文件從不使用此屬性,唯讀,字串 | |
| nextSibling | 在parentNode的childNodes[]陣列中,緊接著目前節點的兄弟節點,若沒有這樣的節點,則為null,唯讀,Node | |
| nodeName | 節點的名稱,對於Element節點,此屬性指定該元素的標籤名稱,用Element介面的tagName屬性也可以取得它,對於其他型態的節點,其值由節點型態決定,唯讀,字串 | |
| nodeType | 節點型態,即節點實作的子介面,前面列出的常數定義了它的合法值,但由於IE不支援那些常數,所以可以用寫死(hardcode)的值來代替這些常數,在HTML文件中,對於Element節點此屬性的值是1,對Text節點此屬性的值是3,對Comment節點,此屬性的值是8,對頂層Document節點此屬性的值是9,唯讀,short,unsigned | |
| nodeValue | 節點的值,對於Text節點來說,此屬性儲存的是文字內容.對於其也型態的節點,此屬性的值視nodeType而定,字串 | |
| ownerDocument | 該節點所屬性的Document物件,對於Document節點來說,此屬性為null,唯讀,Document | |
| parentNode | 目前節點的父節點(或包容節點),若没有父節點,則為null,請注意,Document節點和Attr節點絕不會有父節點,另外,從文件中刪除的節點或新建立的,還沒有插入文件樹的節點,其parentNode屬性都為null,唯讀,Node | |
| prefix | 對於使用名稱空間的XML文件,此屬性指定Element節點或Attribute節點的名稱空間之字首,HTML文件從不使用此屬性,(參閱:localName屬性和namespaceURL屬性,設定此屬性時,若新值包含不合法的字元,格式錯誤,或者與namespaceURI屬性不符,都會引發例外),字串 | |
| previousSibling | 在parentNode的childNodes[]陣列中緊接著目前節點,位於它之前的兄弟節點,若没有這樣的節點,則為null,唯讀,Node | |
| appendChild() | 透過將節點加到目前節點的childNodes[]陣列,新增節點到文件樹,若文件樹中巳經存在該節點,則將它刪除,然後在新位置插入它 | |
| cloneNode() | 複製目前節點,或複製目前節點及其所有子孫節點 | |
| hasAttributes() | 若目前節點是Element節點,而且具有HTML屬性,則傳回true | |
| hasChildNodes() | 若目前節點具有子節點,就傳回true | |
| insertBefore() | 在文件樹中插入一個節點,插入到目前節點的指定子節點之前,若文件樹中巳經存在要插入的節點,則刪除該節點,重新插入到它的新位置 | |
| isSupported() | 若目前節點支援指定HTML屬性的特定版本,則傳回true | |
| normalize() | 透過刪除目前節點的所有空Text節點,合併相鄰的Text節點,"正規化"它所有的Text子孫節點 | |
| removeChild() | 從文件樹中刪除(並傳回)指定的子節點 | |
| repaceChild() | 從文件中刪除(並傳回)指定的子節點,用另一個節點替換它 | |
文件樹中的所有物件(包含Document物件本身)都實作Node介面,它提供尋訪和操作文件檥的基本屬性和方法,用parentNode屬性和childNodes[]陣列可以在文件樹中上下移動,透過遍歷childNodes[]陣列或使用firstChild和nextSlibling屬性尋訪節點(或用lastChild和previousSbling屬性反向尋訪)可以列舉指定節點的子節點,呼叫appendChild(),insertBefore()removeChild()和replaceChild(),可以透過改變節點的子節點修改文件樹.
文件樹中的每個物件都實作Node介面和更專用的介面,如Element介面或Text介面,nodeType屬性指定該節點實作的子介面,在使用專用介面的方法和屬性前,我們可以用此屬性測試節點的型態.
var n;//用來儲存使用的節點
var n;//用來儲存使用的節點
if(n.nodeType==1){ //或與常數Node.ELEMENT_NODE比較
var tagname=n.tagName;//如果節點是Element,則為標籤名稱
}
屬性nodeName和nodeValue指定更多的節點資訊,但它們的值由nodeType決定,如下表所示
注意,子介面通常都定義了專門的屬性(如Element節點的tagName屬性和Text節點的data屬性)來獲取該資訊
| nodeType | nodeName | nodeValue |
|---|---|---|
| ELEMENT_NODE | 元素的標籤名稱 | null |
| ATTRIBUTE_NODE | html屬性名稱 | HTML屬性值 |
| TEXT_NODE | #text | 節點文字 |
| CDATA_SECTION_NODE | #cdata-section | 節點文字 |
| ENTITY_REFERENCE_NODE | 參考的實體名稱 | null |
| ENTTY_NODE | 實體名稱 | null |
| PROCESSING_INSTRUCTION_NODE | PI目標 | PI的剩餘部分 |
| COMMENT_NODE | #comment | 註解的文字 |
| DOCUMENT_NODE | #document | null |
| DOCUMENT_TYPE_NODE | 文件型態的名稱 | null |
| DOCUMENT_FRAGMENT_NODE | #document-fragment | null |
| NOTATION_NODE | 註釋名稱 | null |
#appendChild()
插入節點,作為目前節點的最後一個子節點
a.用法,Node appendChild(Node newChild)
throws DOMExcepton;
b.參數,newChild
要插入文件的節點,若該節點是DocumentFragment節點,則不會直接插入它而是插入它的子節點
c.回傳值,加入的節點
d.丟出,此方法將在下列環境中丟出如下code的DOMEception例外:
HIERARCHY_REQUEST_ERR
目前節點不能有子節點,或者它不能有指定型態的子節點,或者newChild是此節點的祖先(或是此節點本身)
WRONG_DOCUMENT_ERR
newChild的ownerDocument屬性與目前節點旳ownerDocument屬性不同
NO_MODIFICATION_ALLOWED_ERR
目前節點是唯讀的,不允許加入子節點,或者加入的節點巳經是文件樹的一部分,且其父節點是唯讀的,不允許刪除子節點
此方法將節點newChild加到文件中,使它成為目前節點的最後一個子節點,若文件樹中巳經存在newChild它將從文件樹中刪除,然後重新插入到它的新位置,若newChild是DocumentFragment節點,則不會直接插入它,而是把它的子節點依序插入目前節點的childNodes[]陣列結尾,請注意,來自某個文件的節點(或由某個文件建立的節點)不能插入另一個文件,也就是說,newChild的ownerDocument屬性必須與目前節點的ownerDocument屬性相同
e.例
function appendMEssage(message){
var pElement=document.createElement("p");
var messageNode=document.createTextNode(message);
pElement.appendChild(messageNode);//加入文字到段落中
document.body.appendChild(pElement);//加入段落到文件主體
}
#cloneNode()
複製節點和它的所有子孫節點(非必要)
此方法將複製並傳回呼叫它的節點之副本,若傳入的參數是true,還會遞迴複製目前節點的所有子孫節點,否則,它只複製目前節炶,傳回的節點不屬性於文件樹 ,其parentNode屬性為null,當複製的是Element節點時,其所有HTML屬性將被複製,
注意,目前節點上註冊的EventListener函數不會被複製
a.用法,Node cloneNode(boolean deep);
b.參數,deep,若此參數為true,cloneNode()就會遞迴複製目前節點的所有子孫節點,否則它只複製節點本身
c.回傳值,目前節點的副本
#hadAttributes()
判斷目前節點是否具有HTML屬性
a.用法,boolean hasAttributes()
b.回傳值,若目前節點具有一個以上的HTML屬性,則傳回true,否則傳回false,請注意,只有Element節點可以具有HTML屬性
#hasChildNOdes()
判斷目前節點是否具有子節點
a.用法,boolean hasChildNodes
b.回傳值,若目前節點具有一個以上的子節點,則傳回true,否則傳回false
#inserBefore()
在文件樹中的指定節點前插入一個節點
a.用法,Node insertBefore(Node newChild,
Node refChild)
throws DOMException;
b.參數,
newChild,要插入文件樹的節點,若它是DocumentFragment節點,則插入它的子節點
refChild,newChild要插入在它之前的子節點,若該參數為null,則把newChild節點插入到目前節點的最後一個子節點
c.回傳值,被插入的節點
d.丟出,此方法將在下列情況下丟出如下code的DOMException例外;
HIERARCHY_REQUEST_ERR
目前節點不能有子節點,或者它不能有指定型態的子節點,或者newChild是此節點的祖先節點,或是此節點本身
WORONG_DOCUMENT_ERR
newChild的ownerDocument 屬性與目前節點的ownerDocument屬性不同
NO_MODIFICATION_ALLOWED_ERR
目前節點是唯讀的,不允許插入子節點,或者newChild的父節點是唯讀的,不允許刪除子節點
NOT_FOUND_ERR
refChild不是目前節點的子節點
此方法將把節點newChild作為目前節點的子節點插入到文件樹,新蠞點將存放在目前節點的childNodes[]陣列中,接在refChild節點前,若refChild為null,newChild將插入到childNode[]陣列的結尾,如appendChild()一樣,
注意,若refChild不是目前節點的子節點,呼叫此方法是不合法的.
若文件樹中巳經存在newChild節點,它將從文件樹中刪除,然後重新插入到它的新位置,若newChild是DocumentFragment節點,則插入文件樹的不是它本身,而是其子節點,這些子節點將依序插入在指定位置上
e.例
下面的函數將把一個新段插入到文件的開頭:
function insertMessage(message){
var paragraph=document.createElement("p");//
var text=document.createTextNode(messaage);//
pragraph.appendChild(text);
document.body.insertBefore(paragraph,document.body.firstChild)
}
#isSupported()
判斷目前節點否支援某個HTML屬性
W3C DOM標準是模組化的,而其實作不忏實作標準規定皂所有模組或特徵,此方法用於測試目前節點的實作是否支援指定特徵的指定版本,關於參數feature和version之值的列表
a.用法,boolean isSupported(String feature,
String version);
b.參數,
feature,要檢測的特徵名稱
version,要檢測的特徵本編號,如欲測試該特徵的任何版本,則用空字串
c.回傳值,若目前節點支援指定特徵的指定版本,則傳回true,否則傳回false
#normalize()
合併相鄰的Text節點並刪除空的'Text節點
此方法將尋訪目前節點的所有子孫節點,透過刪除空的Text節點,以及合併所有相鄰的Text節點來正規化文件,此方法在進行節點的插入或刪除操作後,對簡化文件樹的結構很有用
a.用法,void normalize()
#removeChild()
刪除(並傳回)目前節點的指定子節點
a.用法,Node removeChild(Node oldChild)
throws DOMException;
b.oldChild
要刪除的子節點
c.回傳值,被刪除的節點
d.丟出,此方法將在下列情況下丟出如下code的DOMException例外
NO_MODIFICATION_ALLOWED_ERR
目前節點是唯讀的,不允許刪除子節點
NOR_FOUND_ERR
oldChild不是目前節點的子節點
此方法將從目前節炶的childNodes[]陣列中刪除指定的子節點,若呼叫此方法時傳遞的節點不是目前節點的子節點,將引發錯誤,此方法在刪除oldChild後,將傳回它.oldChild仍是合法的節點,可以再次插入文件
e.例
document.body.removeChild(document.body.lastChild);
#replaceChild()
以新節點取代子節點
a.用法,Node replaceChild(Node newChild,
Node oldChild)
throws DOMException;
b.參數,
newChild,新的替換節點
oldChild,要被取代的節點
d.回傳值,從文件樹中刪除和被取代的節點
e.丟出,
此方法將在下列情況中丟出如下code的DOMException例外
HIERARCHY_REQUEST_ERR
目前節點不能有子節點,或它不能有指定型態的子節點,也可能newChild是此節點的祖先節點,或此節點本身
WRONG_DOCUMENT_ERR
newChild的ownerDocument屬性與目前節點的ownerDocument屬性不同
NO_MODIFICATION_ALLOWED_ERR
目前節點是唯讀的,不允許替換子節點,或者newChild是子節點,其父節點不允許刪除子節點
NOT_FOUND_ERR
oldChild不是目前節點的子節點
此方法將一一個節點替換文件樹的節點,oldChild是被替換的節點,它必須是目前節點的子節點,newChild將在目前節點的childNode[]陣列中取代oldChild.
若果文件樹中巳經存在newChild節點,它將被文件樹中刪除,然後重新插入它的新位置,
若果newChild是DocumentFragment節點,則插入文件樹的不是它本身,而是它的子節點,並依序插入在原本oldChild占有的位置上
f.例
下面程式碼將用元素<b>替換n,然後將被取化的節點,然後將插入的節點插入到<b>元素,這種操作會重定n的父節點,並使它以粗體字顯示
//取得文件第一段的第一個子節點
var n=document.getElementByTagName("p")[0].firstChild;
var b=document.createElement("b");//建立<b>
n.parentNode.replaceChild(b,n); //用<b>替換節點
b.appendChild(n); //重新插入節點到<b>的子節點
3.NodeFilter
過濾文件樹之節點的函數
(1)常數
| 常數 | 內容 | 備註 |
| short FILTER_ACCEPT=1 | 接受目前節點,NodeIterator或TreeWalker介面將傳回目前節點,作為其文件尋訪的一部分 | |
| short FILTER_REJECt=2 | 拒絕目前節點,NodeIterator或TreeWalker介面的作用如目前節點不存在一樣,另外,此回傳值會通知TreeWalkder介面忽略目前節點的所有子節點 | |
| short FILTRE_SKIP=3 | 跳過目前節點,NodeIterator或TreeWalker介面不傳回目前節點,但它仍會遞迴尋訪其子節點 | |
下面是常數的位元旗標,用於設定Document物件的createNodeIterator()和createTreeWalker()
的參數,whatShow,每個常數對應一種Document節點的型態(關於節點型態的列表,參閱"Node"參考資料)並指出NodeIterator或TreeWalker介面在尋訪文件的過程中應該考慮該型態的節點,利用邏輯OR運算符"|"可以將多個常數組合起來,SHOW_ALL是個特殊值,它所有的位元都設定1,指出需要考慮所有型態的節點(不管其型態為何)
| 常數 | 內容 | 備註 |
| unsigned long SHOW_ALL= | 0xFFFFFFFF | |
| unsigned long SHOW_ELEMENT | 0x00000001 | |
| unsigned long SHOW_ATTRIBUTE | 0x00000002 | |
| unsigned long SHOW_TEXT | 0x00000004 | |
| unsigned long SHOW_CDATA_SECTION | 0x00000008 | |
| unsigned long SHOW_ENTITY_REFERENCE | 0x00000010 | |
| unsigned long SHOW_ENTITY | 0x00000020 | |
| unsigned long SHOW_PROCESSING_INSTRUCTION | 0x00000040 | |
| unsigned long SHOW_COMMENT | 0x00000080 | |
| unsigned long SHOW_DOCUMENT | 0x00000100 | |
| unsigned long SHOW_DOCUMENT_TYPE | 0x00000200 | |
| unsigned long SHOW_DOCUMENT_FRAGMENT | 0x00000400 | |
| unsigned long SHOW_NOTATION | 0x00000800 | |
(2)方法
#acceptNode()
在Java這樣的語言,不允許將函數作為參數傳遞給其他函數,所以定義節點過濾函數,需要定義一個類別,由該類別實作介面,並包含對這種函數的實作,函數旳參數是一個節點,由該類別實作這種介面,並包含對這種函數實作,函數的參數是一個節點,且必須傳回FILTER_ACCPET,FILTER_REJECT和FILTER_SKIP這三個常數之一,
但在JavaScript中,只需要定義一個函數(可以是任何名稱),其參數是一個節點,傳回三個過濾常之一,即可建立一個節點過濾程式
節點過濾程式是一個物物件,可以測試一個Document節點,並通知NodeIterator或TreeWalkr介面是否在文件尋訪中包括這個節點,在JavaScript中,節點過濾程式只是一個函數,唯一的參數是一個節點,傳回前面定義的三個過濾常數之一,請注意,並沒有NodeFilter介面,而只有定義這些過濾常之屬性的NodeFilter物件,欲使用節點過濾程式,需要將它傳遞給Document物件的createNodeIterator()或creatTreeWalker(),常使用產生的NodeIterator或TreeWalker物件尋訪文件時,節點過濾函數將被呼叫以便測試節點
理論上應讓該編寫節點過濾函數讓它們本身才不會改變文件樹,也不丟出例外,另外,節點過濾程式不會根據以往它們的呼叫歷史做出過濾的決定
例,
我們可以用以下方式定義並使用節點過濾函數
//定義節點過濾函數式用來過濾除了<h1>和<h2>之外的所有元素
var myfilter=function(n){//過濾節點n
if( (n.nodeName=="H1")||(n.nodeName=="H2"))
return NodeFilter.FILTER_ACCEPT;
else
return NodeFilter.FILTRE_SKIP;
}
//現在建立使用過濾函數的NodeIterator
var ni=document.createNodeIterator(document.body, //尋訪文件主體
NodeFilter.SHOW_ELEMENT,//只有元素
myfilter, //透過標記名稱過濾
false); //沒有實體擴充
4.Nodelterator介面
遍歷Document節點過濾後的序列
Nodelterator介面表示Document節點的序列,這些節點是按照文件原始碼的順序尋詐文件subtree,並用二階段程序(two-stage process)過濾節點後得到的,NodeIterator物件由Document.createdNodeIterator()建立,利用nestNode()和previiousNode()可以向前或後尋訪節點序列,在使用NodeIterator物件後,應呼叫detach()方法,除非我們確定在文件修改前,這個NodeIterator物件將被資源回收,
注意,此介面的屬性都是傳遞給Document.createNodeIterator()的參數的唯讀副本
nextNode()和previousNode()傳回的節點必須通過二階的過濾,首先,節點型態必須是whatToShow屬性指定的型態之一,參閱"NodeFiler"參考資料,其中有可組合指定給Document.createNodeIterator()的whatToShow參數的常數列表,接下來若filter屬性不為null,則通過whatToShow測試的節點會傳遞給filter屬性指定的過濾函式,若該函式傳回NodeFilter.FILTER_REJECT或NodeFilter.FILTER_SKIP,NodeIterator將跳過該節點,請注意,當節點被一個或兩過濾步驟拒絕時,只有節點本身被拒絕,其子節點不會被自動拒絕,仍然要接受同樣的過濾步驟.
即使NodeIterator尋訪的文件樹被修改了,NodeIterator物件仍然有效,nextNode()和previousNode()將基於文件的目前狀態傳回節點,而不是建立NodeIterator物件時的文件狀態
| 成員 | 內容 | 備註 |
| expandEntifyReferences | 目前NodeIterator物件是否尋訪EntityReference節點的子節點(在XML文件中),此屬性的值在首次建立NodeIterator時,將作為Document,createNodeIterator()的參數,唯讀,布林 | |
| filter | 節點過濾函數,在呼叫Document.createNodeIterator()時指定,唯讀,NodeFilter | |
| root | NodeIterator物件開始遍歷的根節點,其值在呼叫Document.createNodeIterator()時指定,唯讀,Node | |
| whatToShow | 位元旗標的集合,(有效的旗標的列表參閱"NodeFiltr"參考資料)指定目前NodeIterator物件考慮的Document節點的型態,若此屬性中的某個位元沒有被設定NodeIterator物件將忽略對應的節點型態,請注意,此屬性的值是在呼叫Document.createNodeIterator()時指定的,唯讀,long,unsigned | |
| detach() | 將目前的NodeIterator物件中"分離"出來,以便在文件被修改時實作,不再需要修改NodeIterator物件,在使用完NodeIterator物件後,才呼叫此方法,呼叫detach()後,對NodeIterator物件其他方法的呼叫都會引發例外 | |
| nextNode() | 傳回NodeIterator表示的過濾後的節點序列中下一個節點,若NodeIterator巳經傳回最後一個節點,則傳回null | |
| previousNode() | 傳回NodeIterator表示的過濾後之節點序列前一個節點,若沒有前一個節點,則傳回null | |
#detch()
釋放NodeIterator物件
DOM實作會追蹤為文件建立的所有NodeIterator物件,因為在某些Document節點被刪除時,它們需要修改NodeIterator物件的狀態.當你確認不再使用NodeIterator物件時,可以呼叫detach(),通知實作不要再追踨它們,
注意,一旦呼叫了此方法,接下來呼叫nextNode()和previousNode()都會丟出例外.
呼叫detach()並非必要的,但在文件被修改,且NodeIterator物件不會立刻被回收時,這樣做能提高性能
a.用法,void detach()
#nextNode()
尋訪到一下個節點
a.用法,Node nextNode()
throws DOMException;
b.回傳值
NodeIterator物件表示的節點序列中的下個節點,若最後一個節點巳經傳回了,則傳回null
c.丟出,若在呼叫detch()之後呼叫此方法,它將丟出code為INVALID_STATE_ERR的DOMException例外
此方法將向前尋訪NodeIterator物件表示的節點序列,若這是對NodeIterator物件,第一次呼叫此方法,它將傳回節點序列中的第一個節點,否則,它將傳回上一次傳回的節點後的節點
d.例
//建立NodeIterator,以表示文件主體中的所有元素
var ni=document.createNodeIterator(document.body,
NodeFilter.SHOW_ELEMENT,
null,false)
//向前遍歷所有節點
for(var e =ni.nextNode();e!null;e=ni.nextNode()){//處理元素e
}
#nextNode()
尋訪下一個節點
a.用法,Node nextNode()
throws SOMException;
b.回傳值,NodeIterator物件表示的節點序列中的下一個節點,若最後一個節點巳娙傳回了,則傳回null.
c.丟出,若在呼叫detach()以後呼叫此方法,它將丟出code為INVALID_STATE_ERR的DOMException例外
此方法將向前尋訪NodeIterator物件表示的節點序列,若這是對NodeIterator物件第一次呼叫此方法,它將傳回節點序列中的第一個節點,否則,它將傳回上一次傳回的節點後的節點
d.例
//建立NodeIterator以表示文件主體中的所有元素
var ni=document.createNodeIterator(document.body,
NodeFilter.SHOW_ELEMENT,
null,
false);
//向前遍歷所有節點
for(var e=ni.nextNode();e!=null;e=ni.nextNode()){
//處理元素e
}
#previousNode()
尋訪到前一個節點
此方法將後向尋訪NodeIterator物件表示的節點序列,它傳回的節點位於nextNode()或previousNode()傳回的最新節點之前,若序列中不存在這樣節點,則傳回null
a.用法,Node previousNode()
throws DOMException;
b.回傳值,NodeIterator物件表示的節點序列中的前一個節點,若沒有前一個節點,則傳回null
d.丟出,若在呼叫detach()之後呼叫此方法,它將丟出code為INVALID_STATE_ERR的DOMException例外
5.NodeList介面
節點的唯讀陣列
NodeList介面定義Node物件的唯讀有序列表(即陣列),length屬性指定列表中有多少節點,利用item()可以取得列表中指定位置的節點,NodeList的元素都是有效的Node物件,它不會有null元素
在JS中NodeListh物件的作用和JS陣列相似,可以用陣列符號[]從列表中查詢元素,而不必呼叫item(),但不能用[]為NodeList物件加入新節點,由於將NodeList物件視為JS唯讀陣列來處理會更容易,在這裡,我們採用Node[](節Node陣列)代替NodeList,如參閱"Element.getElementsByTagName()"參考資料,它列出傳回的Node[]陣列,而不是NodeList物件,同樣的,雖然技術上說,Node物件的childNodes屬性是NodeList物件,但"Node"參考資料將它定義為Node[],而它的屬性本身通常以"CildNodes[]陣列"表示
注意,NodeList物件是"活的"(非靜態的),且會立刻反映出文件樹的變化,如,若有一個NodeList物件,表示指定節點的子節點,若刪除其中個的子節點,則該子節點將從NodeList中刪除,若在遍歷NodeList的元素時,迴圈的主體修改了文件樹(如刪除節點),那麼將影響NodeList的內容,所以要小心操作
(1)NodeList介面的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| lengh | 陣列中的節點數,唯讀,long,unsigned | |
| item() | 傳回陣列中的指定元素 | |
#item()
取得NodeList中的元素
此方法將傳回NodeList中的指定元素,在JS中,可以用陣列符號[]來取代呼叫此方法
a.用法,Node item(unsigned long index)
b.參數,index,欲取得的節點在NodeList中的位置(或索引),NodeList中的第一個節點索引為0,最後一個節點的索引為length-1.
c.回傳值,NodeList中指定位置的節點,若index小於0或大於NodeList的長度,則傳回null
6.TreeWalker介面
尋訪過濾後的文件subtree
(1)TreeWalker介面的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| currentNode | TreeWalker目前的位置,是與所有TreeWalker尋訪方法操作有關的節點,此節點是由某個尋訪方法最近傳回的,若還沒有任何尋訪方法被呼叫,則它與root屬性相同 ,這是個可讀寫屬性,我們可以將它設定成任何有效的Document節點,即使此節點不是原本root節點的子孫節點,或被Treewalker使用的過濾程式拒絕了,若改變此屬性旳值,尋訪方法的操作將與設定的新節點有關,若將此屬性設為null,將丟出code為NOT_SUPPORTED_ERR的DOMException例外 | Node |
| expandEntityReferences | 指定Treewalker物件在尋訪XML女件時是否擴展它遇到的實體參考指標,此屬性的值可以透過Document.createTreeWalker()設定 | 唯讀,布林 |
| filter | 節點過濾函式(若存在),在呼叫Document.createWalker()中為此TreeWalker物件設定的,若没有使用節點過濾函數,此屬性為null | 唯讀,NodeFilter |
| root | 指定TreeWalker物件開始尋訪的root節點,它是currentNode屬性的初始值,並於呼叫Document.createTreeWalker()中設定 | 唯讀,Node |
| whatToShow | 表位元旗標的集合(有效旗標的列表請參閱"NodeFilter")指定目前TreeWalker物件考慮的Document節點型態,若此屬性中的某個位元未被設定TreeWalker物件將忽略對應的節點型態,,注意,此屬性的值是在呼叫Document.createTreeWalker()中指定的 | 唯讀,long,unsigned |
| firstChild() | 傳回未被過濾掉的目前節點之第一個子節點或null | |
| lastChild() | 傳回未被過濾掉的目前節點之最後一個子節點或null | |
| nextNode() | 傳回(依來源文件順序)未被過濾掉的下一個節點或null | |
| nextSibling() | 傳回未被過濾掉的目前節點之下一個兄弟節或null | |
| parentNode() | 傳回未被過濾掉的目前節點之父節點,最近的祖先節點或null | |
| previousNode() | 傳回(依來源文件順序)未被過濾掉的前一個節點或null | |
| previousSibling() | 傳回未被過濾掉的目前節點之前一個兄弟節點或null | |
TreeWalker物件用於過濾指定的文件subtree,並定義尋訪過濾後的文件樹(可能與原始文件樹的結構有很大差異)的方法,利用Document物件的createTreeWalker()可以建立TreeWalker物件,一旦建立了TreeWalker物件,就可以呼叫其fkrstChild()和nextSibling()來尋訪它代表的過濾後文件subtree,這與使用Node介面的firstChild屬性和nextSibling屬性尋訪它代表的過濾後文件subtree,這與使用Node介面的firstChild屬性和nextSibling屬性尋訪未過濾文件樹的方式一樣.
TreeWalker介面採用和NodeIterator介面一樣的二階段過濾步驟,
TreeWalker定義各種尋方法只傳回通過二階段過濾的節點,
首先,節點型態必須是whatToShow屬性指定的型態之一,
可組合指定Document.createTreeWalker()的whatToShow參數的常數列表(參閱"NodeFilter"),
接著,若filter 屬性不是null,則通過whatToShow測試的節點還要傳到filter屬性指定的過濾函數,
若該函數傳回NodeFilter.FILTER_ACCEPT,該節點將被傳回,若過濾函數傳回NodeFilter.FILTER_REJECT,TreeWalker將跳過該節點和它所有的子孫節點(這點與NodeIterator過濾不同,在NodeIterator過濾中,所有子孫節點都不會被自動拒絕,)
若節點過濾函數傳回NodeFilter.FILTER_SKIP,TreeWalker將忽略該節點,但仍然考慮它的子孫節點.
與NodeIterator不同,在底層文件被修改時TreeWalker不會被修改,即使從文件中刪除了該節點,TreeWalker的目前節點仍保持不變(在這種情況下,TreeWalker可以用於尋訪包圍目前節點的被刪除節點之樹(若存在的話))
例:
//NodeFilter物件拒絕<font>標籤和具有class="sidebar"HTML屬性的元素以及這種元素的子孫
var filtre=function(n){
if(n.nodeName=="FONT")return NodeFiltre.FILTER_SKIP;
if(n.nodeType==Node.ELEMENT_NODE&&n.className=="sidebar")
return NodeFilter.FILTER_REJECT;
return NodeFiltre.FILTRE_ACCEPT;
}
//下面是用TreeWalker物件尋訪文件的遞迴函數
function traverse(tw){
//記住目前節點
var cureentNode=tw.currentNode;
//尋訪TreeWalker目節點的子節點
for(var c =tw.firstChild();c!=null;c=tw.nextSibling())
process(c);//處理子節點
traverse(tw);//遞迴處理它的子節點
}
//將TreeWalker恢復到找到它時的狀態
tw.currentNode=currentNode;
#firstChild()
傳回未被過濾掉的第一個子節點
此方將currentNode屬性設定為目前節點未被過濾掉的第一個子節點,並傳回該子節點,若沒有這樣的子節點,它不會改變currentNode屬性,且傳回null.
a.用法,Node firstChild();
b.回傳值,目前節點未被過濾掉的第一個子節點,若沒有這樣的子節點,則傳回null.
#lastChild()
傳回未被過濾掉的最後一個子節點
此方此將crrentNode屬性設為目前節點未被過濾掉的最後一個子節點,並傳回該子節點,
若沒有這樣的子節點,它不會改變currentNode屬性,並傳回null
a.用法,Node lastChild()
b.回傳值,目前節點被過濾掉的最後一個子節點,若沒有則傳回null
#nextNode()
傳回未被過濾掉的下一個節點
此方法將currentNode屬性設成未被過濾掉的下一個節點(此文件原始碼中的順序),並傳回該節點,
若没有這樣的節點,或者下一個節點在root subtree之外,currentNode將保持不變,此方法傳回null.
注意,此方法將攤平文件樹的結構,並依來源文件中的順序傳回節點,呼叫此方法會使目前節點在文件樹中下移,橫移或上移,
用NodeIterator.nextNode()也可以執行這種扁平尋訪
a.用法,Node nextNode()
b.回傳值,在文件原始碼中位於目前節點之後,且未被過濾掉的節點,若不存在這樣的節點,則傳回null
#nextSibling()
傳回未被過濾掉的下一個兄弟節點
此方法將currentNode屬性設成目前節點未被過濾掉的下一個兄弟節點,並傳回該兄弟節點,
若没有這樣的兄弟節點,此方法將不改變currentNode屬性,並傳回null
a.用法,Node nextSlibling()
b.回傳值,目前節點未被過濾掉的下一個兄弟節點,若沒有這樣的節點,則傳回null.
#parentNode()
傳回未過濾掉的最近祖先節點
此方法將currentNode屬性設為目前節點未被過濾掉的最近祖先節點,並傳回該祖先節點,若没有這樣的祖先節點,它不會改變curentNode屬性,傳回null.
a.用法,Node parentNode()
b.回傳值,目前節點未被過攄掉的最近祖先節點,若沒有這樣的節點,則傳回null
#previousNode()
傳回未被過濾掉的前一個節點
此方法將currentNode屬性設為目前節點未被過濾掉的前一個節點(依來源文件的順序)
,並傳回該節點,若沒有這樣的節點,或者前一個節點在root substrr之外,currentNode將保持不變,此方法傳回null
注意
a.用法,Node previousNode()
b.回傳值,在文件原始碼中位於目前節點之前,且未被過濾掉的節點,若不存這樣的節點,則傳回null
#previousSlibling()
傳回未被過濾掉的前一個兄弟節點
此方法將currentNode屬性設為目前節點未被過濾掉前一個兄弟節點,並傳回該兄弟節點,
若沒有這樣的兄弟節點,此方法不會改變currentNode屬性,而傳回null
a.用法,Node previousSigling()
b.回傳值,目前節點未被過濾掉的前一個兄弟節點,若沒有這樣的兄弟節點,傳回null
7.Range介面
表示文件中的連纈範圍,
Range物件表示文件的連續範圍或區域,如使用者在瀏覽器視窗中用滑拖曳選取的區域,若實作支援Range模組,則Document物件就定義了createRange(),呼叫它可建立新的Range物件(注意,IE定義了不相容的Docuemnt.creatRange(),它傳回的物件與Range介面相似,但不相容
Range介面為定義定義了許多指定文件"選取"區域的?法,此外還有幾個在選取區域上進行剪貼操作的方法,
一個範圍具有兩個邊界點,即一個開始點和一個結束點,每個邊界點由一個節點由一個節點和該節點中的偏移量指定.該節點通常是Element,Document或Text節點.對於Element和Document節偏移量指向該節點的子節點,偏移量為0,表示邊界點位於該節點的第一個子節點之前.偏移量為1,表示邊界點位於該節點的第一個子節點之後,第二個子節點之前,但若邊界節點是Text節點,偏移量指的則是文字中兩個字元之間的位置.
透過Range介面的屬性可取得範圍的邊界節點和偏移量,而其方法可設定範圍邊界.
(範圍旳邊界可以設為Document或DocumentFragment物中件中的節點
一旦定義了範圍的邊界點,就可以使用delecteContents(),extractContents(),cloneContents(),和insertNode()實作剪下,複製和貼上的操作.
當透過插入或刪除操作改變文件時,表示文件一部分的所有Range物件都將被改變(若必要的話),以便使它們的邊界點保持有效,它們表示的文件內容不變.
(1)常數
這些常數定如何比較Range物件邊界點,它們是compareBoundaryPoints()的參數how的合法值(參閱"Range.compareBoundaryPoints()")
| 常數 | 內容 | 備註 |
|---|---|---|
| START_TO_START=0 | 比較指定範圍的開始點與目前範圍的開始點 | short,unsigned |
| START_TO_END=1 | 比較指定範圍的開始點與目前範圍的結束點 | short,unsigned |
| END_TO_END=2 | 比較指定範圍的的結束點與目前範圍的結束點 | short,unsigned |
| END_TO_START=3 | 比較指定範圍的結點與目前範圍的開始點 | short,unsigned |
(2)Range介面常見的成員
Range介面定義下列屬性
注意,所有的屬性都是唯讀的,我們無法設定屬性藉此改變範圍開始點或結束點,必須呼叫setEnd()或setStart()來達成
且,呼叫Range物件的detach()後,對這些屬性的任何操作都會丟出code為INVALID_STATE_ERR的DOMException例外
若呼叫範圍的detach(),接下來呼叫Range物件的任何方法都會丟出code為INVALID_STATE_ERR的DOMException例外.
因為此例外在此介面中普偏存在,所以Range 方法個別的參考資料沒有將它列出
| 成員 | 內容 | 備註 |
|---|---|---|
| collapsed | 若範圍的開始點和結束點在文件的同一位置,則為true,亦即,範圍是空的或"收合"的 | 唯讀,布林 |
| commonAncestorContainer | 包含範圍的開始點和結束點(即它們的祖先節點),且嵌套最深的Document節點 | 唯讀,Node |
| endContainer | 包含範圍結束點的Document節點 | 唯讀,Node |
| endOffset | endContainer中的結束點 | 唯讀,long |
| startContainer | 包含範圍開始點的Document節點 | 唯讀,Node |
| startOffset | 開始點在starContainer中的位置 | 唯讀,long |
| cloneContents() | 傳回新的DocumentFragment物件,它包含此範圍表示的文件區域副本 | |
| cloneRange() | 建立新的Range物件,代表與目前的Range物件相同文件區域 | |
| collapse() | 收合此範圍,使它的邊界點重合 | |
| compareBoundaryPoints() | 比較指定範圍的邊界點和目前範圍的邊界點,根據它們的順序傳回-1,0和1.比較哪個邊界點由它的第一個數指定,其值必須是前面定義的常數之一 | |
| deleteContents() | 刪除目前Range物件代表的文件區域 | |
| detach() | 通知實作不再使目前的範圍,可以停止追蹤它,若為範圍呼叫此方法,接下來呼叫的此範圍任何方法會丟出 code為INVALID_STATE_ERR的DOMException例外 | |
| extractContents() | 刪除目前範圍表示的文件區域,並以DocumentFragment物件的形式傳回該區域的內容,此方法和cloneContents()和deleteContents()的組合很相似 | |
| inserNode() | 將指定節點插到文件範圍的開始點 | |
| selectNode() | 設定此範圍的邊界點,使它包含指定的節點和它的所有子孫節點 | |
| selectNodeContents() | 設定此範圍的邊界點,使它包含指定的節點和它的所有子孫節點,但不包含指定的節點本身 | |
| setEnd() | 將此範圍的結束點設定成指定節點和偏移量 | |
| setEndAfter() | 將此範圍的結束點設為緊鄰指定的節點之後 | |
| setEndBefor() | 將此範圍的結束點設為緊鄰指定的節點之前 | |
| setStart() | 將此範圍的開始點設為指定節點中的指定偏移量 | |
| setStarAfter() | 將此範圍的開始點設定為緊鄰指定的節點之後 | |
| setStartBefor() | 將此範圍的開始點設定為緊鄰指定的節點之前 | |
| surroundContents() | 將指定的節點插入文件範圍的開始點,然後重定範圍中所有節點的父節點,使它們成為新插入的子孫點 | |
| toString() | 傳回此範圍描述之文件區域的純文字(以不含任標籤的純文字形式傳回目前範圍的內容) | |
#cloneContents()
將範圍的內容複製到DocumentFragment物件,
此方法將複製目前範圍的內容,將它儲存在DocumentFragment物件中,並傳回該物件
a.用法
DocumentFragment cloneContents()
throws DOMException();
b.回傳值
DocumetnFragment物件,包含此範圍中的文件內容旳副本
c.丟出,若目前的範圍包含DocumentType節點,此方法將丟山code為HIERAFCHY_REQUEST_ERR的DOMException例外
#cloneRange()
複製此範圍
a.用法,Range cloneRange();
b.回傳值,新建占的Range物件,與目前範圍的邊界點相同
#collapse()
使範圍的邊界點重合,
此方去將設定範圍的邊界點,使它與?一個邊界點相同,欲修改的邊界點由參數toStart指定,此方法傳回後,範圍將"收合",即表示文件中的一個點,沒有內容,當範圍被數合後,其collapsed屬性會設成true
a.用法,
void collapse(boolean roStart)
throws DOMException;
b.參數,toStart,若此?數為true,此方法會將範圍的結束點設為與開始點相同的值,否則,將範圍的開始點設定為與結束點相同的值
#compareBoundaryPoints()
比較兩個範圍的位置,
a.用法,
short compareBoundaryPoints(unsigned short how,
range sourceBange)
throws DOMException;
b.參數,
how,指定要如何進行比較(比較哪些邊界點),其合法值Range介面定義的常數
sourceRange,要與目前範圍進行較皂範圍
c.回傳值,若目前範圍的指定邊界點位於sourceRange指定的邊界點之前,則傳回-1,若指定的兩個邊界點相同,傳回0,若目前範圍的指定邊界點位於sourceRange指定的邊界點之後,則傳回1.
d.丟出,若sourceRange表示的文件不同於目前範圍表示範圍表示的文件,此方法?丟出code為WRONG_DOCUMENT_ERR的DOMException例外.
此方法?比較目前範圍的邊界點指定的sourceRange的邊界點,並傳回一個值,指定它們在來源文件中旳相對位置,?數how指定比較兩個範圍的哪個邊界點,此參數的合法值和它們的含義如下:
Range.START_TO_START:
比較兩個Range節點的開始點
Range.END_TO_END:
比較兩個Range節點的結束點
Range.START_TO_END
用sourceRange的開始點與目前範圍的結束點比較
Range.END_TO_START
用sourceRange的結束點與目前範圍的開始點比較
此方法傳回一個數字,指定目前範圍相對於sourceRange的位置,因此我們可能認為,首先需要用?數how旳範圍常數先指定目前範圍的邊界點,然後再指定sourceRange的邊界點,但事實上,常數Range.START_TO_END指定與目前範圍旳"結束"點和sourceRange的"開始"點進行比較.
同樣的,常數Range.END_TO_START常數指定比較目前範圍的"開始"和指定範圍的"結束點".
#deleteContents()
刪除文件的區域,
此方法將刪除目前範圍表示的所有文件內容,當此方法傳回時,目範圍的邊界點?重合,
注意,這種刪除操作可能會產生相鄰的Text節點,呼叫Node.normalize()可以合併這些節點.
a.用法,
void deleteContents()
throws DOMException;
c.丟出,若目前範圍表示的部分文件是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMEception例外
#detach()
釋放Range物件,
DOM實作將追蹤為文件建立的所有Range物件,因為在修改文件時,它們需要改變範圍的邊界點,當確認Range物件不再使用時,可以呼叫detach(),通知不必再追?此範圍了,
注意,一旦呼叫Range物件的detach(),再使用Range物件,就會引發例外,呼叫detach()並非必要的,但在修改文件後,Range物件不會立刻被回收的情況下,呼叫它可以提高效率
a.用法,
void detach()
throws DOMException;
b.丟出,和所有Range方法一樣,若在巳經釋放的Range物件上呼叫此方法,將丟出code為INVAILD_STATE_ERR的DOMException例外
#extractContents()
刪除文件內容並以DocumentFragment物件的形式傳回它,
此方法將刪除文件指的指定範圍,並傳回包含被刪除內容(或被刪除內容之副本)的DocumentFragment節點.當此方法傳回時,範圍將收合,文件中可能出現相鄰的Text節點(用Node.normalize()可以將它們合併
a.用法,
DocumentFragment extractContents()
throwDOMException;
b.回傳值,一個DocumentFragment節點,包含此範圍的內容
c.丟出,如所要取出的文件內容是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外,若目前範圍包括DocumentType節點,此方法將丟出code為HIERARCHY_REQUEST_ERR的DOMException例外.
#inserNode()
在範圍的開頭插入一個節點,
此方法會將指定的節點(和它的所有子孫節點)插入到文件範圍的開始點,當此方法傳回時,目前範圍將包括新插入的節點,若newNode巳經是文件的一部分,那麼它將從目前位置被刪除,然後重新插入範圍的開始點,若newNode是DocumentFragment節點,則插入的不是它釭身,而是它的所有子節點並依序插入範圍的開始點
若包含目前範圍之開始點的節點是Text節點,那麼在發生插入操作之前,它將被割成兩個相鄰的節點,若newNode是Text節點,在插入文件後,它不會與任何相鄰旳Text節點合併,欲合併相鄰的節點,可呼叫Node.normalize()
a.用法,
void inserNode(Node newNode)
throws RangeException,
DOMException;
b.參數,newNode,要插入文件的節點
c.丟出,若newNode是Attr,Document,Entity節點,此方法將丟出code為INVALID_NODE_TYPE_ERR的RangeException例外.
在下列條件下,此方法還將丟出如下code的DOMException例外:
HIERARCHY_REQUSET_ERR:
包含範圍的開始點的節點不能有子節點,它也不能有指定型態的子節點,或者newNode是該節點的祖先節點(或是該節點本身)
NO_MODIFICATION_ALLOWED_ERR:
包含範圍之開始點的節點(或它的祖先節點)是唯讀的
WRONG_DOCUMENT_ERR
newNode與範圍所屬的文件不同
#selectNode()
將範圍設為一個節點,
此方法將把範圍的內容設定為指定的refNode節點,也就是說"選取"該節點和它的子孫節點
a.用法,
void selectNode(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,"被選取"的節點,(即將成為目前範圍的內容之節點)
c.丟出,若refNode是Attr,Document,DocumentFragment,Entity或Notation節點,或者refNode的祖先之一是DocumentType,Entity或Notation節點,此方法將丟出code為INVALID_NODE_TYPE_ERR的RangeException例外.
#selectNodeContents()
將範圍的邊界設定為某個節點的子節點,
此方法將設定範圍的邊界點,讓此範圍包含refNode子節點
a.用法,
void selectNodeContents(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,其子節點將成為目前範圍的內容的節點
c.丟出,若refNode或它的祖先節點是DocumentType,Entity或Notation節點,此方法將丟出code為INVALID_NODE_TYPE_ERR的RangeException例外
#setEnd()
設定範圍的結束點,
此方法將把範圍的結束點設定成endContainer屬性和endOffset屬性指定的值
a.用法,
void setEnd(Node refNode,
long offset)
throws RangeException,
DOMException;
b.參數,
refNode,包含新結束點的節點
offset,結束在refNode中的位置
c.丟出,若refNode或它的祖先節點是DocumentType,Enity或Notation節點,此方法將丟出code為INVALID_NODE_TYPE_ERR的RangeException例外.
#setEndAfter()
在指定的節點後結點後結束範圍
此方法將範圍的結果點誘設定成緊鄰指定refNode節點的位置
a.用法,
void setEndAfter(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,欲設定範圍的結束點位於其後的節點
c.丟出,若refNode是Document,DocumentFragment,Attr,Entity或Notation節點,或者refNode的根包容節點不是Document,DocumentFragment或Attr節點,此方法將丟出code為INVALID_NODE_TYP_ERR的RangeException例外
若refNode所屬的文件與建立此範圍的文件不同,此方法將丟出code為WRONG_DOCUMENT_ERR的DOMException例外
#setEndBefor()
在指定的節點之前結束範圍,
此方法會將範圍的結束點設定成指定refNode節點之前的位置
a.用法,
void setEndBefore(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,欲設定範圍的結束點位於其前面的節點
c.丟出,此方法在與Range.setEndAfter()一樣的情下會丟出相同的例外,(參,Range.setEndAfter())
#setStart()
設定範圍的開始點,
此方法在將範圍的開始點設定成startConainer屬性和startOffset屬性指定
a.用法,
void setStart(Node refNode,
long offset)
throws RangException,
DOMException;
b.參數,
refNode,包含新開始點的節點
offset,新開始點在refNode中的位置
c.丟出,此方法在與Range.setEnd()相同的原因下,丟出相同的例外(參Range.setEnd())
#setStarAfter()
在指定的節點後開始範圍,
此方法將範圍始點設定成緊鄰指定refNode節點的位置
a.用法,
void setStartAfter(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,欲設定範圍的開始點位於其後的節點
c.丟出,將方法會因與Rang.setEndAfter()同樣的原因丟出相同的例外(參Range.setEndAfter())
#setStartBefor()
在指定的節點之前開始範圍,
此方法將範圍開始點設成指定refNode節點之前的位置
a.用法,
void setStartBefore(Node refNode)
throws RangeException,
DOMException;
b.參數,refNode,要設定範圍的開始點位於其前面的節點
c.丟出,此方去在與Range.setEndAfter()相同的情況下,丟出相同的例外,(參Range.setEndAfter())
#surroundContents()
以指定節點包圍範圍的內容,
此方法將目前範圍的父節點重設定為newParent,然後將newParent插入在文件中範圍的開始位置,例如,將文件的一個範圍放入<b>或<span>元素中,可以使用此方法
若newParent巳經是文件的一部分,那麼它會先被刪除,其子節點也將被捨棄,當此方法傳回時,此範圍將以newParent之前的位置為開始點,newParent之後的位置為結束點
a.用法,
void surroundContents(Node newParent)
throws RangeException,
DOMException;
b.參數,newParent,將成為目前範圍內容的新父節點之節點
c.丟出,此方法將在下列環境中丟出具有如下code的DOMException例外或RangeException例外:
DOMException.HIERARCHY_REQUSET_ERR:
目前範圍之開始點的包容節點不能有子節?,或不能有newParent型態的子節點,或者newParent是包容節點的祖先節點
DOMException.NO_MODIFICATION_ALLOWED_ERR
目前範圍之邊界點的的祖先節點是唯讀的,不允許進行插入操作
DOMException.WRONG_DOCUMENT_ERR:
newParent與其範圍是用不同的Document物件建立的
DOMException.BAD_BOUNDARYPOINTS_ERR
目前範圍部分地選取了一個節點(Text節點的節點),所以它代表的文件範圍不能被包圍
DOMException.INVALID_NODE_TYPE_ERR
newParent是Document,DocumentFragment,DocumentType,Attr,Entity或Notation節點
8.RangeException介面
通知發生範圍特有的例外,
RangeException物件由Range介面的某些方法丟出,用於通知某種型態的問題,
注意,Range 方法丟出的大多數例外都是DOMException物件,只有當現有的DOMException錯誤常數不適用於表示前的例外時,才產生RangeException物件
(1)RangeException介面的常數
以下常數定義RangeException物件的code屬性之合法值,
注意,這些常數是RangeException的靜態屬性
| 常數 | 內容 | 備註 |
|---|---|---|
| BAD_BOUNDARYPOINTS_ERR=1 | 對於請求的操作而言,範圍的邊界點不合法 | |
| INVALID_DONE_TYPE_ERR=2 | 嘗試將棂範圍邊界點的包容節點設定成無效節點或具有無效祖先的節點 | |
(2)RangeException介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| code | 提供引發例外的詳細資訊的錯誤碼,此屬性的合法值由前面列出的常數定義 | short,unsigned |
9.Text介面(Node->CharacterData->Text)
HTML或XML文件中的文字,
Text節點表示HTML或XML文件中的一串純文字,因為純文字出現在HTML和XML的元素和屬性中,所以Text節點通常會作為Element節點和Attr節點的子節點,Text節點繼承自CharaterData介面,透過從CharaterData介面繼承的data屬性或從Node介面繼承nodeValue屬性,可以存取Text節點的文字內容,利用從CharacterData繼承的方法或Text介面本身定義的splitText()可以操作Text節點.
Text節點沒有子節點
關於從文件的subtree中刪除空的Text節點與合併相鄰的Text節點的方式,(參"Node.normalize()")
子介面:CDATASection
(1)Text介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| splitText() | 在指定的字元位罝將一個Text節點分割成兩個,並傳回新的Text節點 | |
#splitText()
此方法將在指定的offset處將Text節點分割成兩個節點,原本的Text蠞點將被修改,使它包含offset指定的位置之前的文字內容(但不包括該文字內容),新的Text節點將被建立,並用於存放從offset位置(包含該位置上的字元)到原字串結尾的所有字元,新的Text節點是此方法的回傳值,此外,若原本的Text節點具有parentNode,新的Text節點將插入到這個父節點,緊鄰在原本節點之後.
DCATASetion介面繼承了Text介面,CDATASetion節點,而不是Text節點
a.用法,
Text splitText(unsigned long offset)
throws DOMException;
b.參數,offset,分割Text節點的字元位置
c.回傳值,從目前節點分割出的Text節點
d.丟出,此方法將丟出具有下列code之一的DOMException例外
INDEX_SIZE_ERR:
offset是負數,或者大於Text或Comment節點的長度
NO_MODIFICATION_ALLOWED_ERR:
此節點是唯讀,不能修改
10.CharacterData介面(Node->CharacterDate)
Text和Comment節點共同的功能,
CharacterData介面是Text節點和Comment節點的超介面,文件從不包含CharacterData節點,它們只包含Text節點和Comment節點,但由於這兩種節點型態具有相似的功能,因此此處定義了這些函數,以便Text和Comment可以繼承它.
子介面:Comment,Text
(1)CharacterData介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| data | 該節點包含的文字 | 字串 |
| length | 節點包含的字元數 | 唯讀,long,unsigned |
| appendData() | 將指定的字串加到該節點包含的文字上 | |
| deleteData() | 從該節點刪除指定的文字,從指定偏移量(offset)的字元開始,包括其後指定數量的字元 | |
| insertData() | 把指定的字串插入指定偏移量之處的節點文字 | |
| replaceData() | 用指定的字串替換從指定偏移量開始,包括其後指定數量的字元 | |
| substringData() | 傳回從指定偏移量之處的字元開始,包括其後指定數量字元的文字副本 | |
#appendData()
將字串加到Text或Comment節點上,
此方法將字串arg加到節點的data屬性的結尾
a.用法,
void appendDAta(String arg)
throws DOMException;
b.參數,arg,要加到Text或Comment節點的字串
c.丟出,若呼叫此方法節點是唯讀的,它將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外
#deleteData()
從Text或Comment節點刪除文字,
此方法將從offset指定的字元開始,從Text或Comment節點中刪除count個字元,若offset加count值大於Text或Comment節點中的字元數,即刪除從offset開始到字串結尾的所有字元
a.用法,
void deleteData(unsigned long offset,
unsigned long count)
throws DOMException;
b.參數,
offset,要刪除的第一個字元的位置
count,要刪除的字元數量
c.丟出,此方法可以丟出具有以下code值的DOMException例外:
INDEX_SIZE_ERR:
參數offset或count是負數,或offset大於Text節點或Comment節點的長度
NO_MODIFICATION_ALLOWED_ERR:
節點是唯讀的,不能修改
#insertData()
將字串插入Text節點或Comment節點,
此方法將指定的字串arg插入到Text節點或Comment節點的指定位置offset
a.用法,
void insertData(unsigned long offset,
String arg)
throws DOMExcepton;
b.參數,
offset,要將字串插入Text節點或Comment節點的字元位置
arg,要插入的字串
c.丟出,此方法可以丟出冄有以下code的DOMException例外:
INDEX_SIZE_ERR:
參數offset是負數,或offset大於Text節點或Comment節點的長度
NO_MODIFICATION_ERR:
節點是唯讀的
#replaceData()
以指定的字串取代Text節點或Comment節點的字元,
此方法將用字串arg取代從offset開始的count個字元,若offset加count值大於Text或Comment節點的長度,則從offset開始的所有字元都將被取代
a.用法,
void replaceData(unsigned long offset,
unsigned long count,
String arg)
throws DOMException;
b.參數,
offset,要被取代的第一個字元在Text節點或Comment節點中的位置
count,要被取代的字元數量
arg,要取代offset和code的DOMException
c.丟出,此方法將丟出具有以下code的DOMException例外:
INDEX_SIZE_ERR:
參數offset是負數,或offset大於Text節點或Comment節點的長度,或者count是負數
NO_MODIFICATION_ALLOWED_ERR:
節點是唯讀的,不能修改
#substringData()
從Text或Comment節點中取出字串,
此方法將從Text或Commment節點中提取從offset開始的count個字元,只有當節點包含的文字的字元數大於瀏覽器的JS實作中能填入的字串的最大字元數,此方法才有用,在這種情況下,JS程式不能直接使用Text節點或Comment節點的data屬性,而必須用節點文字的較短子字串,在實際應用中,這種情況不太可能出現.
a.用法,
String substringData(unsigned long offset,
unsigned long count)
throws DOMException;
b.參數,
offset,要傳回的第一個字元的位置
count,要傳回的子字串之字元數
c.回傳值,包含Text或Comment節點中從offset開始count個字元的字串
d.丟出,此方法可以丟出具有以下code的DOMException例外;
INDEX_SIZE_ERR:
參數offset是負數,或offset大於Text節點或Comment節點的長度,或者count是負數
DOMSTRING_SIZE_ERR:
指定的文字範圍太長,在瀏覽器的JS實作中無法填入字串中
11.Comment介面(Node->CharacterData->Comment)
HTML或XML註解,
Comment節點表示HTML或XML文件中的註解,使用由CharacterData介面繼承的data屬性,或使用由Node介面繼承的nodeValue屬性,可以存取註解的內容(即<!---->之間的文字),而利用繼承自CharacterData介面的各種方法可以操作註解的內容
12.Attr物件(Node->Attr)
文件元素的屬性,
Attr物件表示Element節點的屬性,Attr物件和Element節點相關,但不直接屬於文件樹(且具有null parentNode屬性),可以透過Node介面的attributes屬性或秋呼叫Element介面的getAttributeNode(),取得Attr物件
Attr物件是節點,其值由Attr節點的子節點表示,在HTML文件中,它只是一個Text節點,但在XML文件中,Attr節點可以有Text和EntityReference兩個子節點,value屬性是讀寫元素屬性的字串值提供了快捷方式
在大多數的情況下,使用元素屬性的最簡單方法是Element介面的getAttribute()和setAttribute().這兩個方法將字串作為屬性名稱和屬性伹,避免使用Attr節點
(1)Attr物件常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| name | 元素的屬性名稱 | |
| ownerElement | 包含此元素屬性的Element物件,若Attr物件岄前沒有關聯到任何Element物件,值為null | |
| specified | 如果文件原始碼中明確指定該元素屬性,或某個script設定了此元素的屬性,其值為true,若沒有明確指定該元素的屬性,但在文件的DTD中有設定預設值,其值為false. | |
| value | 元素的屬性值,讀取此屬性時,元素的屬性值將以字串形式傳回,將此屬性設定成字串時,它會自動建立一個Text節點,以存放該文字,並讓這個Text節點成為Attr物件唯一的子節點 | |
、、、、、、、、、、、、、、、、、、、
十之二.元素相關介面
1.Element介面
表html元素或xml元素
(1)常見的屬性和方法
| 屬性 | 表示 | 備註 |
|---|---|---|
| tagName | 唯讀子串,表元素(標籤名稱) 此屬性的值與Node介面的nodeName屬性值相同 | |
#tagName:
例,如以html的<p>而言,就是P這個字串,
html不分大小寫,但無論標籤名稱在原文件是大寫還是小寫,都以大寫儲存,我們取得的也是大寫.
xml區分大小寫,存取的標籤名稱字串與它在原文件中的形式完全一致.
| 方法 | 表示 | 備註 |
|---|---|---|
| getElementsByTagName("標籤名") | 依指定標籤名稱取得某特定標籤,會傳回指定標籤名稱的元素標籤及其子孫元素節點的陣列,裡頭載有該文件裡我們所指定名稱的所有元素,所以要指定序號 | *document中也有一個同名方法 |
| getElementsByTagNameNS() | ||
| getAttribute("屬性名") | 取得指定的屬性值字串 | |
| getAttributeNS() | ||
| getAttributeNode("屬性名") | 以Attr節點的形式,取得指定的屬性值 | |
| getAttributeNodeNS() | ||
| hasAttributes() | 若該元素具有指定指定名稱的屬性就傳回true,否則傳回false | |
| hasAttributesNS() | ||
| removeAttribute() | 刪除該元素中的指定屬性 | |
| removeAttributeNS() | ||
| removeAttributeNode() | 從元素的屬性中列表中刪除指定的Attr節點, 注意,此方法只能刪除在文件的原始碼中明確設定過的元素屬性,若DTD為刪除的元素屬性設定了預設值,則將建立新的Attr節點,用於表示此元素屬性的預設值 | |
| setAttribute() | 設定指定的屬性值 | |
| setAttributeNS() | ||
| setAttributeNode() | 將指定的Attr節點加到元素的屬性列表中,若巳存在同名的屬性,此屬性的值會被替換 | |
| setAttributeNodeNS() | ||
(1)NS字尾的功用都一樣,不過是表由本地名稱和名稱空間URI指定.由使用名稱空間的XML文件使用.
(2)Element介面提供了一些方法,用以存取元素的屬性(attribute).
要取得元素可用getElementsByTagName(),但它會傳回一個節點清單的陣列,一般都會設定id屬性,則用document.getElementsById()能輕易找到指定的特定元素.document.createElement("標籤名")能新一個元素(節點).
這個介面的好處呢,就是說嘛,在JS中將所有的標籤都物件化(應該可以這麼說吧?)因為這個介面代表所有的標籤.屬性好像...不多?主要是提供方法,而要調動這些方法的就是元素.(只要是個元素物件就能調動)
(3)element介面成員
#getElementsByTagName("標籤名")
a.用法,element.getElementsByTagName("標籤名")
b.參數,要取得的標籤名稱,也可使用「*」號,則會傳回其所有的子孫節點,不論標籤名稱為何
c.回傳值,傳回元素(element)子孫節點中,具有我們指定標籤名稱元素陣列
d.注意,document中也定義了一個叫getElementsByTagName()的同名方法,兩者行為相似,不過它尋訪的是整個文件,而不是尋訪某個特定元素的子孫節點.
另外,HTMLDocument中也有個相似名字的方法叫getElementsByName(),這個方法是根據元素的name屬性值來搜索,不是根據標籤名稱搜索.(by name 喔,不是by Tag name)
#getAttribute("屬性名")
a.用法,element.getAttribute("屬性名")
b.參數,指定要取得標籤(element)中的屬性字串
c.回傳值,傳回該元素(element)中我們指定的屬性值.若找不到會傳一個空字串
d.例
var image=document.body.getElementsByTagName("img");//取得(網頁)文件中的所有圖片標籤
var src0=image[0].getAttribute("src");//取得第一張圖片標籤的src屬性值
//var src0=image[0].src;//或用這行,跟上面那行是一樣的
2.HTMLElement介面
指html元素,所有HTML元素的基礎介面
Element介面的子介面;所有html元素的父類別
window的document屬性指向一個document物件,代表在視窗中所顯示的文件.
在瀏覽器中,能顯示的文件,目常最常見的就屬html了.所以HTMLElement這個物件應該就很重要了,先暸解它是有必要的,它是所有html元素的父類別,很多與html標籤相關的物件都是出自於它,要存取標籤,也要靠它,在DOM中很有用
(1)HTMLElement物件常見的屬性和方法
| 屬性 | 表示 | 備註 |
|---|---|---|
| all[] | 文件中所有元素的陣列,其行為與document.all[]完全一致 | |
| sourecIndex | 元素在包容它的Document.all[]陣列中的索引 | |
| children[] | 該元素的直系子元素 | |
| parentElement | 唯讀,目前元素的直系父元素 | |
| className | 可讀寫字串,指元素的class屬性值,常搭配CSS使用 | |
| id | 可讀寫字串,指元素的id屬性值,可給元素指定唯一的名稱 | |
| document | document物件的參考指標 | |
| innerHTML | 可讀寫字串,指元素含有的html文字,不包含元素本身(不含開始和結束標籤),可以指定的html文替換掉元素的內容 | |
| innerText | 可讀寫字串,指元素中含有純文字,不含元素本身的開始和結束標籤,可以指定的純文字替換掉元素的內容 | |
| outerHTML | 可讀寫字串,指元素含有的html文字,包含元素本身的開始和結束標籤,將此屬性設成HTML文字字串可以完整替換元素和它的內容 | |
| outerText | 可讀寫字串,指元素的純文字,含元素本身的開始和結束標籤,設定此屬性,可以把元素和它的內容完整地替換成指定的純文字 | |
| lang | 可讀寫字串,指元素lang屬性值 | |
| tagName | 唯讀字串,指定某元素(html的標籤名稱) | |
| title | 可讀寫字串,指元素title屬性值 | title是在html4.0時加入了提示說明屬性,幾乎任何標籤都可以用.如此不止圖片可以用alt附註，如超連結等等標籤都可以附註說明. |
| style | 設定此元素可以改變元素的顯示樣式 | |
| offsetHeight | 指元素和其內容的高 | |
| offsetWidth | 指元素和其內容的寬 | |
| offsetLeft | 指元素的X座標,相對於屬性offsetParent指定的包容元素 | |
| offsetParent | 指定義座標系統的包容元素,offsetLeft和offsetTop屬性都是以這個座標系統來計量的.對大多數的元素而言,offsetParent指的就是包容它們的Document物件. | |
| offsetTop | 指元素的Y座標,相對於屬性offsetParent指定的包容元素 | |
| 方法 | 表示 | 備註 |
|---|---|---|
| contains(HTMLElement物件) | 判斷目前的元素是否有指定的元素 | |
| getAttribute(屬性) | 取得指定的屬性值 | |
| setAttribute(屬性) | 設定元素的屬性值 | |
| removeAttribute(屬性) | 從元素中刪除特定的屬性和屬性值 | |
| handleEvent() | 將Event物件傳給適當的事件處理器 | |
| insertAdjacentHTML("字串","字串") | 將HTML文字插入到與目前元素鄰接的文件中 | |
| insertAdjacentText("字串","字串") | 將純文字插入到與目前元素鄰接的文件中 | |
| scrollIntoView(|true|false) | 捲動文件,使該元素出現在視窗的頂部或底部 |
(a)contains(HTMLElement物件)
判斷某元素中是否有指定元素
a.用法,element.contains(HTMLElement物件)
b.參數,htmlElemtnt物件
c.回傳值,若元素element中含有指定的元素物件就傳回true
(b)getAttribute(屬性)
從元素中取得屬性值
a.用法,element.getAttribute(屬性)
b.參數,元素的屬性名稱
c.回傳值,傳回指定的屬性值,若元素中没有指定的屬性,傳回null
(c)setAttribute(屬性,value)
設定元素的屬性值
a.用法,element.setAttribute(屬性,value)
b.參數,第一個參數是元素的屬性名稱,第二個參數是要給屬性設定的值
(d)removeAttribute(屬性)
從元素中刪除屬性
a.用法,element.removeAttribute(屬性)
b.參數,元素的屬性名稱
c.回傳值,若刪除屬性成功,傳回true
(e)handleEvent()
同window.handleEvent()
(f)insertAdjacentHTML("字串","字串")
可以將第二個參數中指定的html文字插入到第一個參數指定的位置
a.用法,element.insertAdjacentHTML("字串","字串")
b.參數,第一個參數是個字串,有以下的值可用,第二個參數是要插入的html文字
| BeforeBegin | 將第二個參數中指定的html文字插入到元素的開始標籤之前 |
| AfterBegin | 將第二個參數中指定的html文字插入到元素的開始標籤之後 |
| BeforeEnd | 將第二個參數中指定的html文字插入到元素的結束標籤之前 |
| BeforeEnd | 將第二個參數中指定的html文字插入到元素的結束標籤之後 |
(g)insertAdjacentText("字串","字串")
可以將第二個參數中指定的純文字插入到第一個參數指定的位置
a.用法,element.insertAdjacentText("字串","字串")
b.參數,第一個參數是個字串,有以下的值可用,第二個參數是要插入的純文字
| BeforeBegin | 將第二個參數中指定的純文字插入到元素的開始標籤之前 |
| AfterBegin | 將第二個參數中指定的純文字插入到元素的開始標籤之後 |
| BeforeEnd | 將第二個參數中指定的純文字插入到元素的結束標籤之前 |
| BeforeEnd | 將第二個參數中指定的純文字插入到元素的結束標籤之後 |
(h)scrollIntoView(|true|false)
a.用法,element.scrollIntoView(|true|false)
b.參數,非必要的布林參數,若是true,元素element會出現在螢幕頂部,若是false,元素element會出現在螢幕底部,若參數省略,預設就是true
| 事件 | 表示 | 備註 |
|---|---|---|
| onclick | 當使用者點擊該元素時呼叫 | |
| ondblclick | 當使用者雙擊該元素時呼叫 | |
| onhelp | 當使用者請求幫助(按下F1)時呼叫 | 限IE4 |
| onkeydown | 當使用者按下某一個按鍵時呼叫 | |
| onkeypress | 當使用者按下或放開某一個按鍵時呼叫 | |
| onkeyup | 當使用者放開某一個按鍵時呼叫 | |
| onmousedown | 當使用者按下某一個滑鼠按鍵時呼叫 | |
| onmouseup | 當使用者放開某一個滑鼠按鍵時呼叫 | |
| onmousemove | 當使用者移動滑鼠時呼叫 | |
| onmouseover | 當使用者移動滑鼠到某一個元素上時呼叫 | |
| onmouseout | 當使用者將滑鼠移出目前元素時呼叫 | |
(a)onclick
點擊滑鼠事件,就是使用者按下滑鼠再放開的事件
a.用法,
<element onclick="handler"...>
element.onclick
(b)ondblclick
雙擊滑鼠事件
a.用法,
<element ondblclick="handler"...>
element.ondblclick
(c)onhelp
請求幫助事件,當使用者按下F1時呼叫
a.用法,
<element onhelp="handler"...>
element.onhelp
(d)onkeydown
按下按鍵事件
a.用法,
<element onkeydown="handler"...>
element.onkeydown
(e)onkeypress
按下按鍵事件
聽說onkeypress就是指onkeydown+onkeyup
a.用法,
<element onkeypress="handler"...>
element.onkeypress
(f)onkeyup
放開按鍵事件
a.用法,
<element onkeyup="handler"...>
element.onkeyup
(g)onmousedown
放開按鍵事件
a.用法,
<element onmousedown="handler"...>
element.onmousedown
(h)onmouseup
放開按鍵事件
a.用法,
<element onmouseup="handler"...>
element.onmouseup
(i)onmousemove
放開按鍵事件
a.用法,
<element onmousemove="handler"...>
element.onmousemove
(j)onmouseover
放開按鍵事件
a.用法,
<element onmouseover="handler"...>
element.onmouseover
(k)onmouseout
放開按鍵事件
a.用法,
<element onmouseout="handler"...>
element.onmouseout
--------------DOM Level 2定義的HTMLElement-----------------
(1)HTMLElement介面的子介面
| HTMLAnchorElement | HTMLAppletElement | HTMLAreaElement |
| HTMLBRElement | HTMBaseLElement | HTMLBaseFontElement |
| HTMLBodyElement | HTMLButtonElement | HTMLDListElement |
| HTMLDirectoryElement | HTMLDivElement | HTMLFieldSetElement |
| HTMLFontElementElement | HTMLFormElement | HTMLFrameElement |
| HTMLFrameSetElement | HTMLHRElement | HTMLHeadElement |
| HTMLHeadingElement | HTMLElement | HTMLIFrameElement |
| HTMLImageElement | HTMLHtmlElement | HTMLIsIndexElement |
| HTMLLIElement | HTMLElement | HTMLLegendElement |
| HTMLLinkElement | HTMLLabelElement | HTMLMenuElement |
| HTMLMetaElement | HTMLMapElement | HTMLOListElement |
| HTMLObjectElement | HTMLOptGroupElement | HTMLOptionElement |
| HTMLParagraphElement | HTMLParamElement | HTMLPreElementElement |
| HTMLQuoteElement | HTMLScriptElement | HTMLSelectElement |
| HTMLStyleElement | HTMLTableCaptionElement | HTMLTableCellElement |
| HTMLTableColElement | HTMLTableElement | HTMLTableRowElement |
| HTMLTableSectionElement | HTMLTextAreaElement | HTMLTitleElement |
| HTMLListElement |
| HTML標籤 | DOM介面 成員 |
|---|---|
| 所有元素 | *HTMLElement id,title,lang,die,className |
| <a> | *HTMLAnchorElement accessKey,charset,coords,href,hreflang, name,rel,rev,shape,[long]tabIndex,target,type, blur(),focus() |
| <applet> | HTMLAppletElement align,alt,archive,code,codeBase, height,hspace,name,object,vspace,width |
| <area> | HTMLAreaElement accessKey,alt,coords,href, [boolean]noHref,shape,[long]tabIndex,target |
| <base> | HTMLBaseElement href,target |
| <basefont> | HTMLBaseFontElement color,face,size |
| <blockquote>,<q> | HTMLQuoteElement cite |
| <body> | *HTMLBodyElement aLink,background,bgColor,link,text,vLink |
| <br> | HTMLBRElement clear |
| <button> | HTMLButtonElement [readonly HTMLFormElement]form,accessKey,[boolean]disabled, name,[long]tabIndex,[readonly]type,value |
| <caption> | *HTMLTableCaptionElement aling |
| <col>,<colgroup> | *HTMLTableColElement align,ch,chOff,[long]tabIndex |
| <del>,<ins> | HTMLModElement cite,dateTime |
| <dir> | HTMLDirectoryElement [boolean]coompact |
| <div> | HTMLDivElement align |
| <dl> | HTMLDListElement [boolean]compact |
| <fieldset> | HTMLFieldSetElement [readonly HTMLFormElement]form |
| <font> | HTMLfontElement color,face,size |
| <form> | *HTMLformElement [readonly HTMLCollection]elements, [readonly long]length,name,acceptCharset, action,enctype,method,target, submit(),reset() |
| <frame> | HTMLFrameElement frameBorder,longDesc,marginHeight,marginWidth,name, [boolean]noResize,scrolling,src, [readonly Document]contentDocument |
| <frameset> | HTMLFramesetElement cols,rows |
| <h1>～<h6> | HTMLHeadingElement align |
| <head> | HTMLHeadElement profile |
| <hr> | HTMLHRElement align,[boolean]noShadeb,sizeb,width |
| <html> | HTMLHtmlElement version |
| <iframe> | HTMLIFrameElement align,frameBorder,height,longDesc,marginHeight, marginWidth,name,scrolling,src, width,[readonly Document]contenDocument |
| <img> | HTMLImageElement align,alt,[long]border,[long]height,[long]hspace, [boolean]isMap,longDesc,name, src,usMap,[long]vspace,[long]width |
| <input> | *HTMLInputElement defaultValue, [boolean]defaultChecked,[readonly HTMLFormElement]form, accept,accessKey,align,alt,[boolean]checked, [boolean]disabled,[long]maxLength,name, [boolean]readOnly,size,src, [long]tabIndex,type,useMap,value, blur(),focus(),select(),click() |
| <isindex> | HTMLIsIndexElement [readonly HTMLFormElement]form,prompt |
| <label> | HTMLLabelElement [readonly HTMLFormElement]form,accessKey,htmlFor |
| <legend> | HTMLLegendElement [readonly HTMLFormElement]form,accessKey,align |
| <li> | HTMLLIElement type,[long]value |
| <link> | HTMLLinkElement [boolean]disabled,charset,href,hreflang,media,rel,rev, target,type |
| <map> | HTMLEMaplement [readonly HTMLCollection of HTMLAreaElement]areas,name |
| <menu> | HTMLMenuElement [boolean]compact |
| <meta> | HTMLMetaElement content,httpEquiv,name,scheme |
| <object> | HTMLObjectElement code,archive,border,codeBase,codeType,data, [boolean]declare,height,hspace,name,standby,[long]tabIndex, type,useMap,vspace,width[readonly Document]contentDocument |
| <ol> | HTMLOListElement [boolean]compact,[long]start,type |
| <optgroup> | HTMLOptGroupElement [boolean]disabled,label |
| <option> | *HTMLOptionElement [readonly HTMLPormElement]form,[boolean]defaultSelected, [readonly]text,[readonly long]index, [boolean]disabled,label, [boolean]selected,value |
| <p> | HTMLParagraphElement align |
| <param> | HTMLParamElement name,type,value,valueType |
| <pre> | HTMLPreElement [long]width |
| <script> | HTMLScriptElement text,htmlFor,event,charset,[boolean]defer,src,type |
| <select> | *HTMLSelectElement [readonly]type,[long]selectedIndex,value, [readonly long]length,[readonly HTMLPormElement]form, [readonly HTMLCollection of HTMLOptionElement]option, [boolean]disabled,[boolean]multiple,name,[long]size, [long]tabIndex,add(), remove(),blur(),focus() |
| <style> | HTMLStyleElement [boolean]disabled,media,type |
| <table> | *HTMLTableElement [HTMLTableCaptionElemetn]caption, [HTMLTableSectionElement]tHead, [HTMLTableSectionElement]tFoot, [readonly HTMLCollection of HTMLTableRowElement]rows, [readonly HTMLCollection of HTMLTableSelectionElement] tBodies,align,bgColor,border,cellPadding,cellSpacing, frame,rules,summary,width, creatdTHead(),deleteTHead(),createTFoot(),deleteTFoot(), createCaption(),deleteCapton(),insertRow(),deleteRow() |
| <tbody>,<tfoot>,<thead> | *HTMLTableSectionElement align,ch,chOff,vAlign, [readonly HTMLCollection of HTMLTableRowElement]row,inserRow(),deleteRow() |
| <td>,<th> | *HTMLTableCellElement [readonly long]cellIndex,abbr,align,axis,bgColor,ch,chOff, [long]colSpan,headers,height,[boolean]noWrap, [long]rowSpan,scop,vAlign,width |
| <textarea> | *HTMLTextAreaElement defaultValue,[readonly HTMLFormElement]form,accessKey, [long]cols,[boolean]disabled,name,[boolean]readOnly, [long]rows,[long]tabIndex,[readonly]type,value,blur(), focus(),select() |
| <title> | HTMLTitleElement text |
| <tr> | *HTMLTableRowElement [readonly long]rowIndex,[readonly long]sectionRowIndex, [readonly HTMLCollection of HTMLTableCellElement]cell,align,bgColor,ch,chOff,vAlign,insertCell(),deleteCell() |
| <ul> | HTMLUListElement [boolean]compact,type |
1.屬性前面的中括號指出該屬性的資料型態
2.這些介面的屬性皆對應到HTML元素和其屬性,並非所有的介面成員都有述及,要暸解它們的細節應該查閱HTML參考書
3.標*號的介面是目前在此有述及的介面
3.HTMLAnchorElement介面
Node->Element->HTMLElement->HTMLAchorElement
文件中的超連結或錨點
HTMLAncorElement介面所有屬性的屬性值都是字串,
從HTMLDocument介面的links屬性和anchorsHTMLCollection屬性可以取得HTMLAnchorElement物件
(意思就是說,因為這個介面,我們可以輕易地經由一個等同於<a>的物件中指向它的<a>屬性)
例,
var url=document.link[0].href;
document.anchors['_bottom_'].focus();
| 成員 | 表示(HTML屬性) | 備註 |
|---|---|---|
| acessKey | acessKey | 快速鍵 |
| charset | charset | 目標文件的編碼 |
| coords | coords | 在<map>元素中使用 |
| href | href | 連結的URL |
| hreflang | hreflang | 連結文件採用的語言 |
| name | name | 錨點名稱 |
| rel | rel | 連結型態 |
| rev | rev | 反連結型態 |
| shape | shape | 在<map>元素中使用 |
| tabIndex | tabindex | 在定位順序中連結的位置 |
| target | target | 顯示目標文件的框架或視窗名稱 |
| type | type | 目標文件的內容型態 |
| blur() | 將鍵盤焦點從連結上移開 | |
| focus() | 在連結上定鍵盤焦點 | |
4.HTMLBodyElement介面
就是<body>
HTMLBodyElement介面所有屬性的屬性值都是字串,
DOM Level 0規範允計透過Document物件的屬性存取這些值,
但這些HTML的屬性都是屬於HTMLBodyElemet介面,而非屬於Document物件.
(但不建議使用,因為這些都是CSS的職責一部分)
例,
document.body.text="#ffffff"
document.fgColor="#000000"//舊式的DOM Level 0 API
document.body.style.color="#000000"//CSS
| 成員 | 表示(HTML屬性) | 備註 |
|---|---|---|
| link | link | 未訪問的連結顏色 |
| aLink | aLink | 滑鼠移過時的連結顏色 |
| vlink | vlink | 訪問過的連結顏色 |
| background | background | 指背景圖的URL |
| bgcolor | bgcolor | 背景色 |
| text | text | 文字的顏色(前景色) |
5.HTMLFormElement介面
文件中的<form>
Node->Element->HTMLElement->HTMLFormElement
表HTML文件中的<form>元素,其中elements屬性是一個HTMLCollection物件,它提供了存取所有表單元素的便捷方式,
用submit()和reset()可以在程式控制下送出或重設表單
(比較JS瀏覽器物件的Form物件)
| 成員 | 內容 |
|---|---|
| elements | 表單中所有元素的陣列(HTMLCollection物件),唯讀 |
| length | 表單中的表單元素個數,其值與elements.length相同,唯讀 |
| acceptCharset | HTML的acceptcharset屬性,表伺服器可以接受的字元集,字串 |
| action | HTML的action屬性,表表單處理和程式的URL,字串 |
| enctype | HTML的enctype屬性,表表單的編碼,字串 |
| method | HTML的method屬性,用於送出表單的HTTP method,字串 |
| name | HTML的name屬性,表單名稱,字串 |
| target | HTML的target屬性,顯示送出表單之結果的框架或視窗,字串 |
| reset() | 將所有表單元素重設為其預設值 |
| submit() | 送出表單 |
#reset()
將表單元素重設為預設值
reset()會將每個表單元素都重設為其預設值,呼叫此方法的結果與使用者點擊Rest按鈕一樣,只是它不會呼叫表單的onreset事件處理器.
a.用法,void reset()
#submit()
送出表單
submit()會將表單元素的值送出給表單的action屬性指定的表單處理程式,
它送出表單的方式與使用者點擊Submit按鈕送出表單的方式相同,只是它不會觸發表單的onsubmit事件處理器
a.用法,void submit()
6.HTMLInputElement介面
HTML表單中的輸入元素
HTMLInputElement介面代表一個定義HTML輸入元素的<input>元素(通常是在HTML表單中),HTMLInputElement介面可以表示各種型態的輸入元素,依其type屬性的值而定,
第二個表列出此屬性可用的值與其含義
| 成員 | 內容 |
|---|---|
| accept | HTML的accept屬性,MIME型態的列表,其間用逗號分隔,指定當此元素是FileUpload元素時,可以上載的檔案型態,字串 |
| accessKey | HTML的accessKey屬性,瀏覽覽器用於把鍵盤焦點轉移到此輸入元素的快速鍵(一定是一個字元),字串 |
| align | HTML的align屬性,此元素相對於周圍文字或元素的左,右浮點之垂直對齊方式,字串 |
| alt | HTML的alt屬性,不能顯示此輸入元素的瀏覽器採用的替代文字,當type是image時,此屬性尤其有用,字串 |
| checked | HTML的checked屬性,對於Radio和Checkbox輸入元素,此屬性指定它是否被"核取"了,設定此屬性會改變輸入元素的外觀,布林. |
| defaultChecked | 對於Radio和Checkbox輸入元素,此屬性存放的是HTML的checked屬性的初始值,就像它出現在文件原始碼中一樣,在重設表單時,此屬性將恢復到此值,改變此屬性的值也會改變checked屬性值和元素目前的核選狀態,布林 |
| defaultValue | 對於Taxt,Password和FileUpload元素,此屬性存放了元素顯示的初始值,重設表單時,元素會恢復成此值,改變此屬性的值也會改變value屬性和目前顯示的值,字串 |
| disable | HTML的disable屬性,若為true,則此輸入元素將被停用,使用者輸入不能存取它,布林 |
| form | HTML的屬性,HTMLFormElement物件,表包含此輸入元素的<form>元素,若輸入此輸入元素不在表單中,則為null,唯讀 |
| maxLength | HTML的maxLength屬性,對Text元素或Password元素,此屬性指定元素的字元寬度,long |
| name | HTML的屬性name,輸入元素的名稱,字串 |
| readOnly | HTML的readOnly屬性,若為true,而且此元素是Text元素或Password元素,則不允許使用者在此元素中輸入元素,布林 |
| size | HTML的size屬性,對Text元素或Password元素,此屬性指定元素的字元寬度,字串 |
| src | HTML的src屬性,對於型態為image的輸入元素,此屬性指定要顯示的圖象之URL,字串 |
| tabIndex | HTML的tabIndex屬性,在定位順序中,此輸入元素的位置,long |
| type | HTML的type屬性,輸入元素的型態,"說明"部分的表格中列出各種型態和它們的含義,字串 |
| useMap | 對於type為image的元素,此屬性指定提供元素之客戶端影像地圖<map>元素名稱,字串 |
| value | 在送出表單時,傳遞給伺服端script的值,對Text,Password和FileUpload元素,此屬性是輸入元素包含的文字,對於Button,Submit和Reset元素,此屬性是顯示在按鈕上的文字,基於安全防護的原因,FileUpload元素的value屬性是唯讀的,同樣,Password元素此屬性傳回的值不包含使用者實際輸入的文字 |
| blur() | 把鍵盤焦點從此元素上移開 |
| click() | 若此輸入元素是Button,Checkbox,Radio,Submit或Rest按鈕,此方法會模擬在元素上的滑鼠點擊 |
| focus() | 將鍵盤焦點轉移到此輸入元素 |
| select() | 若輸入元素是Text,Password,FileUpload元素,此方法將選擇元素顯示的文字,在許多瀏覽器中,這意味著當使用者接者輸入字元時,被選取的文字將被刪除,並由新輸入的字元代替 |
| 型態 | 輸入元素型態 |
|---|---|
| button | 按鈕 |
| checkbox | Checkbox元素 |
| file | FileUpload元素 |
| hidden | Hidden元素 |
| image | 圖形化的Submit按鈕 |
| password | 密碼的遮罩文字輸入欄位 |
| radio | 互斥的Radio鈕 |
| reset | Reset按鈕 |
| text(預設值) | 單行文字輸入欄位 |
| submit | Submit按鈕 |
#blur()
模擬滑鼠在表單元素上的點擊
blur()將摸擬滑鼠在Button,Checkbox,Radio,Reset,Submit表單元素上的點擊,它不會觸發輸入元素的onclick事件處理器
在呼叫Button元素的click()時,它可能會(也可能不會)產生按鈕點擊的視覺效果,但它没有其他的效果,因為它未觸發按鈕的onclick事件處理器.
對於Checkbox元素,此方法切換checked屬性,它可以使未被選取的Radio元素變成被選取的狀態,但會保留巳選取的元素,在呼叫Reset元素和Submit元素的click()時,此方法將使表單被重設或送出
a.用法,void click()
#focus()
給予此元素鍵盤焦點
focus()將鍵盤焦點轉移到目前元素,讓使用者可以不必點擊它,就能與它進行互動
a.用法,void focus()
#select()
選擇Text元素的內容
select()將選取Text,Password,FileUpload元素顯示的文字,在大多數瀏覽器中這意味著使用者接下來輸入的字元將替換目前的文字,而不是把文字加到其後
a.用法,void select()
7.HTMLOptionElement介面
HTML表單中的<option>元素
Node->Element->HTMLElement->HTMLOptionElement
此介面表示<select>元素中的<option>元素
| 成員 | 內容 |
|---|---|
| defaultSelected | <option>元素的selected屬性的初始值,若表單被重設,selected屬性將被重設為此屬性的值,設定此屬性還會改selected屬性的值,布林 |
| disabled | HTML的disable屬性,若為true,此選項將被停用,使用者不能選舉它,布林 |
| form | 包含此元素的<form>元素的參考指標,(HTMLFormElement),唯讀 |
| index | 此<option>元素在包含它的<select>元素中的位置,long,唯讀 |
| label | 選項顯示的文字,對應HTML屬性label,若没有設定此屬性,將採用<option>元素純文字的內容,字串 |
| selected | 此選項的目前狀態,若為true,指出此選項被選取,此屬性的初始值由HTML屬性selected設定,布林 |
| text | <option>元素包含的純文字,此文字是選項的標籤,字串,唯讀 |
| value | 在送表單時,若此選項被選取了,此屬性是要隨表單一起送出的值,對應HTML屬性value |
8.HTMLSelectElement介面
HTML表單中的<select>
Node->Element->HTMLElement->HTMLSelectElement
option屬性提供簡便的方式來存取它包含的<option>元素集合,利用add(),remove()可可很方便地修改選項集合
| 成員 | 內容 |
|---|---|
| disabled | HTML的disabled屬性,若為true,<select>元素將被停用,使用者不能與之互動,布林 |
| form | 包含此元素的<form>元素,(HTMLFormElement),唯讀 |
| length | <select>包含的<option>元素個素,與options.length相同,long,唯讀 |
| multiple | HTML的multiple屬性,若為true,則<select>元素允許選取多個選項,石則,所有選項是互斥的,一次只能選取一個選項,布林 |
| name | HTML的name屬性,此表單元素的名稱,字串 |
| options | <select>元素中包含的<option>元素之HTMLOptionElement物件陣列(HTMLCollection物件),<option>元素順序就是它們在<select>中出現的順序,唯讀 |
| selectedIndex | 被選取的選項在options陣列中的位置,若没有選取選項,此屬性的值為-1,若多個選項被選取,此屬性將傳回第一個被選取的選項索引,long |
| size | HTML的size屬性同時顯示的選項個數,若此屬性值為1,<select>元素通常用下拉式 力能表或列表顯示選項,若其值大於1,<select>通常用大小固定的列表控制項顯示選項,若必要,此控制項還可以具有捲動軸,long |
| tabIndex | HTML的tabindex屬性,此元素在定位順序中的位置,long |
| type | 若nultiple屬性為true,此屬性就是"select-multiple"(多選),否則它為"select-one"(單選),唯讀,字串 |
| add() | 在options陣列中插入新的HTMLOptionElement物件,既可以加在此陣列的結尾,也可以插入到指定的選項之前 |
| blur() | 移開鍵盤焦 |
| focus() | 將鍵盤焦點轉移到此元素 |
| remove() | 刪除指定位置的<option>元素 |
#add()
插入<option>元素
a.用法,void add(HTMLElement element,
HTMLElement before)
throws DOMException;
b.參數,
element,指要加入的HTMLOptionElement物件
before,option陣列中的元素,新的element要插入到此元素之前,若此參數為null,element將加到options陣列的結尾.
c.丟出,若參數before指定的物件不是options陣列的成員,此方法將丟出code為NOT_FOUND_ERR的DOMException例外.
#blur()
將鍵盤焦點從此元素移走
a.用法,void blur()
#remove()
刪除一個<option>元素
remove()將刪除option陣列中指定位罝的<option>元素,若指定的index小於0或大於等於選項個數,remove()將忽略他,什麼都不做
a.用法,void remove(long index)
b.參數,index,要刪除的<option>元素在options陣列中的位置
9.HTMLTableCaptionElement介面
HTML表格中的<caption>元素
Node->Element->HTMLElement->HTMLTableCaptionElement
| 成員 | 內容 |
|---|---|
| align | 標題相對於表格的水平對齊方式,align屬性之值,此屬性巳不建議仗用,推薦使用CSS樣式,字串 |
10.HTMLTableCellElement介面
HTML表格中的<td>或<th>
Node->Element->HTMLElement->HTMLTableCellElement
| 成員 | HTML屬性 | 備註 |
|---|---|---|
| cellIndex | 儲存格在其中的位置,long,唯讀 | |
| abbr | abbr | 字串 |
| align | align | 儲存格的水平對齊方式,字串 |
| axis | axis | 字串 |
| bgColor | bgcolor | 儲存格的背景色,字串 |
| ch | char | 對齊字元,字串 |
| chOff | choff | 對齊字元的偏移量,字串 |
| colSpan | colspan | 儲存跨越的欄數,long |
| headers | headers | 儲存格標頭的id值,字串 |
| height | height | 儲存格的高度,字串 |
| noWrap | nowrap | 儲存格不自動換行,布林 |
| rowSpan | rowspan | 儲存格跨越的列數,long |
| scope | scope | 標頭儲存格的範圍,字串 |
| vAlign | valign | 儲存格的垂直對齊方式,字串 |
| width | width | 儲存格的寬度,字串 |
11.HTMLTableColElement介面
HTML表格中的<col>或<colgroup>元素
Node->Element->HTMLElement->HTMLTableColElement
| 成員 | HTML屬性 | 內容 |
|---|---|---|
| align | align | 預設的水平對齊方式,字串 |
| ch | char | 預設的對齊字元,字串 |
| chOff | choff | 預設的對齊字元偏移量,字串 |
| span | span | 此元素表示的欄數,long |
| vAlign | valign | 預設的垂直對齊方式,字串 |
| width | width | 欄的寬度,字串 |
12.HTMLTableElement介面
HTML文件中的<table>
Node->Element->HTMLElement->HTMLTableElement
| 成員 | 內容 | 備註 |
|---|---|---|
| caption | <caption>的參考指標(HTMLTableCaption),若不存在,則為null | |
| rows | HTMLTableElement物件的陣列(HTMLCollection),表示表格中所有的列,包括<htead>,<tfoot>,<tbody>中定義的列,唯讀 | |
| tBodies | HTMLTableSectionElement物件的陣列(HTMLCollection),表示表格中所有的<tbody>,唯讀 | |
| rFoot | 表格的<tfoot>元素,若不存在此元素,則為null | |
| tHead | 表格的<thead>元素,若不存在此元素,則為null | |
| align | 表格元素的align屬性 | 表格在文件中的水平對齊方式 |
| bgcolor | 表格元素的bgcolor屬性 | 表格的背景顏色 |
| border | 表格元素的border屬性 | 表格的邊線寬度 |
| cellpadding | 表格元素的cellpadding屬性 | 儲存格內容和邊線間的距離 |
| cellspacing | 表格元素的cellspacing屬性 | 儲存格邊線之間的距離 |
| frame | 表格元素的frame屬性 | 繪製哪種表格邊線 |
| rules | 表格元素的rules屬性 | 在表格中何處給製線條 |
| summary | 表格元素的summary屬性 | 表格摘要 |
| width | 表格元素的width屬性 | 表格的寬度 |
| createCaption() | 傳回表格現有的<caption>元素,若不存在這樣的元素,則建立(並插入)新的<caption> | |
| createTFoot() | 傳回表格現有的<tfoot>元素,若不存在這樣的元素,則建立(並插入)新的<tfoot> | |
| creatTHead() | 傳回表格現有的<thead>元素,若不存在這樣的元素,則建立(並插入)新的<thead> | |
| deleteCaption() | 刪除表格的<caption>元素(若表格具有此元素) | |
| deleteRow() | 刪除表格中指定位置上的列 | |
| deleteTFoot | 刪除表格<tfoot>元素(若表格具有此元素) | |
| deleteTHead() | 刪除表格<thead>元素(若表格具有此元素) | |
| insertRow() | 在表格的指定位置插入新的空<tr>元素 | |
#createCaption()
取得或建立<caption>元素
a.用法,HTMLElement createCaption()
b.回傳值,HTMLTableCaptionElement物件,表示此表格的<caption>元素,若此表格巳經有了標題題,此方法只傳回它,若此表格還没有<caption>元素,此方法將建立新的空<caption>元素,將它插入表格中,並傳回它.
#createTFoot()
取得或建立<tfoot>元素
a.用法,HTMLElement createTFoot()
b.回傳值,HTMLTableSlementElement物件,表示此表格的<tfoot>元素,若此表格巳經有了註腳,此方法只能傳回它,若此表格還沒有註腳,此方法將建立新的空<tfoot>元素,將它插入表格中,並傳回它.
#createTHead()
取得或建立<thead>
a.用法,HTMLElement createTHead()
b.回傳值,HTMLTableSectionElement物件,表示此表格的<thead>元素,若此表格巳經有了表頭,此方法只傳回它,若此表格還没有表頭,此方法將建立新的空<thead>元素,將它插入表格中,並傳回它
#deleteCaption()
刪除表格的<caption>元素
若此表格有<caption>元素,此方法將從文件樹中刪除它,否則,它什麼也不做
a.用法,void deleteCaption()
#deleteRow()
刪除表格的列
此方法將刪除表中指定位置的列,列中的編碼順序就是它們在文件原始碼中出現的順序
<thead>和<tfoot>中的列會與表格中其他列一起編碼
a.用法,void deleteRow(long index)
throws DOMException;
b.參數,index,指定要刪除的列在表格中的位置
c.丟出,若index小於0或大於等於表格的列數,此方法將丟山code為INDEX_SIZE_ERR的DOMExcption例外
#deleteTFoot()
刪除表格中的<tfoot>
若此表格有<tfoot>元素,這個方法將從文件樹中刪除它,否則它什麼也不做
a.用法,viod deleteTFoot()
#deleteTHead()
刪除表格的<thead>元素
若此表格有<thead>元素,這個方法將從文件樹中刪除它,否則它什麼也不做
a.用法,void deleteTHead()
#insertRow()
新增空的列到表格中
此方法將建立新的HTMLTableRowElement物件,表示一個<tr>標籤,並將它插入表格的指定位置
新的列將被插入index指定的列之前的位置,若index等於表格中的列數,新列將被附加到表格的未毛,若表格開始時是空的,新列將被插入到新的<tbody>部分,此區段本身會被插入表格中
則可以用HTMLTableRowElement.insertCell()加入內容到新建立的列
a.用法,HTMLElement insertRow(long index)
throws DOMException
b.參數,index,要插入新列的位置
c.回傳值,HTMLTableRowElement物件,表示新插入的列
d.丟出,若index小於0或者大於等於表格的列數,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外
13.HTMLTableRowElement介面
HTML表格中的<tr>元素
代表HTML表格中的一列
Node->Element->HTMLElement->HTMLTableRowElement
| 成員 | 內容 | 註解 |
|---|---|---|
| cells | HTMLTableCellElement物件的陣列(HTMLCollection物件),表示此列中的所有儲存格,唯讀 | |
| rowIndex | 此列在表格中的位置,long,唯讀 | |
| sectionRowIndex | 此列在其區段(即<thead>,<tbody>,<tfoot>)中的位置,long,唯讀 | |
| align | HTML的align屬性,儲存格在列中的預設水平對齊方式,字串 | |
| bgColor | HTML的bgColor屬性,列的背景色,字串 | |
| ch | HTML的char屬性,儲存格在列中的對齊字元,字串 | |
| chOff | HTML的choff屬性,儲存格在列中的對齊字元偏移量,字串 | |
| vAlign | HTML的valign屬性,儲存格在列的預設垂直對齊方式,字串 | |
| deleteCell() | 刪除列中指定的儲存格 | |
| insertCell() | 於此列的位置插入一個空的<tr>元素 | |
#deleCell()
刪除表格中的一個儲存格
此方法將刪除表格中列中指定位置的儲存格
a.用法,void deleteCell(long index)
throws DOMException;
b.參數,index,欲刪除的儲存格在列中的位置
c.丟出,若index小於0或者大於等於列的儲存格數目,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外
#insertCell()
在表格中新插入空的<td>元素
此方法將建立新的<tr>元素,並將它插入列中指定的位置,新的儲存格將被插入目前於index指定位置的儲存格之前,若index等於列中的儲存格數目,新儲存格將附加在列的未尾
a.用法,HTMLElement insertCell(long index)
throws DOMException;
b.參數,index,插入新儲存格的位置
c.回傳值,HTMLTableCellElement物件,表示新建立並被插入的<td>元素
d.丟出,若index小於0或者大於等於表格列中的儲存格數目,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外
14.HTMLTableSectionElement介面
表格的標頭,註腳和主體區段
此介面表示HTML表格中的<tbody>,<thead>或<tfoot>區段
Node->Element->HTMLElement->HTMLTableSectionElement
| 成員 | 內容 | 註解 |
|---|---|---|
| rows | 代表表格此區段中所有列的HTMLTRowElement物件陣列(HTMLCollection物件),唯讀 | |
| align | HTML的align屬性,儲存格在此區段中的預設對齊方式,字串 | |
| ch | HTML的char屬性,儲存格在此區段中的對齊字元,字串 | |
| chOff | HTML的choff屬性,儲存格在此區段中的預設字元偏移量,字串 | |
| vAlign | HTML的valign屬性,儲存格在此區段中的預設重直對齊方式,字串 | |
| deleteRow() | 刪除此區段中指定位置的列,字串 | |
| insertRow() | 在此區段指定位置插入空的列,字串 | |
#deleteRow()
刪除表格區段的一列
此方法將刪除區段中指定位置的列,請注意,index指定的是列在區段中皂位置,不是列在整個表格中的位置
a.用法,void deleteRow(long index)
throws DOMException;
b.參數,index,指定的列在此區段中的位置
c.丟出,若index小於0或者大於等於區段的列數,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外.
#insertRow()
新增空的列到此表格區段
此方法將建立新的<tr>元素,並將它插入區段中的指定位置,若index等區段中的列數,新列將加到區段的未尾,否則新列將插入目前位於index指定位置的列之前,
(在此方法中,index指定的是列在區段中的位置,不是它在整個表格中的位置)
a.HTMLElement insertRow(long index)
throws DOMException
b.參數,index,要插入的新列在區段中的位置
c.回傳值,代表新建立並插入的<tr>元素的HTMLTableRowElement物件
d.丟出,若果index小於0或者大於等於區段中的列數,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外
15.HTMLTextAreaElement介面
表單中的<textarea>元素
Node->Element->HTMLElement->HTMLTextAreaElement
| 成員 | 內容 | 註解 |
|---|---|---|
| accessKey | HTML的accessKey屬性,瀏覽器用來將鍵盤焦點轉移到此元素的快速鍵,字串 | |
| cols | HTML的cols屬性,此元素的寬度,以字元數計,long | |
| defaultValue | 文字區塊的初始值內容,在表單被重設時,文字區塊將被恢復成此屬性的值,改變此屬性的值會改變文字區塊目前顯示的文字,字串 | |
| disable | HTML的disable屬性,若為true,則此輸入元素將被停用,使用者輸不能與它互動,布林 | |
| form | HTMLFormElement物件,表示包含此文子區塊的<form>若此輸入元素不在表單中,則為null,唯讀 | |
| name | 由HTML的name屬性設定,<textarea>元素名稱,字串 | |
| readOnly | HTML的readonly屬性,若為true,此元素是唯讀的,使用者不能編輯其中顯示的文字,布林 | |
| rows | HTML的rows屬性,文字區塊的高度,以文字列數計算,long | |
| tabIndex | HTML的tabindex屬性,在定位順序中此元素的位置,long | |
| type | 元素型態,以便和HTMLInputElement物件相容,此屬性的值總是"textarea",唯讀,字串 | |
| value | 文字區塊目前顯示的文字,字串 | |
| blur() | 將鍵盤焦點從此元素上移開 | void blur() |
| focus() | 將鍵盤焦點轉移到此元素 | void focus() |
| select() | 選取文字區段的元素整內容 | void select() |
16.HTMLCollection介面
HTMLCollection物件是具有方法的HTML元素集合,用它可以透過元素在文件中的位置或他們的id,name等屬性取得元素.
HTMLDocument介面的許多屬性(DOM Level 0的Document物件標準化的)都是HTMLCollection物件
HTMLCollection物件是唯讀的,我們無法增加新的元素.
例,
var c =document.forms;//這是表單元素的HTMLCollection
var firstform=c[0];//可以像數字陣列一樣存取
var lastform=c[c.length-1];//長度屬性指出了元素個數
var address=c["address"];//可以像關聯式陣列一樣存取
var address=c.address;//也可以直接存取
| 成員 | 表示 | 備註 |
|---|---|---|
| item() | 傳回集合中指定位置的元素 | 可以在陣方括號中指定位置,而不是明確地呼叫此方法 |
| nameItem() | 傳回集合中name屬性id屬性具有指定值的元素,若没有這樣的元素則傳回null | ,可以在陣方括號中指定位置,而不是明確地呼叫此方法 |
在JS中HTMLCollection物件的行為和陣列一樣,可以使用中括號,透過編號或名稱檢索HTMLCollection物件,而不必呼叫它的方法
#item(n)
根據位置取得元素,
item()會傳回HTMLColection中的編碼元素
a.用法,節點.item(n)
b.參數,要傳回元素的位置,元素在HTMLCollection物件中出現的順序與它們在文件原始的順序一樣.
c.回傳值,傳回參數n指定的元素
d.例,
var c=document.images;//這就是一個HTMLCollection
var img0=c.item(0);//可以用item()調動
var img1=c[1] //上述和這行是等同的
#nameItem("字串")
根據名稱獲取元素,
nameItem()會尋找並傳回HTMLCollection中具有指定名稱的元素,
若某個元素的id屬性值是指定的名稱,則傳回該元素,若没有找到這樣的元素就傳回其naem屬性為指定值的元素,如果都没有就傳回null.
a.用法,節點.nameItem("字串");
b.參數,表要傳回的元素名稱
c.回傳值,傳回參數指定的元素,若HTMLCollection中没有這樣的元素,則傳回null.
d.例
var forms=document.forms;//表單的HTMLCollection
var address=forms.namedItem("address");//找<form name="address">
var payment=forms["pament"]//用中括號存取,找<form name="payment">
var login=form.login;//直接存取,找<form name="login">
17.HTMLDocument介面
Node->document->HTMLDocument
HTML文件樹的根
HTMLDocument介面擴充了Document介面,並定義HTML專用的屬性和方法,這些屬性和方法提供了與DOM Level 0 Document物件的相容性,(參閱JS瀏覽器物件之Document物件)
但HTMLDocument介面不具備Level 0 Document物件的所有屬性.
指定文件顏色和背景圖象的屬性巳被改名,並移到HTMLBobyElement介面中了.
在DOM Level 1中,HTMLDocument介面定義了getElementById()但在DOM Level 2中getElementById()是由Document介面定義而由HTMLDocument介面繼承,
HTMLDocument只是繼承了getElementById()不是由它定義getElementById().
| 成員 | 內容 | 備註 |
|---|---|---|
| anchors | 文件中所有錨點元素的陣列(HTMLCollection物件),唯讀 | 錨點 為了與DOM Level 0相容,此陣列只包含設定了name屬性的<a>元素,不包括以id屬性建立的錨點元素 |
| applets | 文件中所有applet的陣列(HTMLCollect物件),唯讀 | 包含<object>標記和所有<applet>標籤定的applet |
| body | 指向HTMLBodyElement物件的快捷屬性 | ,該物件表示目前文件的<body>標籤 |
| cookie | 允許設定或查詢目前文件的cookie,字串 | 參閱Document.cookie |
| domain | 提供載入文件的伺服器之網域名稱,嗸不存在這樣的網域名稱,則為null,唯讀,字串 | 比較Document.domain(可讀寫) |
| forms | 文件中所有HTMLFormElement物件的陣列(HTMLCollection物件),唯讀 | |
| images | 文件中所有<img>標籤的陣列(HTMLCollection物件),唯讀 | 不包含由<object>標籤定義的圖象(為與DOM Level 0相容) |
| links | 文件中所有超連結的陣列(HTMLCollection物件),唯讀 | 包括所有具有href屬性的<a>和所有<area>標籤 |
| referrer | 指連結到目前文件的URL,若目前文件不是透過超連結存取的,則為null,唯讀,字串 | |
| title | 文件的<title> | |
| URL | 文件的URL | |
| open() | 開新文件(開啟串流,以便寫入新文件的內容) | 此方法將清除目前文件的所有內容 |
| close() | 關閉文件(關閉由open()打開的文件串流,強制顯示所有緩衝儲存的輸出內容) | |
| getElementById() | 傳回具指定id的元素 | 在DOM Level 2中,此方法從Document介面繼承 |
| getElementsByName() | 傳回文件中name屬性具有指定值的所有元素節點之陣列(NodeList物件) | |
| write() | 輸出,將HTML文字字串加到開啟的文件 | |
| writeln() | 將HTML文字字串加到開啟的文件,後面跟著一個段行符號 | |
(1)getElementById()
(參閱,Document.getElementById)())
(2)getElementsByName()
getElements By Name喔,是by"name",不是by"Tagname",搜尋的標準是標籤的name屬性的值.
找到的話就傳回包含所有相符兀素的NodeList物件(一個陣列),若没找到則傳回的NodeList物件的length屬性為0.
a.用法,
節點[] getElementsByName("字串")
b.參數,字串參數指HTML中的name屬性值
c.回傳值,傳回指定的name屬性值的元素陣列(NodeList物件)若没有找到相符的元素,則傳回空的NodeList物件,其length為0
(3)open()
open()會清除目前HTML文件的容,開始一個新的文件,新文件用write()或writeln()輸出,
一般是呼叫open()開一個新文件,再用write()輸出內容,再呼叫close()關閉文件,強制內容顯示出來.
屬於被覆寫的文件部分的script或事件處理器不能呼叫open(),因為script或事件處理器本身也會被覆寫.
參閱,Document.open(),
注意到,這個方法被標準化的版本只能用於建立新皂HTML文件,不接受Level 0版本中的非必要參數mimetype
a.用法,
void open()void指空,就是直接調動就行了
b.例,
var w=window.open("");//開一個新視窗
var d =w.document;//取得其HTMLDocument物件
d.open();//打開文件
d.write("<h1>Hello world</h1>");//向文件輸出HTML
d.close();//結束文件並顯示
(4)write()
此方法將指定的html文字加到文件中,此文件必須是由open()開啟,且還没有被用close()關閉的
參考JS的瀏覽器物件中的Document.write(),
注意,Level 0的標準化版本只接受一個字串參數,不接任意多個參數
a.用法,
void write("字串")
b.參數,字串參數中文字就是要加到html中的文字
十之三 XML相關介面
1.ProcessingInstruction介面(Node->ProcessingInstruction)
XML文件中的處理指令,
這個不常用的介面表示XML文件中的一個處理指令(或PI),使用HTML文件的程式設計者不會遇到ProcessingInstruction節點
(1)ProcessingInstruction介面常見的節點
| 成員 | 內容 | 備註 |
|---|---|---|
| data | 處理指令的內容一即從目標後的第一個非空格字元到結束字元(但不包括)?>之間的字元 | |
| target | 處理指令的目標,它是<?後面的第一個識別字,指定處理指令的"處理器" | |
2.Notation介面(Node->Notation)
XML DTD中的注釋,
這個不常用的介面代表XML文件型態定義(DTD)中的註釋宣告.在XML中註釋用於指定未解析的實體的格式或正式宣告處理指令的目標.
註釋的名稱由繼承的屬性的屬性nodeName指定,因為註釋出現在DTD中,而不是出現在文件本身,所以Notation節點不屬性於文件樹,其parentNode屬性必為null,DocumentType介面的notations屬性可根據註釋名稱找出Notation物件.
(1)Notation介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| publicId | 註釋的公開識別字,若沒有指定,則為null | 唯讀,字串 |
| systemId | 註釋的系統識別字,若沒有指定,則為null | 唯讀,字串 |
3.CDATASection介面(Node->CharaterData->Text->CDATASection)
XML文件中的CDATA區段,
這個常用到的介面表示XML文件中的CDATA區段,使用HTML文件的程式設計員絕不會遇到到這種型態的節點,不需要使用該介面.
CDATASection是Text介面的子介面,沒有定義任何自己的屬性和方法,透過從Node介面繼承nodeValue屬性,或透過從CharacterData介面繼承data屬性,可以存取CSATA區段的文字內容,雖然通常可以把CDATASection節點當作Text節點處理,但要注意,Node.normalize()不合併相鄰的CDATA區段.
、、、、、、、、、、、、、、、、、、、
十一 事件相關介面
1.Event介面
所有事件介面都是Event介面的子介面
這個Event介面代表在文件的某些節點上發生的事件,並包括此事件的細節,Event的各種子介面定義了額外的屬性,提供與特殊事件型態有關的資訊.許多事件型態都使用Event的傳用子介面描述發生的事件,除了HTMLEvents模組定義的事件型態(如:abort,blur...等)外,其餘事件型態都使用Event的專用子介面描述發生的事件,
以下常數都是eventPhase屬性的合法值
| 常數 | 階段 | 備註 |
|---|---|---|
| CAPTURING_PHASE | 1 | |
| AT_TARGET | 2 | |
| BUBBLING_PHASE | 3 | |
| 屬性 | 內容 | 備註 |
| type | 發生的事件型態的名稱 | 和設定事件處理器時,所用的字串值是一樣的,如:click,mouseovre |
| target | 事件發生的所在節點 | |
| currenTarget | 事件正在處理時的所在節點(事件處理器正在執行的節點) | 若事件處理時是在捕捉階段和泡泡階段這個屬性的值和屬性target的值就不會一樣 注意,所有節點都實作了EvenTarget介面,currentTarget屬性可以指向任何節點,而不限於Element節點 |
| eventPhase | 指目前事件傳播階段位於哪一階段 | 其值是以下三個常數之一, Event.CAPTURING_PHASE Event.AT_TARGET Event.BUBBLING_PHASE |
| timeStamp | 指事件何時發的Date物件 | |
| bubbles | 指此事件是否往上層回傳的布林值 | 若事件是可浮升的型態,則為true,否則為false (只有stopPropagation()才能停止浮升) |
| canelable | 指事件是否有預設行為的布林值 | 若用preventDefault()可以取消與事件關聯的預設動作,則為true,否則為false. |
| 方法 | 表示 | 備註 |
|---|---|---|
| initEvent() | 初始化新建立的Event物物屬性 | |
| preventDefault() | 使瀏覽器不執行與事件關聯的預設動作(若存在的話) | 若事件型態不是可取消的,此方法毫無作用 |
| stopPropagation() | 制止事件在傳播過程的捕捉,目標處理,或浮升階段的進一步傳播 | 呼叫此方法後,該節點上處理此事件的處理程式將被呼叫,事件不再被分派到其他節點 |
#.initEvent()
初始化新Event物件的屬性
initEvent()將初始化Document.createEvent()建立的合成Event物件的type,bubbles和cancelable屬性,
只有在新建的Event物件被EventTarget,dispatchEvent()分派之前才能呼叫Event.initEvent().
a,用法,
initEvent("字串","布林","布林")
b,參數,
第一個字串參數是指事件的型態,
它可以是預先定義的事件型態,如load或submit,
也可以是我們自己選擇的自定型態,但是應保留"DOM"開頭的名稱.
#.preventDefault()
取消事件的預設動作
a,用法,
preventDefault()
preventDefault()會通知瀏覽覽器瀏覽器不要執行與事件關聯的預設動作(若存在這樣的動作)
如,type屬性是"submit",在事件傳播的任意階段被呼叫的弗件處理器,透迥呼叫initEvent()可以阻此送出表單.
但,若cancelable屬性是false,就是没有預設動作,或者不能阻此預設動,無論哪種情況呼叫此initEvent()都不會產生任何作用.
#.stopPropagation()
停止分派事件
stopPropagation()可停止事件的傳播,阻此它被分派到其他的Document節點,在事件傳播的任何階段都可以呼叫stopPropagation().
注意,雖然stopPropagation()無法阻此同個Document節點上的其也事件處理器被呼叫,但它可以阻此把事件分派到其他節點
a,用法,
stopPropagation()
2.UIEvent介面(Event->UIEvent)
使用者介面的細節
UIEvetn介面是Event介面的子介面,並定義傳遞給DOMFocusIn,DOMFocusOut和DOMActivate型態之事件的Event物件型態,在Web瀏覽器中,不常使用這些事件型態,關於UIEvent介面要記任的要點是:它是MouseEvent介面的父介面.
UIEvent繼承了Event的屬性和方法,且定義了以下屬性
| 屬性 | 內容 | 備註 |
|---|---|---|
| view | 事件發生時所在的Windows物件(產生事件的視窗),唯讀,(AbstractView) | DOM稱為"view" |
| detail | 提供事件相關資訊的數字,唯讀,long 對於click,mousedown,mouseup事件來說(參閱Mousedown),此欄位是點擊的次數:1表單擊,2表示雙擊,水表點擊三次,依此列推,對於DOMActivate事件,此欄立為1表示一般敨動,2表"hyperactivation",若雙擊或Shift-Enter鍵的組合 | |
| initUIEvent() | 初始化新建立的UIEvent物件的屬性,包括由Event介面繼承的屬性 | |
#initUIEvent()
初始化UIEvent物件的屬性
此方法將初始化UIEvent物件的view和detail屬性,以及從Event介面繼承的type,bubbles,cancelable屬性,只有新建立的UIEvent物件,且在它被傳到EventTarget.diapatchEvent()之前,才能呼叫此方法.
a.用法,void initUIEvent(String typeArg,
boolean canBubbleArg,
boolean cancelableArg,
AbstractView viewArg,
long detailArg)
b.參數,
typeArg:事件型態
canBubbleArg:事件是否可以浮升
viewArg:發生事件的視窗
detailArg:事件的detail屬性
(a)detail
對click,mousedown,mouseup,事件而言,這個欄位就是點擊次數,1是點一下,2是點兩下,3是點三下,
每點一下都會產生一個事件,但若連續點擊夠密集的話,detail值會反映出來,
detail屬性值為2的滑鼠事件,會優先於detail屬性為1的滑鼠事件.
對DOMActivate事件而言,1就是正常點擊,2是連續點擊
3.MouseEvent介面(Event->UIEvent->MouseEvent)
MouseEvent繼承了Event和UIEvent的屬性和方法,且定義了以下屬性
| 屬性 | 內容 | 備註 |
|---|---|---|
| button | 指在mousedown,mouseup,click事件期間,哪個滑鼠按鍵改變了狀態,唯讀,short 只有當改變滑鼠鍵的狀態時,此屬性才會被定義,如在mouseover事件中,它不能用於回報滑鼠鍵是否被按住 | 0:指滑鼠左鍵 1:指滑鼠中鍵 2:指滑鼠右鍵 |
| altkey、ctrlkey、metakey、shiftkey | 這四個布林值指出,當滑鼠事件發生時Alt,Ctrl,Meta,或Shift鍵是否按住,唯讀,布林 | 和button不同的是,這些按鍵對所有的事件都有效 |
| clientX、clientY | 指出滑鼠游標相對於瀏覽器視窗的X和Y座標 (没有把文件捲動算在內,若事件發生在視窗的最頂端,clientY就是0,無論文件是否巳經捲到下方),唯讀,long | 但DOM Level 2並没有提供一種標準方法,可使視窗座標換算成文件座標. 對Netscpae6而言,可以加上window.pageXOffset和window.pageYOffset. 對IE而言,可以加上document.body.scrollLeft,和document.body.scrollTop. |
| screenX、screenY | 指滑鼠游標相對於螢幕左上角的X,Y座標,唯讀,long | |
| relatedTarget | 指一個和事件發生所在節點相關的節點,唯讀,(EventTarget) | 指向一個和事件發生所在節點相關的節點. 對mouseover事件而言,這個節點就是當滑鼠移到標的節點前,離關的那個節點. 對mouseout事件而言,就是離開標的節點前,滑鼠所在的節點. 其他的型態滑鼠事件並未定義relatedTarget屬性 |
#initMouseEvent()
初始化MouseEvent物件的的各種屬性,只有Document.createEvent()建立的MouseEvent物件可以呼叫此方法,而且必須將MouseEvent物件傳遞給EventTarget.dispatchEvent()之前呼叫
a.用法,
void initMouseEvent(String typeArg,
boolean canBubbleArg,
boolean cancelableArg,
Abstractview viewArg,
long detailArg,
long screenXArg,
long screenYArg,
long clientXArg,
long clientYArg,
boolean ctrlkeyArg,
boolean altKeyArg,
boolean shiftKeyArg,
boolean metaKeyArg,
unsigned short buttonArg,
EventTarget relatedTargetArg,)
b.參數,此方法的許多參數用於設定MouseEvent物件屬性的初始值,其中包括從Event和UIEvent介面繼承屬性,
4.MutationEvent(Event->MutationEvent)
文件變動的細節,
MutationEvent是Event的子介面,用來提供MutationEvent模組定義的事件型態細節.
(不過聽說,這些事件型態在DHTML程式設計中並不常用)
此介面定義傳遞給以下事件型態的Event物件之型態,
(用Event,preventDefault()不能取消這些事件的預設動作)
| 物件 | 內容 | 備註 |
|---|---|---|
| DOMAttrModified | 當對文件元素的屬性進行添加,刪除或修改操作時,產生此件,事件的目標是包含該特性的元素,從此處開始浮升 | |
| DOMCharacterDataModified | 當Text,Comment,CDATASetion或ProcessingInstruction節點的字元資料改變時,產生此物件,事件的目標修改的節點,事件從此處始浮升 | |
| DOMNodeInserted | 當某個節點加入為另一個節點的子點時,產生此物件,事件的目標是被插入的節點,事件從此處開始沿著文件樹向上浮升,relatedNode屬性指定被插入的節點的新父節點,被插入的節點的子節點不會產生這種型態的事件 | |
| DOMNodeInsertedIntoDocument | 在節點插入文件樹後產生的物件,直接插入文件樹和由於祖先節點被插入文件樹而間接插入文件樹的節點都會產生此物件,事件的目標點是被插入的節點,因為subtree中的每個節點都有可能引發這種型態的事件,所它們不會浮升 | |
| DOMNodeRemoved | 從一個節點的父節點中刪除該節點之前產生的物件,事件的目標點是被刪除的節點,事件從此處開始沿著文件樹向上浮升,trlatedNode屬性儲存被刪除的節點的父節點 | |
| DOMNodeRemovedFromDocument | 從文件樹中刪除一個節點之前產生的物件,直接被刪的節點和由於祖先節點被刪除而間接刪除節點都會產生此事件,事件的冊標是要刪除的事件,這種型態的事件不會浮升 | |
| DOMSMubtreeModfied | 當呼叫一個DOM方法觸發多個變更事件時產生的摘要型事件,事件的目標節點是文件中發生變動所有內嵌最深的祖先節點,它從該節點開始沿著文件樹向上浮升,若我們對修改的細節不感興趣,只想知道文件的哪個部分被改了,可以為這種這種型態的事件設定傾聽器 | |
| 成員 | 內容 | 備註 |
|---|---|---|
| MODIFICATION=1 | 被修改的Attr節點,unsigned short | 常數 |
| ADDITION=2 | 被加入的Attr節點,unsigned,short | 常數 |
| REMOVAL=3 | 被刪除的Attr節點,unsigned,short | 常數 |
| attrChange | 對於DOMAttrModified事件,特性是如何改的,"常數"部分定義了它可以用的三個值,唯讀,unsigned | |
| attrName | 對於DOMAttrModified事件來說,表示改變的HTML屬性名稱,唯讀,字串 | |
| newValus | 對DOMAttrModified事件,表示Attr節點的新值,對於DOMCaraerDataModified事件來說,是Text,comment,CDATASection或ProcessingInstruction節點的新值,唯讀,字串 | |
| prevValus | 對於DOMAttrModified事件,是Attr節點之前的伹,對DOMCharacterDataModified事件,是Text,Comment,CDATASection或ProcessingInstruction節點之前的值,唯讀,字串 | |
| relatedNode | 對於DOMAttrModified事件,是相關的Attr節點,對於DOMNodeInserted和DOMNodeRemove事件,是被入或刪除的節點之父節點,唯讀,節點 | |
| initMutationEvent() | 初始化新建立的MutationEvent物件屬性 | |
#initMutationEvent()
初始化新MutationEvent物件的屬性
此方法將初始化新建立的MutationEvent物件的各個性,只有用Document.creatEvent()建立的MutationEvent物件可以呼叫此方法,而且必須在MouseEvent物件傳遞給EventTarget.dispatchEvent()之前呼叫
a.用法,void initMutationEvent(String typeArg,
boolean canBubbleArg,
boolean cancelableArg,
Node relatedNodeArg,
String prevValueArg,
String newValueArg,
String attrNameArg,
unsigned short attrChangeArg)
b.參數,此方法的許多數用於設定MutationEvent物件的屬性的初始值,其中包括從Event介面繼承的屬性,因為每個參數的名稱清楚地說明它們要設定的屬性只有用Document.creatEvent()建立的MutationEvent物件可以呼叫此方法,而且必須在MouseEvent物件傳遞給EventTarget.dispatchEvent()之呼叫
5.EventException事件例外物件
通知事件特定的例外或錯誤,
EventException物件由某些與事件相關的方法丟出,通知發生某型態的問題.
(在DOM Level 2中只有EventTarget.dispatchEvent()會丟出這種型態的例外)
| 常數 | 表示 | 備註 |
|---|---|---|
| UNSPECIFIED_EVENT_TYPE_ERR | 此常數是EventException物件的code屬性的合法值 |
UNSPECIFIED_EVENT_TYPE_ERR這個常數是EventException的靜態屬性,不是個別例外物件的屬性.
unsigned short UNSPECIFIED_EVENT_TYPE_ERR=0
Event物件的type屬性没有被初始化
| 屬性 | 表示 | 備註 |
|---|---|---|
| code | 表錯誤碼,提供引發例外的原因細節 | 在DOM Level 2中,這個欄位只有一種值,即UNSPECIFIED_EVENT_TYPE_ERR |
6.EventListener事件處理器物件(傾聽器)
| 方法 | 表示 | 備註 |
|---|---|---|
| handleEvent() |
Java中不允許將函數作為參數傳遞給其他函數,可以透過定義實作此介面的類,且包含handleEvvent()的實作,來定義傾聽器.
常事件發生時系統將呼叫handleEvent()傳遞給它一個描述此事件的Event物件.
在Java中事件傾聽器是一個物件,此物件定義了handleEvent()方法,這個方法只有一個參數即Event物件.
但在JS中,以Event物件為參數的函數和没有參數的函數都可以作為事件傾聽器.
例,
//此函數是用於submit事件的事件傾聽器
function submitHandler(e){
//呼叫在別處定義的表單確認函數
if(!validate(e))
e.preventDefault();
}
//用以下方法註冊事件傾聽器
document.forms[0].addEventListener("submit",submitHandler,false);
7.EventTarget事件標的物件
在支援事件(具Events特徵)的DOM實作中,DOM結樹中的所有節點都會實作此介面
並維護每個節點的事件傾聽器集合或列表
| 方法 | 表示 | 備註 |
|---|---|---|
| addEventListener() | 加入事件傾聽器到此節點的事件傾聽器集合 | |
| removeEventListener() | 從節點的傾聽器集合中刪除一個事件傾聽器 | |
| dispatchEvent() | 將合成事件分派到目前的節點 | |
#addEventListener("字串","傾聽器",布林)
addEventListener()將指定的弗件傾聽器加到目前節點的傾聽器集合中,以處理指定型態的事件.
若第三個參數為true,則傾聽器被設定為捕捉事件傾聽器,若為false就設定為普通事件傾聽器
當以Node.cloneNode()或Document.importNode()等方法複製Document節點時,原來巳設定的傾聽器不會被複製
a.用法,
addEventListener("字串","傾聽器",布林)
b.參數,
第一個字串參數指事件型態,如load,click等
第二個參數是個傾聽器,當指定的事件型態事件被分派到Document節點時,呼叫此函數
第三個布林參數若為true,只有在事件傳播的捕捉階段指定的傾聽器才會被呼叫,
若為false,在捕捉階段不會呼叫傾聽器,只有當此節點是實際的件目標或事件從它的原始目標浮升到丂節點時,呼叫傾聽器
#removeEventListener("字串","傾聽器",布林)
刪除一個傾聽器
removeEventListener()將刪除指定的傾聽器,第一個參數和第三個參數必須與呼叫addEventListener()的對應參數一樣,若没有找到與指定的參數相符的事件傾聽器,此方法不發生作用
若傾聽器被removeEventListener()刪除,在目節點上另一個處理同型態事件的傾聽器刪除,它也不再被呼叫.
a.用法removeEventListener("字串","傾聽器",布林)
第一個字串參數指事件型態,如load,click等
第二個參數是要刪除的傾聽器
第三個布林參數若為true,表示要刪除捕捉事件的傾聽器,
若為false,表要刪除普通事件傾聽器
#dispatchEvent(Event)
分派合成事件到此節點
dispatchEvent()將分派一個合成事件,它由Document.createEvent()建立,由Event介面或它的某個字介面定義初始化方法初始化.
呼叫dispatchEvent()的節點將成為事件的目標節點,此事件在捕捉階段中第一次沿著DOM結構樹向下傳播,
若此事件的bubbles屬性為true,則事件的目標節點本身處理事件後,它將沿著DOM結構樹向上浮升
a.用法,dispatchEvent(Event)
,throws EventException)
b.參數,要分派的Event物牛
c.回傳值,若在事件傳播過程中呼叫第一個參數Even的preventDedault()則回傳false,否則回傳true.
d,丟出,
若Event物件没有被初始化,或其type屬性為null或空字串,
dispatchEvent()將丟出code屬性為EventException.unspecified_event_type_ERR的EvenException.
、、、、、、、、、、、、、、、、、、、
十二 樣式相關介面
1.StyleSheet介面
任意型態的樣式,子介面:CSSStyleSheet
此介面表示關聯到文件的樣式,若這是CSS樣式,實作StyleSheet介面的物件還會實作CSSStyleSheet子介面,並定義讓你能檢測和設定構成樣式的CSS規則的屬性和方法(參"CSSStyleSheet")
若DOM實作支援樣式,我們可以透過Document.styleSheets屬性取得關聯到文件的樣式列表,另外,HTML的<style>元素和<link>元素,以及XML樣式的ProcessingInstruction節點實作了LinkStyle介面,透過屬性sheet可存取StyleSheet物件.
a.StyleSheet介面的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| disabled | 若此屬性值為true,則將停用此樣式,不能套用到文件,如為false,樣式將被啟用,並套用到文件(除非media屬性指定不能將樣式套用到這種型態的文件) | ,布林 |
| href | 連結到文件樣式的RUL,對於inline樣式,此屬性為0 | 唯讀,字串 |
| ownerNode | 連結到文件的Document節點,或包含inline樣式的節點,在HTML文件中,此屬性指向<link>元素或<style>元素,對於包含在其他樣 式而不是真接包含在文件中的樣式,此屬性為null | 唯讀,Node |
| parentStyleSheet | 包含目前樣式的樣式,若目前樣式直接包含在文件中,則此屬性為null(參閱CSSStyleSheet.ovnerRule) | 唯讀,StyleSheet |
| title | 樣式的標題(若存在的話),標題必須由<style>標籤或<link>標籤(此樣式的ownerNode節點)的title屬性設定 | 唯讀,字串 |
| type | 樣式的型態,和MIME型態一樣,CSS樣式的型態是"text/css" | 唯讀,字串 |
2.StyleSheetList介面
樣式的陣列
此介面定義了StyleSheet物件的陣列,length屬性指定陣列中的樣式個數,item()可以存取指定位置上的樣式,在JS中可以將StyleSheetList物件作為唯讀陣列處理,用陣列符號[]檢索它,而不用item().
a.StyleSheetList介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| length | 陣列中的StyleSheet物件 | 唯讀,long,unsigned |
| item() | 傳回陣列中指定位置的StyleSheet物件,若指定的位置是負數或大於等於length屬性的值,此方法將傳回null | |
#item()
a.用法,styleSheet item(unsigned long index);
b.參數,index,欲取得的樣式在陣列中的位置
c.回傳值,陣列中指定位置的StyleSheet物件,若index是負數,或者大於等於length屬性的值,則傳回null,在JS將StyleSheet物件作為陣列處理會更簡單,可利用陣列符號[]檢索它,而不必呼叫此方法
3.CSS2Porperties介面
所有CSS屬性的方便屬性
CSS2Porperties介面為CSS規範定義的所有CSS屬性都定相應的屬性.若DOM實作支援該介面(它是CSS2屬性的一部分)
,則所有CSSStyleDeclaration物件都會實作CSS2properties介面,讀取此介面定義的屬性,等同於呼叫相應的CSS屬性的getPropertyValue().設定一個屬性的值,等同於對相應的屬性呼叫setProperty().
CSS2Properties介面定義的屬性包括對應於CSS屬性的屬性,CSS2Properties介面可以正確地處理這些方便屬性.
a.CSS2Porperties介面常見的成員
CSS2Porperties介面定義了許多屬性,每個屬性對應CSS2規範定一個CSS屬性.
它所有的屬性都與與CSS的屬性名稱對應,
規則:取消連字號「-」,單字都保留,但緊接的單字以大寫字母開頭.
例外:float是保留字,所以相對應的屬性名稱是cssFloat
這裡無法一一說明,這些屬性就是JS版本的CSS屬性,它們的含義和合法值,請自行參閱CSS
4.CSSCharsetRule介面
CSS樣式中的@charse規則
CSSCharsetRule介面表示CSS樣式中的@charset規則
a.CSSCharsetRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| encoding | @charset規則指定的字元編碼,若把此屬性設定成非法的值,將丟出code為SYNTAX_ERR的DOMException例外. 若規則或樣式是唯讀的,設定此屬性會丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外. | 字串 |
5.CSSFontFaceRule介面
CSS樣式中的@font-face規則
CSSFontFaceRule介面表示CSS樣式中的@font-face規則
a.CSSFontFaceRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| style | 此規則的樣式集合 | 唯讀,CSSStyleDeclaration |
6.CSSImporRule介面
CSS樣式中的@import規則
CSSImporRule介面表示CSS樣式中的@import規則,styleSheet屬性表示匯入的樣式
a.CSSImporRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| href | 匯入樣式的URL,此屬性的值不包括URL值外邊的"rul()"定界符號 | 唯讀,字串 |
| media | 匯入樣規套用的媒介型態列表 | 唯讀,MediaList |
| styleSheet | 表示匯入的樣式的CSSStyleSheet物件,若還沒有裝載樣式,或由於媒體型態不適用而沒有裝載樣式,則值為null | 唯讀,CSSStyleSheet |
7.CSSMediaRule介面
CSS樣式中的@media規則
CSSMediaRule介面表示CSS樣式中的@media規則和它所有巢狀規則,用它定義的方法可以插入和刪除巢狀規則
a.CSSMediaRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| cssRules | @media規則區塊中所有規則的陣列(從技術上來說,是CSSRuleList物件) | 唯讀,CSSRuleList |
| media | 巢狀規則所套用的媒介型態 | 唯讀,MediaList |
| deleteRule() | 刪除指定位置的巢狀規則 | |
| insertRule() | 在@media規則區塊的指定位置插入新規則 | |
#deleteRule()
刪除@media區塊中的規則,此方法將刪除cssRules陣列中指定位置的規則
a.用法,
void deleteRule(nsigned long index)
throws DOMException;
b.參數,index,用刪除的規則在@media規則區塊中的位置
c.丟出,deleteRule()可能丟出具有下列code的DOMException例外
INDEX_SIZE_ERR,index是負數,或者大於等於cssRules中的規則數
NO_JODIFICATION_ALLOWED_ERR,規則是唯讀的
#insertRule()
在@media區塊中插入新規則,此方法將指定的rule插入cssRules陣陣列的指定的index處
a.用法,
unsigned long insertRule(String rule,unsigned long index)
throw DOMException;
b.參數,
rule,要加入的規則的CSS字串表示,它是完整,可解析的
index,將新規則插入cssRules陣列中的位置,或cssRules.length把新規則袝加在陣列結尾
c.回傳值,參數index的值
d.丟出,此方法可能丟出具有下列code的DOMException例外
HIERARCHY_REQUEST_ERR,CSS語法不允許指定的位置有指定的rule
INDEX_SIZE_ERR,index是負數,或大於cssRules.length
NO_JODIFICATION_ALLOWED_ERR,@media規則和它的cssRules陣列是唯讀
SYNTAX_ERR,指定的rule含有語法錯誤
(8)CSSPageRule介面
CSS樣式中的@page規則
此介面表示CSS樣式中的@page規則,通常用於指定列印的頁面布局
a.CSSPageRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| selectorText | 此規則的頁選擇器文字,將此屬性設定為非法值,會丟出code為SYNTAX_ERR的DOMException例外,當此規則是唯讀規則時,吺定此屬性將丟出code為NO_JODIFICATION_ALLOWED_ERR的DOMException例外 | 字串 |
| style | 此規則的樣式集合 | 唯讀,CSSStyleDeclaration |
9.CSSPrimitiveValue介面
CSS樣式值
這個CSSValue的子介面表示單一的CSS值,將它與CSSValueList介面對照,後者表示CSS值的列表.
這個介面名稱中的字"primitive"是個誤導,因為它可以表示某些複合型態的CSS值,如計數器,矩形和顏色
a.CSSPrimitiveValue介面常見的成員
下面常常數是primitiveType屬性的合法值,它們指定了值的型態,對於數字值,還指定表示該值的單位
| 常數 | 內容 | 備註 |
|---|---|---|
| CSS_UNKNOW=0 | 無法辨識的值,不知道如何解析它,透過cssText屬性可以存取該值的文字表示 | unsigned,short |
| CSS_NUMBER=1 | 無單位的數字,用getFloatValue()查詢 | unsigned,short |
| CSS_PERCENTAGE=2 | 百分比,用getFloatValue()查詢 | unsigned,short |
| CSS_EMS=3 | 以ems(目前字體的高度)為單位的相對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_EXS=4 | 以exs(目前字體的"x-height")為單位的相對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_PX=5 | 以像素為單位的長度,用gegtFloatValue().像素長度是相對的度量單,因為其大小依顯示器的解析度而定,所以不能將它們轉換成英寸,毫米,點,或其化絕對長度,然而,像素旬是最常用的單位之一,把它們當作AbstractView.getComputedStyle()使用的絕對值處理 | unsigned,short |
| CSS_CM=6 | 以公分(厘米)為單位的絕對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_MM=7 | 以毫米為單位的絕絕對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_IN=8 | 以英寸為單位的絕對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_PT=9 | 以點(1/72英吋)為單位的絕對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_PC=10 | 以pica(12點)為單位的絕對長度,用getFloatValue()查詢 | unsigned,short |
| CSS_DEG=11 | 以度為單位的絕對角度,用getFloatvalue()查詢 | unsigned,short |
| CSS_RAD=12 | 以弧度為單位的絕對角度,用getFloatValue()查詢 | unsigned,short |
| CSS_GRAD=13 | 以梯度為單位的絕對角度,用getFloatValue()查詢 | unsigned,short |
| CSS_MS=14 | 以毫秒為單位的時間長度,用getFloatValue()查詢 | unsigned,short |
| CSS_S=15 | 以秒為單位的時間長度,用getFloatValue()查詢 | unsigned,short |
| CSS_HZ=16 | 以赫為單位的頻率,用getFloatValue()查詢 | unsigned,short |
| CSS_KHZ=17 | 以千赫為單位的頻率,用getFloatValue()查詢 | unsigned,short |
| CSS_DIMENSION=18 | 無單位維度,用getFloatValue()查詢 | unsigned,short |
| CSS_STRING=19 | 字串,用getStringValue()查詢 | unsigned,short |
| CSS_URI=20 | URI,用getStringValue()查詢 | unsigned,short |
| CSS_IDENT=21 | 識別字,用getStringValue()查詢 | unsigned,short |
| CSS_ATTR=22 | 屬性函數,用getStringValue()查詢 | unsigned,short |
| CSS_COUNTER=23 | 計數器,用getColunterValue()查詢 | unsigned,short |
| CSS_RECT=24 | 矩形,用getRectValue() | unsigned,short |
| CSS_RGBCOLOR=25 | 顏色,用getRGBColorValue()查詢 | unsigned,short |
| 成員 | 內容 | 備註 |
|---|---|---|
| primitiveType | 此值的型態,該屬性存放的是前面定義的常數之一 | 唯讀,short,unsigned |
| getCounterValue() | 對於CSS_COUNTER型態的值,取得表示該值的Counter物件 | |
| getFloatValue() | 取得一個數字值,若必要,將它轉換成指定的單位 | |
| getRectValue() | 對於CSS_RECT型態的值,傳回表示該值的Rect物件 | |
| getRGBColorValue() | 對於CSS_RGBCOLOR型態的值,取得表示該值的RGBColor | |
| getStringValue() | 取得字串值 | |
| setFloatValue() | 將數字值設成具有指定單位的指定數字 | |
| setStringValue() | 將字串值設定成具有指定型態的指定字串 | |
#getCounterValue()
傳回計數器的值
對於存放數字值的CSSPrimitiveValue物件,此方法將把這些值轉換成指定的單位,傳回轉換後的值
只有某些型態的單位可以進行轉換,長度可以轉換成長度,角度可以輚換成角度,時間可以轉換成時間,頻率可以轉換成頻率.
不過並非所有旳長度都能進行轉換,相對長度(em,ex或像素為單位的長度)只能轉換成其他的相對長度,不能轉換成絕對長度,
絕對長度也不能轉成相對長度,百分比除了能轉換成顏色百分比(表255分之幾,可以輚換成CSS_UNMBER型態)外,不能轉換成其他單位型態
a.用法,
Couter getVounterValue(unsigned short unitType)
throw DOMException;
b.參數,unitType,指定回傳值單位的CSSPrimitiveValue型態常數
c.回傳值,這個CSSPrimitiveValue的浮點數值,以指定的單位表示
d.丟出,若CSSPrimitiveValue存放的是非數字值,或這個值不能轉換成要求的單位型態,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外
#getRectValue()
傳回Rect值,此方法將傳回表示CSS矩形形的Rect物件,雖然沒有對應的setRectValue(),但誘迥設定傳回的Rect物件屬性,可以修改這個值
a.用法,
Rect getRectValue()
throw DOMException;
b.回傳值,表示這個CSSPrimitiveValue值的Rect物件
c.丟出,若primitiveType屬性不是CSS_RECT,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外
#getRGBColorValue()
取得RGBColor值,此方法將傳回表示顏色的RGBColor物件,雖然沒有對應的setRGBColorValue(),
但透過設定傳回的RGBColor物件的屬性,可以條改這個值
a.用法,
RGBColor getRGBColorValue()
throw DOMException;
b.回傳值,表示這個CSSPrimitiveValue值的RGBColor物件
c.丟出,若primitiveType屬性不是CSS)RGBCOLOR,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外
#getStringValue()
查詢CSS字串值
a.用法,
String getStirngValue()
throws DOMException;
b.回傳值,這個CSSPrimitiveValue的字串值
c.丟出,若primitiveType屬性不是CSS_STRING,CSS_URI,CSS_IDENT或CSS_ATTR,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外.
#setFloatValue()
設定數字值,
a.用法,
void setFloatValue(unsigned short unitType,float floatValue)
throws DOMException;
b.參數,
unitType,指定此值數字型態單位的CSSPrimitiveValue常數之一
floatValue,新值(以unitType指定的單位為單位)
c.丟出,
若與此值關聯的CSS屬性是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外.
若此CSS屬性不允許用數字值,或不允計用指定unitType的值,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外.
#setStringValue()
設定字串值,此方法指定CSSPrivmitiveValue的字串型態和字串值
a.用法,
void setStringValue(unsigned short stringType,STring stringValue)
throws DOMException;
b.參數,
stirngType,要設定的字串的型態,此參數必須是CSSPrimitiveValue常數CSS_STRING,CSS_URICSS+IDENT或CSS_ATTR中的一個
c.丟出,若與此值關聯的CSS屬性是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMExceptin例外.
若此CSS屬性不允許用字串值,或不允許用指定stirngType的值,此方法將丟出code為INVALID_ACCESS_ERR的DOMException例外.
10.CSSRule介面
CSS樣式中的規則,此介面定CSS樣式中所有型態的規則共用的屬性,沒有物件直接實作此介面,它們實作的是前面列出的一個子介面,最重的子介面是CSSStyleRule,它說明定義文件樣式的CSS規則
子介面:CSSCharsetRule,CSSFontFaceRule,CSSImporRule,
CSSMediaRUle,CSSPageRule,CSSStyleRule,CSSUnknowRuel
a.CSSRule介面常見的成員
以下常數表示可以出現在CSS樣式中的各種規則型態,它們是type屬性的合法值,並指定邐物件實作上面哪個子介面
| 常數 | 內容 | 備註 |
|---|---|---|
| UNKNOWN_RULE=0 | CSSUnknownRule | unsigned,short |
| STYLE_RULE=1 | CSSStyleRule | unsigned,short |
| CHARSET_RULE=2 | CSSCharsetRule | unsigned,short |
| IMPORT_RULE=3 | CSSImportRule | unsigned,short |
| MEDIA_RULE=4 | CSSMediaRule | unsigned,short |
| FONT_FACE_RULE=5 | CSSFontFaceRule | unsigned,short |
| PAGE_RULE=6 | CSSPageRule | unsigned,short |
| 成員 | 內容 | 備註 |
|---|---|---|
| cssText | 規則的文字表示,若設定此屬性,它將因下列原因丟出具有下列code的DOMException例外: HIERARCHY_REQUEST_ERR,位於樣式中此位置的指定的規則是不合法的 INVALID_MODIFICATION_ERR,此屬性的新值,是與原來的值不同型態的規則 NO_MODIFICATION_ALLOWED_ERR,規則或包含它的樣式是唯讀的 SYNTAX_ERR,指定的字串不是合法的CSS語法 | 字串 |
| parentRule | 包含此規則的規則,若此規則沒有父規則,則值為null,具有父規則的CSS規則的範例是@media規則中的樣式規則 | 唯讀,CSSRule |
| parentStyleSheet | 包含此規則的CSSStyleSheet物件 | 唯讀,CSSStyleSheet |
| type | 此物件表示的CSS規則的型態,此屬性的合法值是前面列出的常數,CSSRule介面從不會直接實作,此屬性的值指出此物件實作的子介面 | 唯讀,short,unsigned |
11.CSSRuleList介面
CSSRule物件的陣列,此介面定CSSRule物件的列表,此列表是唯讀的,有序的(如陣列)
屬性length指定列表中規則的數目,利用item()可以取得指定位置的規則,在JS中CSSRuleList物件的行為像JS陣列,可以用[]陣列表示法在列表中查詢元素,而不必呼叫item()(但注意,不能用[]為CSSRuleList添加新節點)
| 成員 | 內容 | 備註 |
|---|---|---|
| length | CSSRuleList陣列中的CSSRule物件數 | 唯讀,long,unsigned |
| item() | 傳回於指定位置的CSSRule物件,JS不允許明確 呼叫此此方法,而是將CSSRuleList物件視為陣列,以標準的方法括號陣列表示法來檢索物件,若指定的索引太大,此方法將傳回null | |
#item()
取得指定位置的CSSRule物件
a.用法,CSSRule item(unsigned long index)
b.參數,index,要取得規則的位置
c.回傳值,位於指定位置的CSSRule物件,若index不是有效的位置,將傳回null
12.CSSStyleDeclaration介面
CSS樣式屬性和它們值的集合,
此CSS屬性表示一個CSS樣式宣告區塊(block),即CSS屬性和其值的集合,中間以分號隔開,樣式宣告區塊是CSS樣規中位於大括弧內的樣式規則之一部分,HTML style屬性之值也可以構成樣式宣告區塊
若在宣告中設定CSS屬性名稱,還可以用此介面其他方法查詢這些屬性值,getPropertyValue()將以字串形式傳回特性的值,getPropertyCSSValue()將以CSSValue物件的形式傳回特性的值
(註,DOM API 引用CSS樣式屬性(attribute)為屬性(property),而原本林老師為了區別,attribute使用的字是是"特性")
在大多數的瀏覽器中,每個實作CSSStyleDeclaration介面的物件都實作了CSS2Properties介面,後者為CSS2規格定的所有CSS屬性定了物件屬性,我們可以讀寫這些便捷物件屬性值,而不必呼叫getPropertyValue().
用item()方法和length屬性可以遍歷宣告區去中設定的所有CSS屬性名稱,在JS中,可以將CSSStyleDeclaration物件作為陣列處理,並以[]符號檢索它,而不必明確地呼叫item()方法和length屬性可以遍歷宣告區塊中設定的所有CSS屬性名稱,在JS中可以將CSSStyleDeclaration物件作為陣列處理,並以[]符號檢索它,而不必明確地呼叫item(),
也實作:
若某個實作除了支援CSS屬性外還支援"CSS2"屬性(大部分的瀏覽器都這樣),則所有實作此介面的物物件還實作了CSS2Properties介面,CSS2Properties介面為設定和查詢CSS特性的值提供了通用的快捷屬性(參"CSS2Properties")
a.CSSStyleDeclaration介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| cssText | 樣式屬性和它們的值之文字表示,此屬性由樣式規則的完整文字去掉元素元素選擇器和括住屬性和值的大括弧構成. 將此屬性設成不合法的值,將丟出code為SYNTAX_ERR的DOMException例外,為唯讀的樣式或規則設定此屬性,將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外 | 字串 |
| length | 此樣式宣告中樣式屬性的個數 | 唯讀,long,unsigned |
| parentRule | 包含這個CSSStyleDeclaration物件的CSSRule物件.若此樣式宣告不屬性於任何CSS規則(諸如表示inline HTML style屬性的CSSStyleDeclaration物件),則此屬性為null | 唯讀,CSSRule |
| getPropertyCSSValue() | 傳表表示指定CSS屬性之值的CSSValue物件,若在這個樣式宣告區塊中沒有明確設定此屬性,或者指定的樣式是"快捷"屬性,則傳回null | |
| getPropertyPriority | 如果在這個宣告區塊中明確設定指定的CSS屬性,並且設定!immportant優先順序修飾詞,則傳回字串"important".若沒有指定此屬性,或者沒有優先順序,則傳回空字串 | |
| getPropertyValue() | 以字串形式傳回指定的CSS屬性之值,若在這個宣告區塊中沒有設定指定的屬性,則傳回空字串 | |
| item() | 從宣告區塊中刪除指定的CSS屬性 | |
| removeProperty() | 將指定的CSS屬性設定為指定字串值,並為宣告區塊設定優先順序 | |
| setProperty() | ||
#getPropertyCSSValue()
以物件形式傳回CSS屬性的值
a.用法,
CSSValue getPropertyCSSValue(String propertyName)
b.參數,propertyName,希望使用的CSS屬性名稱
c.回傳值,若在樣式中明確地設定指定的CSS屬性,則傳回表示此CSS屬性值的CSSValue物件.
若未設定指定的CSS屬性,則傳回null,如果propertyName指定了CSS快捷屬性,此方法也傳回null,因為快捷特性指定了一個以上的值,無法以CSSValue物件表示
#getPropertyPriority()
獲取CSS屬性的優先順序,
此方法將傳回指定的CSS屬性的字串值,與getPropertyCSSValue()不同,此方法可以像處理常規屬性一樣處理快捷屬性
a.用法,String getPropertyPriority(String propertyName)
b.參數,propretyName,CSS屬性的名稱
c.回傳值,若在宣告區塊中明確地設定CSS屬性,具有!important優先順序修飾詞,則傳回字串"important",否則傳回空字串
#getPropertyValue()
獲取指定位置的CSS屬性的名稱,
CSSStyleDeclaration介面表示CSS樣式屬性和其值的集合,使用此方法,可以根據位置查詢CSS屬性的名稱,結合length屬性還可以遍歷樣式宣告中設定的CSS屬性集合,
注意,此方法傳回的CSS屬性順序不必與它們在文件或樣式原始碼中出現的順序一致
作為item()的替代方法,JS使我們能將CSSStyleDeclaration物件視為屬性名稱的陣列,並以標準的[]陣列語法取得指定位置的屬性名稱
a.用法,String item(unsigned long index);
b.參數,index,想獲取的CSS屬性名稱的位置
c.回傳值,位於index的CSS屬性名稱,若index是負數或大於等於length屬性,則傳回空字串
#removeProperty()
刪除CSS屬性指定,
此方法將從樣式宣告區塊中刪除指定的屬性並傳回此屬性的值.
a.用法,String removeProperty(String propertyName)
throws DOMException;
b.參數,propertyName,要刪除的CSS屬性名稱
c.回傳值,指定的CSS屬性的字串值,若樣式宣告中沒有明確地設定指定的屬性,則傳回空字串
d.丟出,若樣式宣告是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外.
#setProperty()
設定CSS樣式屬性,
此方法將把指定的CSS屬性名稱與其優先順序加到樣式宣告中,若樣式宣告中的指定屬性巳經有一個值,此方法將只設定現有的CSS屬性值和優先順序
實際上用setProperty()為樣式宣告加入新的CSS屬性,會將此屬性插入到任意的位置,完全打亂現有的CSS屬性的順序,
因此,當以item()遍歷CSS屬性名稱集合時,不應該使用setProperty()
a.void setProperty(String propertyName,
String value,
String priority)
throws DOMException;
b.參數,
propertyName,要設定的CSS屬性名稱
value,屬性的新字串值
priority,屬性的優先順序,若此屬性指定的!important,則此參數應該是"important",否則它應該是空字串.
c.丟出,若指定的數value格式錯誤,此方法將丟出code為SYNTAX_ERR的DOMException例外.
若樣式宣告或要設定的屬性是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR.
13.CSSStyleRule介面
CSS樣式中的樣式規則,
此介面表示CSS樣式中的樣式規則.樣式規則是樣式中最常用,最重要的規則,它們設定要套用到指定文件元素集合的樣式資訊.
selectorText是此規則的元素選擇器的字串表示,style是CSSStyleDeclaration物件,表示要套用選取元素的樣式名稝和值的集合
a.CSSStyleRule介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| selectorText | 選擇器文字,指定套用此樣式規則的文件元素,若此規則是唯讀的,設定這個屬性會丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMEception例外,若新值不符合CSS語法規則,則丟出code為SYNTAX_ERR的例外 | 字串 |
| style | 應該套用到selectorText指定元素的樣式值 | 唯讀,CSSStyleDeclaration |
14.CSSStyleSheet介面
CSS樣式,
此介面表示CSS樣式,cssRules屬性列出此樣式中包含的規則,用insertRule()和delereRule()可以在列表中加入與刪除規則
a.CSSStyleSheet介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| cssRules | 構成樣規的CSSRule物件陣列(從技術上說,是CSSRuleList物件),除了真正的樣式規則外,它還包括所有的附屬規則 | 唯讀,CSSRuleList |
| ownerRule | 若此樣式由另一個樣式中的@import規則導入,則此屬性存放表示那個@import規則的CSSImportRule物件,否則它是null,當此屬性非null時繼承的ownerNode屬性為null | 唯讀,CSSRule |
| deleteRule() | 刪除指定位置的規則 | |
| insertRule() | 在指定位置插入新規則 | |
#deleteRule()
從樣式中刪除規則,
此方法將刪除cssRules陣列指定index之處的規則.
a.用法,
void deleteRule(unsigned long index)
throws DOMException;
b.參數,index,要刪除的規則在cssRules陣列中的索引
c.丟出,若index是負數或大於等於cssRules.length,此方法將丟出code為INDEX_SIZE_ERR的DOMException例外.
如樣式是唯讀的,它將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外.
#insertRule
在樣式中插入規則,
此方法將在樣式的cssRules陣列指定的index處插入(或附加)新的CSS rule
a.用法,
unsigned long insertRule(String rule,
unsigned long index)
throws DOMException;
b.參數,
rule,要加到樣式的規則完整,且可解析的文字表示,對樣式規則,此參數包括元素選擇器和樣式資訊
index,要把規則插入或附加到cssRuless陣中的位置
c.回傳值,參數index的值
d.丟出,此方法在下列情況下將丟出具有下列code的DOMEception例外:
HIERARCHY_REQUEST_ERR:
CSS語法不允許指定規則出現在指定的位置
INDEX_SIZE_ERR:
index是負數或大於cssRules.length的值
NO_MODIFICATION_ALLOWED_ERR:
此樣式是唯讀的
SYNTAX_ERR:
指定的rule文字具有語法錯誤
15.CSSUnknownRule介面
CSS樣式中無法辨認的規則,
此介面表示瀏覽器無法辨識或解析的CSS樣式規則(通常因為它是由瀏覽器不支援的CSS標準版本定義的)
注意,此介面沒有定義任屬於自己的屬性或方法.
透過繼承屬性cssText可以存取無法辨識的規則文字
16.CSSValue介面
CSS樣式屬性的值,
這個介面表示CSS屬性的值.cssText屬性給出此值的文字形式,若cssValueType屬性的值為CSSValue.CSS_VALUE_LIST,則這個CSSValue物件表示值的列表,還實作了更專用的CSSValueList介面.
子介面:CSSPrimitiveValue,CSSValueList
a.CSSValue介面常見的成員
以下的常數是cssValueType屬性的效值
| 常數 | 內容 | 備註 |
|---|---|---|
| CSS_INHERIT=0 | 表示殊值"inherit",意味著真的CSS樣式屬性的值是繼承的,在這種情況下,cssText屬性是"inherit" | |
| CSS_PRIMITIVE_VALUE=1 | 這是基本型態值,此CSSValue物件還實作更專用的CSSPrimitiveValue子介面 | |
| CSS_VALUE_LIST=2 | 這是由值列表成的複合值,此CSSValue物件還實作更專用的CSSValueList子介面,其作用像CSSValue物件的陣列 | |
| CSS_CUSTOM=3 | 定義此常數是為了擴充CSS物件模型,它說明此CSSValue物件表示之值的形態,不是CSS或DOM標準定義的.若採用的實作支援這種擴充,則此CSSValue物件還實作其他一些可以使用的子介面(如Scalable Vector Graphics標準定義的SVGColor介面) | |
| 成員 | 內容 | 備註 |
|---|---|---|
| cssText | 值的文字表示,設定此屬性可丟出DOMException例外,若例外的code為SYNTAX_ERR,指出新值的CSS語法不合法,若code為INVALID_MODIFICATON_ERR,指出要設定值的型態不同於原來的值,若code為NO_MODIFICATION_ALLOWED_ERR,說明此值是唯讀的 | 字串 |
| cssValueType | 此物件之值的型態,前面的常數列出此屬性旳四個合法值 | 唯讀,short,unsigned |
17.CSSValueList介面
存放CSSValue物件陣列的CSSValue物件,
此介面表示CSSValue物件的陣列,並且它本身也是CSSValue介面,用item()可以取得指定位置的CSSValue物件,但在JS中用標準的[]語法索引陣列更容易些]
CSSValue物件在CSSValueList陣列中的順序是它們在CSS樣式宣告中出現的順序,有些值為CSSValueList的CSS屬性也可能具有值none,這個特殊的值換成length值為0的CSSValueList物件.
a.CSSValueList介面常見的屬性
| 成員 | 內容 | 備註 |
|---|---|---|
| length | 此陣列中的CSSValue物件個數 | 唯讀,long,unsigned |
| item() | 傳回位陣列定位置的CSSValue物件,若指定的位置是負數,或它大於等於length,則傳回null | |
#item()
取得指定位置的CSSValue物件
a.用法,
CSSValue item(unsigned long index)
b.參數,index,欲取得的CSSValue物件位置
c.回傳值,CSSValueList物件中指定位置的CSSValue物件,若index是負數,或大於等於length,則傳回null
18.Rect介面
CSS rect()值,
此介面代表一個CSS rect(top right bottom left)值,與CSS屬性clip一起使用.
(1)Rect介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| bottom矩形的底邊 | 唯讀,CSSPrimitiveAvlue | |
| left | 矩形的左側 | 唯讀,CSSPrimitiveAvlue |
| right | 矩形的右側 | 唯讀,CSSPrimitiveAvlue |
| top | 矩形的頂端 | 唯讀,CSSPrimitiveAvlue |
19.RGBColor介面
CSS顏色值,
此介面表示在RGB顏色空間中設定的顏色,其屬性是CSSPrimitiveValue物件,分別指定該顏色的紅,綠,藍的值,每個CSSPrimitiveValue物件存放0～255之間的數字,或0～100之間的百分比
(1)RGBColor介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| red | 該顏色的紅色成分 | 唯讀,CSSPrimitiveValue |
| green | 該顏色的綠色成分 | 唯讀,CSSPrimitiveValue |
| blue | 該顏色的藍色成分 | 唯讀,CSSPrimitiveValue |
20.MediaList介面
樣式的媒介型態列表,
此介面表示樣式之媒介型態的列表或陣列,length屬性指定列表中的元素個素,利用item()可以根據位置取得指定的媒介型態,我們可以用appendMedium()和deleteMedium()將指定項目加到列表中或從列表中刪除,JS允許將MediaList物件視為陣列來處理,我們可以用[]方括號代替呼叫item().
HTML4標準定義以下的媒介型態(它們有大小寫區別,必須以小寫字母書寫):
screen,tty,tv,projection,handheld,print,braile,aural,all.
(參StyleSheet.media)
(1)MediaList介面常見的成員
| 成員 | 內容 | 備註 |
|---|---|---|
| length | 陣列長度,即列表中的媒介型態 | 唯讀,long,unsigned |
| mediaText | 完整的媒介列表的文字表示,設定此屬性時,若新值有語法錯誤,將丟出code為SYNTAX_ERR的DOMException例外,若媒介列表是唯讀的將丟出code為NO_JODIFICATION_ALLOWED_EXCEPTION的DOMExceptin | 字串 |
| appendMdium() | 在列表結尾加入新的媒介型態 | |
| deletMedium() | 從列表中刪除指定的媒介型態 | |
| item() | 傳回列表中指定位置的媒介型態,若索引是不合法的,則傳回null.在JS中,還可以將MediaList物件當作陣列來處理,並用陣列符號[]檢索所要的項目,無需呼叫此方法 | |
#appendMedium()
加入新的媒介型態型列表中,
此方法將把指定的newMedium加到MediaList的末尾,若MediaList已經包含這種指定的型態,此方法將首先從它目前位置刪除這種型態,然後將它加到列表的末尾.
a.用法,
void appenMedium(String newMedium)
throws DOMException;
b.參數,newMedium,欲加入的媒介型態,關於媒介型態名稱的集合,(參"MediaList")
c.丟出,若媒介表是唯讀的,此方法將丟出code為NO_MODIFICATION_ALLOWED_ERR的DOMException例外.
若指定的參數newMedium包含不合法的字元,此方法將丟出code為INVALID_CHARACTER_ERR的例外
#deleteMedium()
將指定的媒介型態從列表中刪除,
此方法將從MediaList中刪除指定的媒介型態,若列表不包括指定的型態,此方法將丟出例外
a.用法,
void deleteMedium(String oldMedium)
throws DOMException;
b.參數,oldMedium,要從列表中刪除的媒介型態名稱,(關於有效媒介型態名稱的集合,參MediaList)
c.回傳值,
d.丟出,
#deletMedium()
檢索媒介型態的陣列,
MediaList中位於指定位置的媒介型態(一個字串),若index是負數,或者大於等於length屬性的值,此方法將傳回null.請注意,在JS中可以將MediaList物件當作陣列來處理,並用陣列符號[]檢索它,而不用呼叫此方法.
a.用法,String item(unsigned long index)
b.參數,index,欲取得的媒介型態在陣列中的位置
c.回傳值,MediaList中位於指定位置的媒介型態(一個字串),若index是負數,或者大於等於length屬性的值,此方法將傳回null,注意,在JS中可以將MediaList物件當作陣列來處理,並用陣列符號[]檢索它,而不用呼叫此方法
0 回響:
張貼留言
歡迎任何人發表高見，不歡迎任何跟自身見解無關的行為。
所有意見最早於週六週日才會得見，多謝包涵。不想公開的悄悄話請自行註明。