1. ดอม: โมเดลวัตถุเอกสาร DOM (โมเดลวัตถุเอกสาร) กำหนดวิธีมาตรฐานสำหรับการเข้าถึงและประมวลผลเอกสาร HTML DOM แสดงเอกสาร HTML เป็นโครงสร้างต้นไม้ (ต้นไม้โหนด) ที่มีองค์ประกอบคุณลักษณะและข้อความ
2. คุณสมบัติบางอย่างที่ใช้กันทั่วไปของ DOM
2.1 รับองค์ประกอบตาม ID
(1) ไวยากรณ์:
การคัดลอกรหัสมีดังนี้:
document.getElementById ("id");
(2) ฟังก์ชั่น: ID หมายถึงบัตรประจำตัวของบุคคล เราสามารถค้นหาแท็กโดยค้นหาแท็ก ID จากนั้นทำการดำเนินการที่สอดคล้องกัน
(3) หมายเหตุ: อย่าลืมเขียนเอกสาร!
2.2 แอตทริบิวต์ innerhtml
(1) ไวยากรณ์:
การคัดลอกรหัสมีดังนี้:
obgect.innerhtml = "Hello World"
(2) ฟังก์ชั่น: ส่วนใหญ่เพื่อให้ได้หรือแทนที่เนื้อหาในแท็ก
(3) ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</head>
<body>
<h2 id = "con"> javascript </h2>
<p> JavaScript เป็นภาษาสคริปต์อย่างง่ายตามวัตถุและเหตุการณ์ที่ขับเคลื่อน มันถูกฝังอยู่ในเอกสาร HTML และตีความและดำเนินการโดยเบราว์เซอร์สร้างเอฟเฟกต์การแสดงผลแบบไดนามิกบนหน้าเว็บและใช้ฟังก์ชั่นการโต้ตอบของผู้ใช้ </p>
<script type = "text/javascript">
var mychar = document.getElementById ("con");
document.write ("ชื่อต้นฉบับ:"+mychar.innerhtml+"<br>"); // เอาต์พุตเนื้อหาแท็ก H2 ดั้งเดิม
mychar.innerhtml = "Hello World!";
document.write ("แก้ไขชื่อ:"+mychar.innerhtml); // เอาต์พุตเนื้อหาแท็ก H2 ที่แก้ไขแล้ว
</script>
</body>
</html>
(4) หมายเหตุ: วัตถุคือวัตถุองค์ประกอบที่ได้รับเช่นองค์ประกอบที่ได้รับผ่าน document.getElementById ("id")
2.3 เปลี่ยนสไตล์ HTML
(1) ไวยากรณ์:
การคัดลอกรหัสมีดังนี้:
Object.style.property
(2) ฟังก์ชั่น: ใช้ในการแก้ไขสไตล์ HTML
(3) ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<body>
<h2 id = "con"> ฉันรัก JavaScript </h2>
<p> JavaScript ช่วยให้เว็บเพจสามารถแสดงเอฟเฟกต์แบบไดนามิกและดำเนินการฟังก์ชั่นการโต้ตอบของผู้ใช้ </p>
<script type = "text/javascript">
var mychar = document.getElementById ("con");
mychar.style.color = "สีแดง";
mychar.style.backgroundColor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) หมายเหตุ: คุณสมบัติมีหลายสไตล์เช่นสีความสูง ฯลฯ ซึ่งสามารถแก้ไขได้โดยใช้วิธีนี้ อย่าลืมเพิ่มเครื่องหมายอัฒภาคให้กับคุณสมบัติหลังจากพวกเขา
2.4 แสดงและซ่อน (แอตทริบิวต์แสดงผล)
(1) ไวยากรณ์:
Object.style.display = ค่า
(2) ฟังก์ชั่น: การแสดงผลและการซ่อนมักจะเห็นในหน้าเว็บซึ่งทำได้โดยใช้แอตทริบิวต์การแสดงผล
(3) ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น hiddentext ()
-
var mychar = document.getElementById ("con");
mychar.style.display = "ไม่มี";
-
ฟังก์ชั่น ShowText ()
-
var mychar = document.getElementById ("con");
mychar.style.display = "block";
-
</script>
(4) หมายเหตุ: ค่าของค่าคือไม่มีและบล็อกโดยที่ไม่มีการแสดงและบล็อกจะปรากฏขึ้น
2.5 แอตทริบิวต์ classname
(1) ไวยากรณ์:
การคัดลอกรหัสมีดังนี้:
Object.className = className
(2) ฟังก์ชั่น: 1. รับแอตทริบิวต์คลาสขององค์ประกอบ; 2. ระบุสไตล์ CSS สำหรับองค์ประกอบในหน้าเว็บเพื่อเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบ
(3) ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">>
<tite> แอตทริบิวต์คลาสคลาส </title>
<style>
ร่างกาย {ตัวอักษรขนาด: 16px;}
.หนึ่ง{
ชายแดน: 1px Solid #EEE;
ความกว้าง: 230px;
ความสูง: 50px;
ความเป็นมา: #CCC;
สี: สีแดง;
-
.สอง{
ชายแดน: 1px Solid #CCC;
ความกว้าง: 230px;
ความสูง: 50px;
ความเป็นมา:#9CF;
สี: สีน้ำเงิน;
-
</style>
</head>
<body>
<p id = "p1"> JavaScript ช่วยให้เว็บเพจสามารถแสดงเอฟเฟกต์แบบไดนามิกและดำเนินการฟังก์ชั่นการโต้ตอบของผู้ใช้ </p>
<อินพุต type = "button" value = "เพิ่ม style" onclick = "เพิ่ม ()"/>
<p id = "p2"> JavaScript ช่วยให้เว็บเพจสามารถแสดงเอฟเฟกต์แบบไดนามิกและใช้ฟังก์ชั่นการโต้ตอบของผู้ใช้ </p>
<อินพุต type = "button" value = "เปลี่ยนลักษณะที่ปรากฏ" onclick = "modify ()"/>
<script type = "text/javascript">
ฟังก์ชั่นเพิ่ม () {
var p1 = document.getElementById ("P1");
p1.className = "One";
-
ฟังก์ชั่นแก้ไข () {
var p2 = document.getElementById ("P2");
p2.className = "สอง";
-
</script>
</body>
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน