DOM與BOM部分示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM and BOM</title>
</head>
<body>
<div>此為DOM的部分示例（用id和標簽尋找html的元素）:</div>
<p id="intro">Hello World!</p>
<p>The DOM is very useful.</p>
<p id="p1">這是原來的句子</p>
<p>以下例子是用id來尋找元素：</p>
<p id="demo"></p>
<p>以下例子是用標簽名稱來尋找元素：</p>
<p id="demo1"></p>
<div>此為BOM的部分示例（獲取當前瀏覽器窗口的長和寬、獲取當前的網站地址）：</div>
<p id="demo2"></p>
<div>以下展示當前的網站地址：</div>
<p id="demo3"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + myElement.innerHTML;
var x = document.getElementsByTagName("p");
document.getElementById("demo1").innerHTML =
‘The second paragraph (index 1) is: ‘ + x[1].innerHTML;
document.getElementById("p1").innerHTML = "本句是用js更改後的句子";
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo2");
x.innerHTML = "當前瀏覽器的寬為：" + w + ", 高為：" + h + "。";
document.getElementById("demo3").innerHTML = "當前網址為：" + window.location.href;
</script>
</body>
</html>
DOM與BOM部分示例