JavaScript HTML DOM เปลี่ยนแปลงเนื้อหา HTML
HTML DOM ช่วยให้ JavaScript เพื่อเปลี่ยนเนื้อหาขององค์ประกอบของ HTML
เปลี่ยนกระแสออกของ HTML
JavaScript สามารถสร้างเนื้อหา HTML แบบไดนามิก:
วันที่วันนี้คือ:
ใน JavaScript, document.write () สามารถใช้ในการเขียนเนื้อหา HTML เพื่อกระแสออกโดยตรง
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
ลอง»
 | ไม่เคยใช้ document.write หลังจากเอกสารเสร็จสิ้นการโหลด () นี้จะแทนที่เอกสาร |
|---|
เปลี่ยนเนื้อหาของ HTML
ใช้ทรัพย์สิน innerHTML วิธีที่ง่ายที่สุดในการปรับเปลี่ยนเนื้อหาของ HTML
การเปลี่ยนเนื้อหาขององค์ประกอบ HTML ให้ใช้รูปแบบนี้:
document.getElementById(id).innerHTML=新的 HTML
ตัวอย่างนี้มีการเปลี่ยนแปลงเนื้อหาของ <p> องค์ประกอบ:
ตัวอย่าง
<html>
<body>
<p id = "P1"> Hello World! </ p>
<script>
document.getElementById ( "P1") innerHTML = "text !. ใหม่";
</ script>
</ body>
</ html>
<body>
<p id = "P1"> Hello World! </ p>
<script>
document.getElementById ( "P1") innerHTML = "text !. ใหม่";
</ script>
</ body>
</ html>
ลอง»
ตัวอย่างนี้มีการเปลี่ยนแปลงเนื้อหาของ <h1> องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
ลอง»
ตัวอย่างเพื่ออธิบาย:
- เอกสาร HTML ข้างต้นที่มี id = "หัว" ของ <h1> องค์ประกอบ
- เราใช้ HTML DOM ที่จะได้รับการ ID = "หัว" องค์ประกอบ
- JavaScript การเปลี่ยนแปลงเนื้อหาองค์ประกอบนี้ (innerHTML)
เปลี่ยนแอตทริบิวต์แบบ HTML
การเปลี่ยนคุณสมบัติขององค์ประกอบ HTML ใช้รูปแบบนี้:
document.getElementById(id).attribute=新属性值
ตัวอย่างนี้การเปลี่ยนแปลงคุณลักษณะ src <img> องค์ประกอบ:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
ลอง»
ตัวอย่างเพื่ออธิบาย:
- เอกสาร HTML ข้างต้นที่มี id = "ภาพ" ของ <img> องค์ประกอบ
- เราใช้ HTML DOM ที่จะได้รับการ ID = "Image" องค์ประกอบ
- เปลี่ยนแปลงคุณสมบัติขององค์ประกอบนี้จาวาสคริปต์ (ที่ "smiley.gif" กับ "landscape.jpg")