JS HTML DOM(js對html的操作）
阿新 • • 發佈：2019-05-08
部分 應用 seo cap cookie 對象 一段 ava creat
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(‘id 為 "main" 的 div 中的第一段文本是：‘ + y[0].innerHTML);
</script>
js可以直接寫動態內容
document.write(Date());
改變html中的內容
document.getElementById(id).innerHTML=new HTML
改變html中的屬性
document.getElementById("image").src="landscape.jpg";
改變html的樣式
<button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">
事件
HTML 事件的例子：
當用戶點擊鼠標時 onclick
當網頁已加載時
當圖像已加載時
當輸入字段被改變時
當提交 HTML 表單時
當用戶觸發按鍵時
經典應用
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>點擊按鈕就可以執行 <em>displayDate()</em> 函數。</p>
<button id="myBtn">點擊這裏</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
onchange事件
onchange 事件常結合對輸入字段的驗證來使用
<!DOCTYPE html>
<html>
<head>
<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>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。
創建新的html元素
<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元素
<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>
html dom（文檔對象模型）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
通過標簽名查找 HTML 元素
本例查找 id="main" 的元素，然後查找 "main" 中的所有 <p> 元素：
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(‘id 為 "main" 的 div 中的第一段文本是：‘ + y[0].innerHTML);
</script>
js可以直接寫動態內容
document.write(Date());
改變html中的內容
document.getElementById(id).innerHTML=new HTML
改變html中的屬性
document.getElementById("image").src="landscape.jpg";
改變html的樣式
<button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">
事件
HTML 事件的例子：
當用戶點擊鼠標時 onclick
當網頁已加載時
當圖像已加載時
當輸入字段被改變時
當提交 HTML 表單時
當用戶觸發按鍵時
經典應用
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>點擊按鈕就可以執行 <em>displayDate()</em> 函數。</p>
<button id="myBtn">點擊這裏</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
onchange事件
onchange 事件常結合對輸入字段的驗證來使用
<!DOCTYPE html>
<html>
<head>
<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>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。
創建新的html元素
<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元素
<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>
JS HTML DOM(js對html的操作）