通過標籤名尋找 HTML 元素本例尋找 id="main" 的元素,然後尋找 id="main" 元素中的所有 <p> 元素:
執行個體<body>
<p>你好,世界!</p>
<div id="main">
<p>DOM是非常有用的</p>
<p>該執行個體展示了<b>getElementsByTagName</b>方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(‘id="main"元素中的第一個段落為:‘+y[1].innerHTML);
</script>
</body>
顯示結果為:
解析此例:想找到div中的第二個p元素,並修改其裡面的內容。我們先通過id找到其父類元素div:var x=
document.getElementById("main").然後再根據標籤在父類元素中尋找:var y=x.getelementbytagname("p");此時,y裡面儲存著div裡面的所有p標籤,從下表0開始,也相當於一個數組。我們要找第二個p標籤,也就是y[1];。想修改第二個p標籤裡面的內容,那就是y[1].innerHTML.
當然上述執行個體,我們還可以同一下代碼來實現:
body>
<p>你好,世界!</p>
<div id="main">
<p>DOM是非常有用的</p>
<p>該執行個體展示了<b>getElementsByTagName</b>方法</p>
</div>
<script>
var x=document.getElementsByTagName("p");
document.write(‘id="main"元素中的第一個段落為:‘+x[2].innerHTML);
</script>
</body>
這段代碼和上面的唯一區別就是找到p元素的範圍不一樣。這個例子我們是以docunment(整個頁面文檔)為範圍尋找p,找到頁面中所有的p元素,儲存在x中。我們要得到第三個p標籤,因此為x[2].上面的例子是以其id=main的div中尋找p標籤,因此找到兩個p,第二個p當然是y[1].
***仔細觀察,我們發現通過id尋找就是在document中尋找唯一的某個元素,因此getelementbyid中的是element。而,通過標籤尋找,getelementsbytagname中的是elements。
通過類名找到 HTML 元素本例通過 getElementsByClassName 函數來尋找 class="intro" 的元素:
執行個體var x=document.getElementsByClassName("intro");
通過上面3種方式,我們找到了我們想要找的標籤等等(當然,上面例子中也進行了改變HTML內容,我們為了表現出找到,只有顯示出來才能看到效果。)。那麼接下來,我們將展現找到都進行的操作。
JavaScript HTML DOM - 改變 HTMLHTML DOM 允許 JavaScript 改變 HTML 元素的內容。
(一)改變 HTML 輸出資料流(document.write)
JavaScript 能夠建立動態 HTML 內容:
在 JavaScript 中,document.write() 可用於直接向 HTML 輸出資料流寫內容。
執行個體<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>絕對不要在文檔載入完成之後使用 document.write()。這會覆蓋該文檔。 (二)1.改變 HTML 內容(text)修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容,請使用這個文法:
本例改變了 <p>元素的內容:
執行個體<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html> 本例改變了 <h1> 元素的內容:
執行個體<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>執行個體講解:
2.改變 HTML 屬性(attribute)如需改變 HTML 元素的屬性,請使用這個文法:
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>
(三)
JavaScript HTML DOM - 改變CSSHTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
改變 HTML 樣式如需改變 HTML 元素的樣式,請使用這個文法:
document.getElementById(id).style.property=new style下面的例子會改變 <p> 元素的樣式:
html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
顯示和隱藏文本