JavaScript HTML DOM

HTML DOM

經過HTML DOM (文檔對象模型),可訪問 JavaScript HTML 文檔的全部元素。連同它們所包含的文本和屬性。css

當網頁被加載時,瀏覽器會建立頁面的文檔對象模型。HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。node

查找 HTML 元素

經過ID查找HTML元素:document.getElementById("ID")編程

經過標籤名查找HTML元素:var x=document.getElementById("main");    var y=x.getElementsByTagName("p");瀏覽器

經過類名查找HTML元素:document.getElementsByClassName("class");app

css中不少帶-的屬性,js中不能使用-,用首字母大寫 替代!dom

HTML DOM 改變 HTML 內容

改變 HTML 輸出流

docoument.write();可用於直接向 HTML 輸出流寫內容。      document.write(Date());  //輸出日期   編程語言

絕對不要在文檔加載完成以後使用 document.write()。這會覆蓋該文檔!!!函數

改變 HTML 內容

修改 HTML 內容的最簡單的方法是使用 innerHTML屬性。document.getElementById(id).innerHTML=new HTMLspa

改變 HTML 屬性

document.getElementById(id).屬性=new value;code

 

HTML DOM 改變 CSS

 

改變 HTML 樣式

document.getElementById(id).style.樣式=「new style「」;   新樣式必須帶雙引號或者單引號!!!

 

 

HTML DOM 事件

對事件作出反應

onclick:用戶點擊HTML元素

onchangge:HTML元素髮生改變時             常結合對輸入字段的驗證來使用。

onmouseover:移動鼠標到某個點

onmouseout:鼠標移出某個點

onkeydown:按下鼠標按鍵

onload:瀏覽器完成頁面加載

onunload :當用戶離開頁面時發生的事件(經過點擊一個鏈接,提交表單,關閉瀏覽器窗口等等。)    一樣觸發了頁面載入事件。

onmousedown:鼠標點擊時

onmouseup:鼠標鬆開時

onfoucs:得到焦點時。

HTML 事件屬性

onclick="displayDate()"

使用 HTML DOM 來分配事件

向 button 元素分配 onclick 事件:         document.getElementById("myBtn").onclick=function(){displayDate()}; 

 

 

JavaScript HTML DOM EventListener

 

addEventListener() 方法

當用戶點擊按鈕時觸發監聽事件:事件名加雙引號!!!    document.getElementById("ID").addEventListener("事件名", 函數名);  至關於在HTML中添加onclick=「函數名()」

document.getElementById("ID").addEventListener("事件名", 函數名); function 函數名(){}       //這樣能夠引用外函數

document.getElementById("ID").addEventListener("事件名", function (){});     //這樣不須要寫函數名。

addEventListener()向指定元素添加事件句柄。添加的事件句柄不會覆蓋已存在的事件句柄。能夠向一個元素添加多個同類型或不一樣類型事件句柄。

 document.getElementById("ID").addEventListener("click」, 函數名);  

 document.getElementById("ID").addEventListener("mouseover", 函數名);  //添加多個就寫兩次。

當使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來,可讀性更強, 在沒有控制HTML標記時也能夠添加事件監聽。

事件冒泡或事件捕獲

事件傳遞定義了元素事件觸發的順序。 若是你將 <p> 元素插入到 <div> 元素中,用戶點擊 <p> 元素, 

false :默認的 在冒泡中,內部元素的事件會先被觸發,而後再觸發外部元素,即: <p> 元素的點擊事件先觸發,而後會觸發 <div> 元素的點擊事件。

true :在捕獲中,外部元素的事件會先被觸發,而後纔會觸發內部元素的事件,即: <div> 元素的點擊事件先觸發 ,而後再觸發 <p> 元素的點擊事件。

 

removeEventListener() 方法移除事件的監聽。 

document.getElementById("ID").addEventListener(事件名, 函數名, 布爾值);

第一個參數是事件的類型 (如 "click" 或 "mousedown").           第二個參數是事件觸發後調用的函數。   第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的。

注意:不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。

 

向 Window 對象添加事件句柄

在監聽以前添加window。例:

window.addEventListener("resize",function(){document.getElementById("id").innerHTML = Math.random( ); } );    當窗口大小改變時添加監聽。隨機數

 

 

傳遞參數

當傳遞參數值時,使用"匿名函數"調用帶參數的函數:

document.getElementById("id").addEventListener("click", function(){ 函數名(p1, p2); });
 

 

 

 

跨瀏覽器解決方法:

兼容IE8:addEventListener換爲attachEvent   事件名 加上on  

var x = document.getElementById("ID"); 
if (x.addEventListener) {                    // 全部主流瀏覽器,除了 IE 8 及更早版本 
    x.addEventListener("click", myFunction); 
} else if (x.attachEvent) {                  // IE 8 及更早版本 
    x.attachEvent("onclick", myFunction); 
}

 

 

 

 

HTML DOM 元素

JavaScript HTML DOM 元素(節點)      

在文檔對象模型 (DOM) 中,每一個節點都是一個對象。DOM 節點有三個重要的屬性,分別是:

nodeName:節點的名稱   nodeValue :節點的值       nodeType:節點的類型

 

 

建立新的 HTML 元素

必須首先建立該元素(元素節點),而後向一個已存在的元素追加該元素。

var para=document.createElement("p");                                           //這段代碼建立新的<p> 元素
var node=document.createTextNode("這是一個新段落。");             //如需向 <p> 元素添加文本,您必須首先建立文本節點。這段代碼建立了一個文本節點:
para.appendChild(node);                                                                  //向 <p> 元素追加這個文本節點:
var element=document.getElementById("div1");                              //向一個已有的元素追加這個新元素。這段代碼找到一個已有的元素:

element.appendChild(para);                                                             //代碼在已存在的元素後添加新元素

 

 

刪除已有的 HTML 元素

var parent=document.getElementById("div1");                              //找到 id="div1" 的元 素:
var child=document.getElementById("p1");                                   //找到 id="p1" 的 <p> 元素:
parent.removeChild(child);                                                             //從父元素中刪除子元素

DOM 須要清楚您須要刪除的元素,以及它的父元素。

解決方案:

找到您但願刪除的子元素,而後使用其 parentNode 屬性來找到父元素:

var child=document.getElementById("p1"); child.parentNode.removeChild(child);
相關文章
相關標籤/搜索