經過HTML DOM (文檔對象模型),可訪問 JavaScript HTML 文檔的全部元素。連同它們所包含的文本和屬性。css
當網頁被加載時,瀏覽器會建立頁面的文檔對象模型。HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。node
經過ID查找HTML元素:document.getElementById("ID")編程
經過標籤名查找HTML元素:var x=document.getElementById("main"); var y=x.getElementsByTagName("p");瀏覽器
經過類名查找HTML元素:document.getElementsByClassName("class");app
css中不少帶-的屬性,js中不能使用-,用首字母大寫 替代!dom
docoument.write();可用於直接向 HTML 輸出流寫內容。 document.write(Date()); //輸出日期 編程語言
絕對不要在文檔加載完成以後使用 document.write()。這會覆蓋該文檔!!!函數
修改 HTML 內容的最簡單的方法是使用 innerHTML屬性。document.getElementById(id).innerHTML=new HTML;spa
document.getElementById(id).屬性=new value;code
document.getElementById(id).style.樣式=「new style「」; 新樣式必須帶雙引號或者單引號!!!
onclick:用戶點擊HTML元素
onchangge:HTML元素髮生改變時 常結合對輸入字段的驗證來使用。
onmouseover:移動鼠標到某個點
onmouseout:鼠標移出某個點
onkeydown:按下鼠標按鍵
onload:瀏覽器完成頁面加載
onunload :當用戶離開頁面時發生的事件(經過點擊一個鏈接,提交表單,關閉瀏覽器窗口等等。) 一樣觸發了頁面載入事件。
onmousedown:鼠標點擊時
onmouseup:鼠標鬆開時
onfoucs:得到焦點時。
onclick="displayDate()"
向 button 元素分配 onclick 事件: document.getElementById("myBtn").onclick=function(){displayDate()};
當用戶點擊按鈕時觸發監聽事件:事件名加雙引號!!! 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> 元素的點擊事件。
document.getElementById("ID").addEventListener(事件名, 函數名, 布爾值);
第一個參數是事件的類型 (如 "click" 或 "mousedown"). 第二個參數是事件觸發後調用的函數。 第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的。
注意:不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。
在監聽以前添加window。例:
window.addEventListener("resize",function(){document.getElementById("id").innerHTML = Math.random( ); } ); 當窗口大小改變時添加監聽。隨機數
當傳遞參數值時,使用"匿名函數"調用帶參數的函數:
兼容IE8:addEventListener換爲attachEvent 事件名 加上on
在文檔對象模型 (DOM) 中,每一個節點都是一個對象。DOM 節點有三個重要的屬性,分別是:
nodeName:節點的名稱 nodeValue :節點的值 nodeType:節點的類型
必須首先建立該元素(元素節點),而後向一個已存在的元素追加該元素。
var para=document.createElement("p"); //這段代碼建立新的<p> 元素
var node=document.createTextNode("這是一個新段落。"); //如需向 <p> 元素添加文本,您必須首先建立文本節點。這段代碼建立了一個文本節點:
para.appendChild(node); //向 <p> 元素追加這個文本節點:
var element=document.getElementById("div1"); //向一個已有的元素追加這個新元素。這段代碼找到一個已有的元素:
element.appendChild(para); //代碼在已存在的元素後添加新元素
var parent=document.getElementById("div1"); //找到 id="div1" 的元 素:
var child=document.getElementById("p1"); //找到 id="p1" 的 <p> 元素:
parent.removeChild(child); //從父元素中刪除子元素
DOM 須要清楚您須要刪除的元素,以及它的父元素。
解決方案:
找到您但願刪除的子元素,而後使用其 parentNode 屬性來找到父元素: