JS HTML DOM 改變 HTML 輸出流 JavaScript 能夠創建動態的 HTML 內容: 今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中國標準時間) 在 JavaScript 中,document.write() 可用於直接向 HTML 輸出流 ...
JS HTML DOM
改變 HTML 輸出流
JavaScript 能夠創建動態的 HTML 內容:
今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中國標準時間)
在 JavaScript 中,document.write() 可用於直接向 HTML 輸出流寫內容
document.write(Date());
改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容,請使用這個語法:
document.getElementById(id).innerHTML=new HTML
如:
document.getElementById("p1").innerHTML="New text!";
改變 HTML 屬性
如需改變 HTML 元素的屬性,請使用這個語法:
document.getElementById(id).attribute=new value
JavaScript HTML DOM - 改變 CSS
改變 HTML 樣式
如需改變 HTML 元素的樣式,請使用這個語法:
document.getElementById(id).style.property=new style
例子 1
下麵的例子會改變 <p> 元素的樣式:
<p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script>
JavaScript HTML DOM 事件
例子 1
在本例中,當用戶在 <h1> 元素上點擊時,會改變其內容:
<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>
使用 HTML DOM 來分配事件
HTML DOM 允許您通過使用 JavaScript 來向 HTML 元素分配事件
onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本,並基於這些信息來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
onchange 事件
onchange 事件常結合對輸入欄位的驗證來使用。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了滑鼠點擊事件的所有部分。首先當點擊滑鼠按鈕時,會觸發 onmousedown 事件,當釋放滑鼠按鈕時,會觸發 onmouseup 事件,最後,當完成滑鼠點擊時,會觸發 onclick 事件。
JavaScript HTML DOM 元素(節點)
創建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必須首先創建該元素(元素節點),然後向一個已存在的元素追加該元素。
實例
<div id="div1"> <p id="p1">這是一個段落</p> <p id="p2">這是另一個段落</p></div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script>
從父元素中刪除子元素:
parent.removeChild(child);
JavaScript Number 對象
JavaScript 只有一種數字類型。
可以使用也可以不使用小數點來書寫數字。
JavaScript 不是類型語言。與許多其他編程語言不同,JavaScript 不定義不同類型的數字,比如整數、短、長、浮點等等。
JavaScript 中的所有數字都存儲為根為 10 的 64 位(8 比特),浮點數。
整數(不使用小數點或指數計數法)最多為 15 位。
小數的最大位數是 17,但是浮點運算並不總是 100% 準確
八進位和十六進位
如果首碼為 0,則 JavaScript 會把數值常量解釋為八進位數,如果首碼為 0 和 "x",則解釋為十六進位數。
JavaScript 對象
JavaScript RegExp 對象
RegExp 對象用於規定在文本中檢索的內容。
RegExp 是正則表達式的縮寫。
當您檢索某個文本時,可以使用一種模式來描述要檢索的內容。RegExp 就是這種模式。
簡單的模式可以是一個單獨的字元。
更複雜的模式包括了更多的字元,並可用於解析、格式檢查、替換等等。
可以規定字元串中的檢索位置,以及要檢索的字元類型,等等。
定義 RegExp
RegExp 對象用於存儲檢索模式。
通過 new 關鍵詞來定義 RegExp 對象。以下代碼定義了名為 patt1 的 RegExp 對象,其模式是 "e":
var patt1=new RegExp("e");
當您使用該 RegExp 對象在一個字元串中檢索時,將尋找的是字元 "e"。
RegExp 對象的方法
RegExp 對象有 3 個方法:test()、exec() 以及 compile()。
test() 方法檢索字元串中的指定值。返回值是 true 或 false。
exec() 方法檢索字元串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
compile() 方法用於改變 RegExp。
compile() 既可以改變檢索模式,也可以添加或刪除第二個參數。
例子:
var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); patt1.compile("d"); document.write(patt1.test("The best things in life are free"));
由於字元串中存在 "e",而沒有 "d",以上代碼的輸出是:
true false