วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่การเรียนรู้
คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript
1. รับองค์ประกอบ
การดำเนินงาน
ตามรหัส ชื่อ และคลาส รับองค์ประกอบการดำเนินการผ่านแอตทริบิวต์และชื่อแท็ก
สรุป:
ยกเว้นว่าเมธอด document.getElementById() จะส่งคืนองค์ประกอบที่มีรหัสที่ระบุ ส่วนเมธอดอื่นจะส่งคืนคอลเลกชันที่ตรงตามข้อกำหนด หากต้องการรับหนึ่งในออบเจ็กต์ คุณสามารถรับได้จากตัวห้อย ซึ่งเริ่มต้นจาก 0 ตามค่าเริ่มต้น
วัตถุเอกสารมีคุณสมบัติบางอย่างที่สามารถใช้เพื่อรับองค์ประกอบในเอกสาร เช่น รับแท็กแบบฟอร์ม แท็กรูปภาพ ฯลฯ ทั้งหมด
โปรดทราบว่า
องค์ประกอบการดำเนินการที่ได้รับผ่านวิธีการของวัตถุเอกสารและคุณสมบัติของวัตถุเอกสารเป็นตัวแทนของวัตถุเดียวกัน ตัวอย่างเช่น document.getElementsByTagName('body')[0] สอดคล้องกับ document.body
วิธีการวัตถุเอกสารใหม่ของ HTML5
เพื่อให้ง่ายต่อการรับองค์ประกอบสำหรับการดำเนินการ HTML5 จะเพิ่มวิธีการใหม่สองวิธีให้กับวัตถุเอกสาร ได้แก่ querySelector() และ querySelectorAll()
เนื่องจากทั้งสองวิธีนี้ใช้ในลักษณะเดียวกัน วิธีต่อไปนี้จึงใช้เมธอด document.querySelector() เป็นตัวอย่าง
ในการดำเนินการ DOM วัตถุองค์ประกอบยังมีวิธีการรับองค์ประกอบที่ระบุภายในองค์ประกอบ ทั้งสองวิธีที่ใช้กันทั่วไปคือ getElementsByClassName() และ getElementsByTagName() พวกมันถูกใช้ในลักษณะเดียวกับวิธีการที่มีชื่อเดียวกันในอ็อบเจ็กต์เอกสาร
นอกจากนี้ อ็อบเจ็กต์องค์ประกอบยังจัดเตรียมแอ็ตทริบิวต์ Children เพื่อรับองค์ประกอบลูกขององค์ประกอบที่ระบุ ตัวอย่างเช่น รับองค์ประกอบลูกของ ul ในตัวอย่างข้างต้น
วัตถุ HTMLCollection
ความแตกต่างระหว่างวัตถุ HTMLCollection และ NodeList:
เคล็ดลับ: สำหรับคอลเลกชันที่ส่งคืนโดยเมธอด getElementsByClassName() เมธอด getElementsByTagName() และแอ็ตทริบิวต์ลูก id และชื่อสามารถแปลงเป็นแอ็ตทริบิวต์ได้โดยอัตโนมัติ
2. เนื้อหาองค์ประกอบ
ใน JavaScript หากคุณต้องการดำเนินการกับเนื้อหาองค์ประกอบที่ได้รับ คุณสามารถใช้คุณสมบัติและวิธีการที่ได้รับจาก DOM
ยกตัวอย่าง
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>การดำเนินการเนื้อหาองค์ประกอบ</title>
</หัว>
<ร่างกาย>
<p id="กล่อง">
ย่อหน้าแรก...
<p>
ย่อหน้าที่สอง...
<a href="http://www.example.com">ที่สาม</a>
</p>
</p>
<สคริปต์>
กล่อง var = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</สคริปต์>
</ร่างกาย>
</html> โปรดทราบว่า
ปัญหาความเข้ากันได้ของเบราว์เซอร์อาจเกิดขึ้นเมื่อใช้แอตทริบิวต์ innerText ดังนั้นจึงขอแนะนำ
ให้ใช้ innerHTML เพื่อรับหรือตั้งค่าเนื้อหาข้อความขององค์ประกอบให้มากที่สุดในระหว่างการพัฒนา ในเวลาเดียวกัน มีความแตกต่างบางประการระหว่างแอตทริบิวต์ innerHTML และเมธอด document.write() ในการตั้งค่าเนื้อหา วิธีแรกทำหน้าที่กับองค์ประกอบที่ระบุ ในขณะที่วิธีหลังสร้างหน้าเอกสาร HTML ใหม่ทั้งหมด ดังนั้นผู้อ่านควรเลือกวิธีการใช้งานที่เหมาะสมตามความต้องการที่แท้จริงในระหว่างการพัฒนา
[กรณี] การเปลี่ยนขนาดกล่อง
แนวคิดในการนำโค้ดไปใช้ :
① เขียน HTML และกำหนดขนาดของ p
② ทำการเปลี่ยนแปลงขนาดกล่องตามจำนวนการคลิกของผู้ใช้
3 เมื่อจำนวนคลิกเป็นเลขคี่ กล่องจะมีขนาดใหญ่ขึ้น เมื่อจำนวนคลิกเป็นเลขคู่ กล่องจะเล็กลง
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<สไตล์>
.box{width:50px;height:50px;พื้นหลัง:#eee;margin:0 อัตโนมัติ;}
</สไตล์>
</หัว>
<ร่างกาย>
<p id="box" class="box"></p>
<สคริปต์>
กล่อง var = document.getElementById('box');
var i = 0; // บันทึกจำนวนครั้งที่ผู้ใช้คลิกบนกล่อง box.onclick = function() { // จัดการเหตุการณ์การคลิกของกล่อง ++i;
if (i % 2) { // จำนวนคลิกเป็นเลขคี่และมีขนาดใหญ่ขึ้น this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'ใหญ่';
} else { // จำนวนคลิกเป็นเลขคู่และมีขนาดเล็กลง this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'เล็ก';
-
-
</สคริปต์>
</ร่างกาย>
</html> 3. คุณลักษณะขององค์ประกอบ
ใน DOM เพื่ออำนวยความสะดวกให้กับ JavaScript เพื่อรับ แก้ไข และสำรวจคุณลักษณะที่เกี่ยวข้องขององค์ประกอบ HTML ที่ระบุ จะมีการจัดเตรียมคุณลักษณะการดำเนินการและวิธีการ
คุณสามารถใช้แอ็ตทริบิวต์แอ็ตทริบิวต์เพื่อรับแอ็ตทริบิวต์ทั้งหมดขององค์ประกอบ HTML รวมถึงจำนวนแอ็ตทริบิวต์ทั้งหมด ความยาว
ยกตัวอย่าง
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>การดำเนินการแอตทริบิวต์องค์ประกอบ</title>
<สไตล์>
.gray{พื้นหลัง: #CCC;}
#thick{แบบอักษรน้ำหนัก: โดดเด่นยิ่งขึ้น;}
</สไตล์>
</หัว>
<ร่างกาย>
<p>คำทดสอบ</p>
<สคริปต์>
// รับองค์ประกอบ p var ele = document.getElementsByTagName('p')[0];
// ① ส่งออกจำนวนแอตทริบิวต์ของ ele console.log ปัจจุบัน ('จำนวนคุณลักษณะก่อนการดำเนินการ: ' + ele.attributes.length);
// ② เพิ่มแอตทริบิวต์ให้กับ ele และตรวจสอบจำนวนแอตทริบิวต์ ele.setAttribute('align', 'center');
ele.setAttribute('ชื่อ', 'ข้อความทดสอบ');
ele.setAttribute('คลาส', 'สีเทา');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px สีเขียวทึบ;');
console.log('จำนวนแอตทริบิวต์หลังจากเพิ่มแอตทริบิวต์: ' + ele.attributes.length);
// 3 รับค่าแอตทริบิวต์สไตล์ของ ele console.log('รับค่าแอตทริบิวต์สไตล์:' + ele.getAttribute('style'));
// ④ ลบแอตทริบิวต์ style ของ ele และตรวจสอบแอตทริบิวต์ที่เหลือ ele.removeAttribute('style');
console.log('ดูคุณสมบัติทั้งหมด:');
สำหรับ (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
-
</สคริปต์>
</ร่างกาย>
</html> 4. การตรวจสอบสไตล์องค์ประกอบ
: แก้ไขสไตล์ผ่านการทำงานของแอตทริบิวต์องค์ประกอบ
ไวยากรณ์สไตล์องค์ประกอบ: style.Attribute name
ข้อกำหนด: คุณต้องลบเครื่องหมายยัติภังค์ "-" ในชื่อรูปแบบ CSS และใช้ตัวอักษรตัวแรกภาษาอังกฤษตัวที่สองเป็นตัวพิมพ์ใหญ่
ตัวอย่าง: หากต้องการตั้งค่าสีพื้นหลัง สีพื้นหลัง จะต้องเปลี่ยนเป็นสีพื้นหลังในการดำเนินการแอตทริบิวต์สไตล์
โปรดทราบว่า
รูปแบบลอยใน CSS ขัดแย้งกับคำสงวนของ JavaScript และเบราว์เซอร์ที่แตกต่างกันก็มีวิธีแก้ปัญหาที่แตกต่าง
กัน ตัวอย่างเช่น IE9-11, Chrome และ FireFox สามารถใช้ "float" และ "cssFloat" เบราว์เซอร์ Safari ใช้ "float" และ IE6~8 ใช้ "styleFloat"
คำถาม: องค์ประกอบสามารถมีตัวเลือกคลาสได้หลายตัว จะใช้งานรายการตัวเลือกระหว่างการพัฒนาได้อย่างไร
วิธีแก้ปัญหาดั้งเดิม: ใช้แอตทริบิวต์ className ของวัตถุองค์ประกอบเพื่อให้ได้ผลลัพธ์ที่ได้คือประเภทอักขระ จากนั้นประมวลผลสตริงตามสถานการณ์จริง
วิธีการจัดทำโดย HTML5: รายการตัวเลือกคลาสขององค์ประกอบ classList ใหม่ (อ่านอย่างเดียว)
ตัวอย่างเช่น: หากค่าคลาสขององค์ประกอบ p คือ "ชื่อ navlist ส่วนหัวของกล่อง" จะลบส่วนหัวได้อย่างไร
โซลูชัน
HTML5: องค์ประกอบ p object.classList.toggle("header");
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>การใช้งาน classList</title>
<สไตล์>
.bg{พื้นหลัง:#ccc;}
.strong{font-size:24px;color:red;}
.เรียบ{ความสูง:30px;ความกว้าง:120px;เส้นขอบรัศมี:10px;}
</สไตล์>
</หัว>
<ร่างกาย>
<ul>
<li> PHP </ li>
<li class="bg">จาวาสคริปต์</li>
<li>ซี++</li>
<li>ชวา</li>
</ul>
<script> // รับองค์ประกอบ li ตัวที่สอง var ele = document.getElementsByTagName('li')[1]; // หากไม่มีคลาสที่รัดกุมในองค์ประกอบ li ให้เพิ่ม if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); } // หากไม่มีคลาสที่ราบรื่นในองค์ประกอบ li ให้เพิ่มเข้าไป หากถูกลบ ele.classList.toggle('smooth'); log('เพิ่มและสลับหลังจากสไตล์: '); console.log(ele);
<สคริปต์>
ele.classList.remove('bg');
console.log('หลังจากลบ:');
console.log(เอเล);
</สคริปต์>
</ร่างกาย>
</html> นอกจากนี้ แอ็ตทริบิวต์ classList ยังมีวิธีดำเนินการและคุณสมบัติที่เกี่ยวข้องอื่นๆ อีกมากมาย
5. [กรณี] เอฟเฟกต์การสลับแถบแท็บ
แนวคิดในการนำโค้ดไปใช้ :
1 เขียน HTML เพื่อออกแบบโครงสร้างและรูปแบบของแถบแท็บ โดยที่คลาสเท่ากับปัจจุบันเพื่อระบุแท็บที่แสดงอยู่ในปัจจุบัน และค่าเริ่มต้นคือแท็บแรก
② รับแท็กทั้งหมดและเนื้อหาการแสดงผลที่สอดคล้องกับแท็ก
3. สำรวจและเพิ่มเหตุการณ์การวางเมาส์เหนือแต่ละป้ายกำกับ ในฟังก์ชันการประมวลผลเหตุการณ์ ให้สำรวจเนื้อหาที่แสดงทั้งหมดที่สอดคล้องกับป้ายกำกับ เมื่อเลื่อนเมาส์ไปเหนือป้ายกำกับ ให้เพิ่มกระแสผ่านเมธอด add() ของ classList มิฉะนั้นให้ใช้ ลบ () วิธีการย้ายออกจากปัจจุบัน
การใช้รหัส
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>เอฟเฟกต์การสลับแถบแท็บ</title>
<สไตล์>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-หัว{ความสูง:31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;พื้นหลัง:#206F96;line-height:30px;text- align:center;cursor:pointer;color:#fff;}
.tab-head .current{พื้นหลัง:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{เส้นขอบขวา:0;}
.tab-body-p{จอแสดงผล:ไม่มี;ระยะขอบ:20px 10px;}
.tab-body .current{จอแสดงผล:บล็อก;}
</สไตล์>
</หัว>
<ร่างกาย>
<p class="แท็บกล่อง">
<p class="แท็บหัว">
<p class="tab-head-p current">แท็บหนึ่ง</p>
<p class="tab-head-p">แท็บ 2</p>
<p class="tab-head-p">แท็บสาม</p>
<p class="tab-head-p tab-head-r">แท็บที่สี่</p>
</p>
<!--jkdjfk?-->
<p class="แท็บร่างกาย">
<p class="tab-body-p ปัจจุบัน"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="แท็บ-body-p"> 3 </p>
<p class="แท็บ-body-p"> 4 </p>
</p>
</p>
<สคริปต์>
// รับวัตถุองค์ประกอบแท็บทั้งหมดของแถบแท็บ var tabs = document.getElementsByClassName('tab-head-p');
// รับวัตถุเนื้อหาทั้งหมดของแถบแท็บ var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // สำรวจวัตถุองค์ประกอบ tabs[i].onmouseover = function() { // เพิ่มเหตุการณ์การเลื่อนเมาส์ไปที่วัตถุองค์ประกอบแท็กสำหรับ ( var i = 0; i < ps.length; ++i) { // สำรวจวัตถุองค์ประกอบเนื้อหาของแถบแท็บ if (tabs[i] == this) { // แสดงองค์ประกอบ li ps[i] ที่เมาส์ปัจจุบัน ได้เลื่อนไปเหนือ .classList.add('current');
แท็บ[i].classList.add('ปัจจุบัน');
} else { // ซ่อนองค์ประกอบ li อื่น ๆ ps[i].classList.remove('current');
แท็บ[i].classList.remove('ปัจจุบัน');
-
-
-
-
</สคริปต์>
</ร่างกาย>
</html> คำแนะนำที่เกี่ยวข้อง: กวดวิชาจาวาสคริปต์
ข้างต้นเป็นเนื้อหาโดยละเอียดของการดำเนินงานองค์ประกอบ HTML อธิบายรายละเอียดโดยตัวอย่าง JavaScript สำหรับข้อมูลเพิ่มเติม โปรดใส่ใจกับบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ php จีน!
