HTML 中 DOM的使用，知道這些就夠了

TML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 定義了用于 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。通過 DOM，你可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。

HTML DOM 模型被構造為對象的樹：

查找 HTML 元素

//通過 id 查找 HTML 元素
var x=document.getElementById("intro");

//通過標簽名查找 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM 改變 HTML 內容

//改變 HTML 輸出流
document.write(Date());
//絕對不要在文檔加載完成之后使用,用btn點擊事件執行 document.write()。這會覆蓋該文檔。

//改變 HTML 內容
document.getElementById(id).innerHTML=new HTML

//改變 HTML 屬性
document.getElementById(id).attribute=new value

HTML DOM 改變 CSS

//改變 HTML 樣式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的標題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點我!</button>

HTML DOM 事件

//對事件做出反應
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>


//HTML 事件屬性
<body>
<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 來分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框后，函數將被觸發，將小寫字母轉為大寫字母。</p>
</body>

HTML DOM 事件監聽器

//addEventListener() 方法
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML=Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一個元素中添加多個事件句柄
<body>
<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x=document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數已執行!")
}
</script>
</body>

HTML DOM 元素

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

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

創建新的 HTML 元素

<body>
<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>

刪除已有的 HTML 元素

<body>
<div id="div1">
	<p id="p1">這是一個段落。</p>
	<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>

以上內容整理于網絡，如有侵權請聯系刪除。

所有內置的JavaScript對象

所有瀏覽器對象

所有HTML DOM對象

JavaScript 對象參考手冊

參考手冊描述了每個對象的屬性和方法，并提供了在線實例。

Array 對象
Boolean 對象
Date 對象
Math 對象
Number 對象
String 對象
RegExp 對象
全局屬性和函數

Browser 對象參考手冊

參考手冊描述了每個對象的屬性和方法，并提供了在線實例。

Window 對象
Navigator 對象
Screen 對象
History 對象
Location 對象

HTML DOM 參考手冊

參考手冊描述了 HTML DOM 的屬性和方法，并提供在線實例。

HTML Document
HTML Element
HTML Attributes
HTML Events

HTML DOM 元素對象參考手冊

參考手冊描述了每個對象的屬性和方法，并提供了在線實例。

Anchor 對象
Area 對象
Base 對象
Body 對象
Button 對象
Form 對象
Frame/IFrame 對象
Frameset 對象
Image 對象
Input Button 對象
Input Checkbox 對象
Input File 對象
Input Hidden 對象
Input Password 對象
Input Radio 對象
Input Reset 對象
Input Submit 對象
Input Text 對象
Link 對象
Meta 對象
Object 對象
Option 對象
Select 對象
Style 對象
Table 對象
td / th 對象
tr 對象
Textarea 對象

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

OM節點獲取

var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("cssLi");
var oLi=document.getElementsByName("myInput");

操作屬性：

document.getElementById(id).attribute=new value

實例

本例改變了 <img> 元素的 src 屬性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區別描述如下：

innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

document.getElementById(id).innerHTML=new HTML

實例一

本例改變了 <p> 元素的內容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

實例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設置或獲取位于對象起始和結束標簽內的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設置或獲取位于對象起始和結束標簽內的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設置或獲取對象及其內容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設置(包括標簽)或獲取(不包括標簽)對象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：

　　1)、innerHTML與outerHTML在設置對象的內容時包含的HTML會被解析，而innerText與outerText則不會。

　　2)、在設置時，innerHTML與innerText僅設置標簽內的文本，而outerHTML與outerText設置包括標簽在內外的文本(多個標簽)。

特別說明：

　　innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，再用正則表達式去除HTML標簽，

　　下面是一個簡單的符合W3C標準的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>

操作樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById(id).style.property=new style

CSS樣式的個別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy=document.getElementsByTagName("ul")[0];
oMy.className +=" myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS類,注意要留有空格;

ul標記已經設定了.myUL1類的樣式的情況下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",

oMy.className="myUL1 myUL2"表現形式與oMy.className="myUL2"一樣; 因此應當采用oMy.className +=" myUl2";

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。

下面的例子改變一個段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創建該元素（元素節點），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:經過測試證明,para.appendChild(node);調換至最后一行,運行正常

最可行的方法:添加節點的順序,由內到外(個人習慣);

在線咨詢

上一篇：七層網絡模型是什么？三分鐘繪制好看模型圖
下一篇：HTML5開發常見的7個框架，你知道幾個？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 中 DOM的使用，知道這些就夠了

TML DOM (文檔對象模型)

查找 HTML 元素

HTML DOM 改變 HTML 內容

HTML DOM 改變 CSS

HTML DOM 事件

HTML DOM 事件監聽器

HTML DOM 元素

您的項目需求