ใช้ HTML DOM ช่วยให้ JavaScript เพื่อเปลี่ยนเนื้อหาขององค์ประกอบของ HTML
การเปลี่ยนกระแสออกของ HTML
JavaScript สามารถสร้างเนื้อหา HTML แบบไดนามิก:
วันที่:ดวงอาทิตย์ 6 พฤศจิกายน 2016 19:23:35 GMT + 0800 (中国标准时间)
ใน JavaScript, document.write() สามารถนำมาใช้ในการเขียนโดยตรงกับกระแสออก HTML นี้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
ลองตัวเอง» ไม่เคยใช้ document.write() หลังจากที่เอกสารถูกโหลด มันจะเขียนทับเอกสาร
การเปลี่ยนแปลงเนื้อหา HTML
วิธีที่ง่ายที่สุดในการปรับเปลี่ยนเนื้อหาขององค์ประกอบ HTML คือโดยใช้ innerHTML คุณสมบัติ
การเปลี่ยนเนื้อหาขององค์ประกอบ HTML ใช้รูปแบบนี้:
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>
ลองตัวเอง» ตัวอย่างนี้การเปลี่ยนแปลงเนื้อหาของนั้น <h1> องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
ลองตัวเอง» ตัวอย่างอธิบายว่า:
- เอกสาร HTML ข้างต้นมี <h1> องค์ประกอบที่มี id="header"
- เราใช้ HTML DOM ที่จะได้รับองค์ประกอบที่มี id="header"
- การเปลี่ยนแปลง JavaScript เนื้อหา (innerHTML) ขององค์ประกอบที่
การเปลี่ยนค่าของแอตทริบิวต์
การเปลี่ยนค่าของแอตทริบิวต์ HTML ใช้รูปแบบนี้:
document.getElementById(id).attribute=new value
ตัวอย่างนี้เปลี่ยนค่าของคุณลักษณะ src ของ <img> องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
ลองตัวเอง» ตัวอย่างอธิบายว่า:
- เอกสาร HTML ข้างต้นมี <img> องค์ประกอบที่มี id="myImage"
- เราใช้ HTML DOM ที่จะได้รับองค์ประกอบที่มี id="myImage"
- การเปลี่ยนแปลงจาวาสคริปต์ src แอตทริบิวต์ขององค์ประกอบที่มาจาก "smiley.gif" เพื่อ "landscape.jpg"
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »