摘要:和事件可用于處理。循環中的代碼塊將針對每個屬性執行一次。返回值是被找到的值。是被視為節點樹的。將新元素作為父元素的最后一個子元素進行添加。返回指定的屬性值。把指定屬性設置或修改為指定的值。年齡必須是與之間的數字。
JS JS DOM
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本,并基于這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時,會觸發 onmousedown 事件,當釋放鼠標按鈕時,會觸發 onmouseup 事件,最后,當完成鼠標點擊時,會觸發 onclick 事件。
找到您希望刪除的子元素,然后使用其 parentNode 屬性來找到父元素:
var child=document.getElementById("p1"); child.parentNode.removeChild(child);JS 對象
JavaScript for...in 語句循環遍歷對象的屬性。
for...in 循環中的代碼塊將針對每個屬性執行一次。
for (對象中的變量) { 要執行的代碼 }
極大或極小的數字可通過科學(指數)計數法來寫:
var y=123e5; // 12300000 var z=123e-5; // 0.00123
如果邏輯對象無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN,那么對象的值為 false。否則,其值為 true(即使當自變量為字符串 "false" 時)!
使用了 Math 對象的 floor() 方法和 random() 來返回一個介于 0 和 10 之間的隨機數:
document.write(Math.floor(Math.random()*11))RegExp 對象的方法
test() 方法檢索字符串中的指定值。返回值是 true 或 false。
exec() 方法檢索字符串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
//找到第一個 "e",并存儲其位置, //如果再次運行 exec(),則從存儲的位置開始檢索,并找到下一個 "e",并存儲其位置 var patt1=new RegExp("e","g"); do { result=patt1.exec("The best things in life are free"); document.write(result); } while (result!=null)
compile() 既可以改變檢索模式,也可以添加或刪除第二個參數。
var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); //true patt1.compile("d"); document.write(patt1.test("The best things in life are free")); //falseJS Window Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)。
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 瀏覽器窗口的內部高度 window.innerWidth - 瀏覽器窗口的內部寬度
對于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth
實用的 JavaScript 方案(涵蓋所有瀏覽器):
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;Window Screen
(返回訪問者屏幕的寬度,以像素計,減去界面特性,比如窗口任務欄)
screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度
Window Locationlocation.href 屬性返回當前頁面的 URL。
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 (80 或 443)
location.protocol 返回所使用的 web 協議(http:// 或 https://)
location.assign("http://www.w3school.com.cn") 方法加載新的文檔。
history.back() - 與在瀏覽器點擊后退按鈕相同(加載歷史列表中的前一個 URL)
history.forward() - 與在瀏覽器中點擊按鈕向前相同(加載歷史列表中的下一個 URL)
(navigator 數據可被瀏覽器使用者更改,瀏覽器無法報告晚于瀏覽器發布的新操作系統)
特性檢測
由于 navigator 可誤導瀏覽器檢測,使用對象檢測可用來嗅探不同的瀏覽器。
由于不同的瀏覽器支持不同的對象,您可以使用對象來檢測瀏覽器。例如,由于只有 Opera 支持屬性 "window.opera",您可以據此識別出 Opera。
alert("文本") confirm("文本") prompt("文本","默認值")JS Timing
setTimeout("javascript語句",毫秒) 未來的某時執行代碼
setTimeout() 方法會返回某個值。在上面的語句中,值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout(),你可以使用這個變量名來指定它。
clearTimeout() 取消setTimeout()
HTML DOM
在 HTML DOM 中,所有事物都是節點。DOM 是被視為節點樹的 HTML。
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
document.documentElement - 全部文檔
document.body - 文檔的主體
DOM 處理中的常見錯誤是希望元素節點包含文本
可通過節點的 innerHTML 屬性來訪問文本節點的值
一些常用的 HTML DOM 方法:
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
appendChild() 將新元素作為父元素的最后一個子元素進行添加。
removeChild() 刪除子節點child.parentNode.removeChild(child)。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改為指定的值。
一些常用的 HTML DOM 屬性:
innerHTML - 節點(元素)的文本值
parentNode - 節點(元素)的父節點
childNodes - 節點(元素)的子節點
attributes - 節點(元素)的屬性節點
nodeName 屬性
nodeName 屬性規定節點的名稱。
nodeName 是只讀的
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
注釋:nodeName 始終包含 HTML 元素的大寫字母標簽名。
nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本本身
屬性節點的 nodeValue 是屬性值
nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 是只讀的。
比較重要的節點類型有:
元素類型 NodeType
元素 1
屬性 2
文本 3
注釋 8
文檔 9
如需向 HTML DOM 添加新元素,您首先必須創建該元素(元素節點),然后把它追加到已有的元素上。
除了 innerHTML 屬性,您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。
document.getElementById("intro").childNodes[0].nodeValue
向超鏈接添加快捷鍵
幾乎所有瀏覽器均 accesskey 屬性,除了 Opera。
以下元素支持 accesskey 屬性:
< a>, ,
HTML
document.referrer
如果當前文檔不是通過超級鏈接訪問的,則為 null。這個屬性允許客戶端 JavaScript 訪問 HTTP 引用頭部。
打開一個新的文檔,添加一些文本,然后關閉它。
document 文檔
文檔中錨的數目
document.anchors.length
文檔中的圖像數目
document.images.length
文檔中表單的名字
document.forms[0].name document.getElementById("myForm").reset()//重置
驗證表單
選取文本域中的內容
document.getElementById("myText").select()
表單中的下拉列表
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text option=no.options[no.selectedIndex].text
當達到文本域的最大字符數時跳至下一個域
這段腳本在達到文本框的最大長度時跳到下一個文本框:
Event 對象
Frame、Frameset 以及 IFrame 對象
可調整大小和不可調整大小的框架
跳出框架
更改下拉列表中的可見行數
select id="mySelect"
document.getElementById("mySelect").size=3
選擇下拉列表中的多個選項
document.getElementById("mySelect").multiple=true
下拉列表 禁用
document.getElementById("mySelect").disabled=true
更改被選選項
document.getElementById("orange").selected=true;
從下拉列表中刪除選項
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
打印該頁
window.print()
HTML5 中不再支持下面哪個元素?
在 HTML5 中不再支持