วิธีการเข้าถึงองค์ประกอบหลักโดยใช้คุณสมบัติ HTML DOM parentElement

Withi Kar Khea Thung Xngkh Prakxb Hlak Doy Chi Khunsmbati Html Dom Parentelement



ในขณะที่ผนวกฟังก์ชันต่างๆ ใน ​​Document Object Model (DOM) โดยใช้ JavaScript นักพัฒนามักจะจำเป็นต้องวิเคราะห์การเชื่อมโยงขององค์ประกอบ ซึ่งสามารถทำได้โดยการบันทึกองค์ประกอบหลักขององค์ประกอบเป้าหมาย ซึ่งปรับปรุงการไหลของโค้ดและการจัดรูปแบบของคุณลักษณะที่รวมอยู่ในไซต์

ภาพรวมเนื้อหา

คุณสมบัติ “parentElement” ใน JavaScript คืออะไร?

“ องค์ประกอบหลัก ” คุณสมบัติใน JavaScript ดึงองค์ประกอบที่เป็นพาเรนต์ขององค์ประกอบเป้าหมาย

วิธีการเข้าถึง / เรียกใช้องค์ประกอบหลักผ่านคุณสมบัติ HTML DOM parentElement

องค์ประกอบหลักสามารถเข้าถึงได้โดยใช้ HTML DOM “ องค์ประกอบหลัก ” ทรัพย์สินที่มี “ โหนดชื่อ ” คุณสมบัติหรือการดึงข้อมูลโหนดขององค์ประกอบหลักแทนผ่านทาง “ parentNode ' คุณสมบัติ.





ไวยากรณ์



โหนด องค์ประกอบหลัก

ค่าส่งคืน
คุณสมบัตินี้ดึงวัตถุองค์ประกอบที่แสดงถึงโหนดองค์ประกอบหลักของโหนดและให้ “ โมฆะ ” ถ้าโหนดไม่ประกอบด้วยพาเรนต์



ใช้วิธีการและคุณสมบัติทั่วไป

เอกสาร.querySelector() : เมธอดนี้รับองค์ประกอบแรกที่ตรงกับตัวเลือก CSS



ไวยากรณ์

เอกสาร. ตัวเลือกแบบสอบถาม ( นี้ )

ในรูปแบบนี้ “ นี้ ” หมายถึงตัวเลือก CSS หนึ่งตัวขึ้นไป



document.getElementById() : ส่งคืนองค์ประกอบที่มีรหัสที่ระบุ

ไวยากรณ์

เอกสาร. รับ ElementById ( รหัส )

ที่นี่, ' รหัส ” ระบุรหัสองค์ประกอบเป้าหมายที่จะดึงข้อมูล

ที่เลือกดัชนี : คุณสมบัตินี้จะเรียกดัชนีของตัวเลือกที่เลือกจากรายการแบบเลื่อนลง ที่ '-1' ตัวเลือกจะยกเลิกการเลือกตัวเลือกทั้งหมด

โหนดชื่อ : คุณสมบัตินี้ดึงชื่อของโหนด

เด็ก : คุณสมบัตินี้ส่งคืนองค์ประกอบลูกขององค์ประกอบเป็นคอลเลกชัน

ภายนอกHTML : คุณสมบัตินี้จะจัดสรรหรือดึงข้อมูลองค์ประกอบ HTML รวมถึงแอตทริบิวต์และแท็กเริ่มต้นและสิ้นสุด

parentNode : คุณสมบัติเฉพาะนี้จะดึงโหนดหลักขององค์ประกอบหรือโหนด

บันทึก : ความแตกต่างระหว่าง “ องค์ประกอบหลัก ' และ ' parentNode ” คุณสมบัติคือคุณสมบัติเดิม เช่น “parentElement” ให้ “ โมฆะ ” หากโหนดหลักไม่สะท้อนถึงโหนดองค์ประกอบ

ตัวอย่างที่ 1: การเข้าถึงองค์ประกอบหลักผ่านคุณสมบัติ 'parentElement' ใน JavaScript

ตัวอย่างนี้เรียกใช้องค์ประกอบหลักขององค์ประกอบและแสดงชื่อโหนด (หลัก) เมื่อคลิกปุ่ม

รหัส HTML


< html >
< ร่างกาย >
< h1 > คุณสมบัติ parentElement ใน JavaScript < / h1 >
< h2 > เลือกภาษา: < / h2 >
< เลือก ระดับ = 'องค์ประกอบ' >
< ตัวเลือก > หลาม < / ตัวเลือก >
< ตัวเลือก > ชวา < / ตัวเลือก >
< ตัวเลือก > จาวาสคริปต์ < / ตัวเลือก >
< / เลือก >
< ปุ่ม เมื่อคลิก = 'displayParent()' ระดับ = 'ปุ่ม' > แสดงองค์ประกอบหลักขององค์ประกอบ 'ตัวเลือก' < / ปุ่ม >
< กอง ระดับ = 'อุณหภูมิ' >< / กอง >< / ร่างกาย >
< html >

ในรหัสนี้:

  • ระบุที่ให้มา “

    ” และ “

    ” องค์ประกอบที่ประกอบด้วยส่วนหัวระดับหนึ่งและระดับสองตามลำดับ

  • หลังจากนั้นให้สร้าง “<เลือก>” องค์ประกอบที่แสดงโดยคลาสที่กำหนดซึ่งมีองค์ประกอบย่อยเพิ่มเติม เช่น “<ตัวเลือก>” .
  • ตอนนี้ให้สร้างปุ่มที่เกี่ยวข้องกับ ' เมื่อคลิก ” เหตุการณ์ที่เปลี่ยนเส้นทางไปยัง “displayParent()” ฟังก์ชั่นเมื่อคลิกปุ่ม
  • สุดท้ายระบุ “
    ” องค์ประกอบที่จะแสดงผลลัพธ์ เช่น องค์ประกอบหลักที่เข้าถึง

รหัสซีเอสเอส

<สไตล์ >
ร่างกาย {
จัดข้อความ : : ศูนย์ ;
สี : : #ffff ;
สีพื้นหลัง : : สีเทา ;
ความสูง : : 100% ;
}
.ปุ่ม {
ความสูง : : 2เรม ;
รัศมีชายแดน : : 2px ;
ความกว้าง : : 35% ;
ระยะขอบ : : 2เรม อัตโนมัติ ;
แสดง : : ปิดกั้น ;
สี : : #ba0b0b ;
เคอร์เซอร์ : : ตัวชี้ ;
}
.อุณหภูมิ {
ขนาดตัวอักษร : : 1.5 เรต ;
น้ำหนักแบบอักษร : : ตัวหนา ;
}
>

ในโค้ด CSS ข้างต้น:

  • จัดรูปแบบหน้าเว็บโดยรวมด้วยคุณสมบัติ 'การจัดแนวข้อความ', 'สีพื้นหลัง' ฯลฯ
  • ในทำนองเดียวกัน ใช้สไตล์กับปุ่มที่สร้างขึ้นผ่านคลาสโดยการปรับความสูง ความกว้าง การแสดง สี ฯลฯ
  • สุดท้ายจัดรูปแบบ “ กอง ” โดยอ้างอิงถึงชื่อคลาสที่จะแสดงองค์ประกอบหลักที่เข้าถึง

รหัสจาวาสคริปต์



< สคริปต์ >
การทำงาน แสดงผู้ปกครอง ( ) {
เคยเป็น รับ = เอกสาร. ตัวเลือกแบบสอบถาม ( '.องค์ประกอบ' ) ;
เคยเป็น นี้ = รับ . ตัวเลือก [ รับ . ที่เลือกดัชนี ] ;
เคยเป็น ผนวก = เอกสาร. ตัวเลือกแบบสอบถาม ( '.อุณหภูมิ' ) ;
ผนวก. ภายในHTML = 'องค์ประกอบหลักขององค์ประกอบตัวเลือกคือ ->' + นี้. องค์ประกอบหลัก . โหนดชื่อ ;
}
สคริปต์ >

ตามบรรทัดรหัสเหล่านี้:

  • กำหนดฟังก์ชัน “displayParent()” ที่เข้าถึงองค์ประกอบ “