JavaScript筆記之第四天


HTML DOM (文檔對象模型)

當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。
DOM HTML tree

查找 HTML 元素

通常,通過 JavaScript,您需要操作 HTML 元素。

為了做到這件事情,您必須首先找到該元素。有三種方法來做這件事:

  • 通過 id 找到 HTML 元素
  • 通過標簽名找到 HTML 元素
  • 通過類名找到 HTML 元素

document.getElementById("intro");
x.getElementsByTagName("p");


JavaScript HTML DOM - 改變 HTML

1.document.write() 可用於直接向 HTML 輸出流寫內容。

改變 HTML 內容

var element=document.getElementById("header");
element.innerHTML="新標題";

改變 HTML 屬性

document.getElementById(id).attribute=新屬性值

document.getElementById("image").src="landscape.jpg";


改變 HTML 樣式

document.getElementById(id).style.property=新樣式

<pid="p1">Hello World!</p><pid="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";


JavaScript HTML DOM 事件

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

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本,並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

<body onload="checkCookies()">


JavaScript HTML DOM 元素(節點)

創建新的 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>


JavaScript 對象

對象只是帶有屬性和方法的特殊數據類型。

屬性是與對象相關的值。

訪問對象屬性的語法是:

objectName.propertyName

您可以通過以下語法來調用方法:

objectName.methodName()

























































































注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com