คู่มือนี้จะแสดงวิธีเข้าถึงและจัดการคุณสมบัติ “textContent” องค์ประกอบ HTML DOM ใน JavaScript
ขั้นแรก ให้ดูที่พื้นฐานของคุณสมบัติ HTML DOM “textContent”
คุณสมบัติ HTML DOM “textContent” ใน JavaScript คืออะไร
“ เนื้อหาข้อความ ” เป็นคุณสมบัติในตัวที่ตั้งค่า ดึงข้อมูล และแก้ไขข้อความขององค์ประกอบหรือโหนดที่ระบุ รวมถึงองค์ประกอบที่สืบทอดทั้งหมด องค์ประกอบสืบทอดคือองค์ประกอบลูก เช่น , , และอื่นๆ อีกมากมายที่ใช้เพื่อการจัดรูปแบบ ในขณะที่ตั้งค่าข้อความโดยใช้คุณสมบัติ 'textContent' ผู้สืบทอดขององค์ประกอบเป้าหมายจะถูกแทนที่ด้วยข้อความใหม่โดยสิ้นเชิง
ไวยากรณ์ (ตั้งค่าเนื้อหาข้อความ)
ไวยากรณ์พื้นฐานเพื่อตั้งค่าข้อความขององค์ประกอบ/โหนดโดยใช้เครื่องหมาย “ เนื้อหาข้อความ ” คุณสมบัติเขียนไว้ด้านล่าง:
องค์ประกอบ. เนื้อหาข้อความ = ข้อความ | โหนด เนื้อหาข้อความ = ข้อความ
ไวยากรณ์ข้างต้นเป็นไปตามที่ต้องการ “ ข้อความ ” เป็นค่าที่ผู้ใช้ต้องการตั้งค่าสำหรับองค์ประกอบหรือโหนด
ไวยากรณ์ (รับเนื้อหาข้อความ)
ไวยากรณ์ทั่วไปเพื่อส่งคืนข้อความขององค์ประกอบหรือโหนดผ่านทาง “ เนื้อหาข้อความ ” ทรัพย์สินระบุไว้ที่นี่:
องค์ประกอบ. เนื้อหาข้อความ | โหนด เนื้อหาข้อความมูลค่าส่งคืน: “ เนื้อหาข้อความ ” คุณสมบัติส่งคืน “ ข้อความ ” ขององค์ประกอบหรือโหนดที่มีการเว้นวรรค แต่ไม่มีแท็ก HTML ภายใน
ตอนนี้ใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นเพื่อเข้าถึงและจัดการคุณสมบัติ 'textContent'
วิธีการเข้าถึงและจัดการคุณสมบัติ 'textContent' องค์ประกอบ HTML DOM ใน JavaScript
คล้ายกับคุณสมบัติ “innerHTML” และ “innerText” ตัว “ เนื้อหาข้อความ คุณสมบัติ ” ยังช่วยให้ผู้ใช้ตั้งค่า เข้าถึง และแก้ไขข้อความขององค์ประกอบที่ต้องการได้อย่างง่ายดาย ส่วนนี้จะดำเนินการทั้งหมดเหล่านี้ในองค์ประกอบโดยใช้ตัวอย่างที่ระบุไว้ด้านล่าง
ตัวอย่างที่ 1: การใช้คุณสมบัติ 'textContent' เพื่อเข้าถึงองค์ประกอบ/ข้อความโหนด
ตัวอย่างนี้ใช้คุณสมบัติ 'textContent' เพื่อส่งคืนข้อความขององค์ประกอบหรือโหนดเฉพาะรวมถึงลูกทั้งหมด
รหัส HTML
< กอง รหัส = 'มายดิฟ' เมาส์โอเวอร์ = 'getText()' สไตล์ = 'เส้นขอบ: 3px สีดำทึบ; ความกว้าง: 400px; การขยาย: 5px 5px; ระยะขอบ: อัตโนมัติ;' >< h1 > หัวเรื่องแรก < / h1 >
< h2 > หัวเรื่องที่สอง < / h2 >
< h3 > หัวเรื่องที่สาม < / h3 >
< h4 > หัวเรื่องที่สี่ < / h4 >
< h5 > หัวข้อที่ห้า < / h5 >
< h6 > หัวเรื่องที่หก < / h6 >
< / กอง >
ในบรรทัดโค้ด HTML ข้างต้น:
- “ แท็ก ' ที่มีรหัส 'myDiv' จะสร้างองค์ประกอบ div ที่จัดสไตล์ด้วยคุณสมบัติดังต่อไปนี้ เส้นขอบ ความกว้าง ช่องว่างภายใน (บนและล่าง ซ้ายและขวา) และระยะขอบ นอกจากนี้ยังแนบ ' เมาส์โอเวอร์ ” เหตุการณ์ที่ก่อให้เกิด “ รับข้อความ() ” จะทำงานเมื่อผู้ใช้เลื่อนเมาส์ไว้เหนือมัน
- ภายใน div แท็กส่วนหัวที่ระบุทั้งหมด (h1,h2,h3,h4,h5 และ h6) จะแทรกองค์ประกอบส่วนหัวตามระดับที่ระบุ
รหัสจาวาสคริปต์
< สคริปต์ >
ฟังก์ชัน getText ( ) {
เป็นองค์ประกอบ = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
เตือน ( องค์ประกอบ. เนื้อหาข้อความ ) ;
}
สคริปต์ >ในบล็อกโค้ด JavaScript ที่เขียนข้างต้น:
- กำหนดฟังก์ชันชื่อ “ รับข้อความ() '.
- ภายในฟังก์ชันนี้ ตัวแปร “elem” จะใช้ “ getElementById() ” วิธีการเข้าถึงองค์ประกอบ div ผ่าน id
- “ เตือน() ” วิธีการสร้างกล่องแจ้งเตือนที่ใช้ “ เนื้อหาข้อความ ” คุณสมบัติเพื่อส่งคืนข้อความของ div ระดับบนสุดพร้อมกับผู้อยู่ในอุปการะทั้งหมด
เอาท์พุต
ผลลัพธ์ด้านล่างนี้จะแสดงกล่องแจ้งเตือนที่แสดงเนื้อหาข้อความขององค์ประกอบ div:
ตัวอย่างที่ 2: การใช้คุณสมบัติ 'textContent' เพื่อแทนที่เนื้อหาข้อความองค์ประกอบรวมถึงรายการสืบทอด
ตัวอย่างนี้แสดงให้เห็นว่าคุณสมบัติ 'textContent' แทนที่ลูกทั้งหมดขององค์ประกอบในขณะที่แก้ไขข้อความได้อย่างไร
รหัส HTML
< ศูนย์ >
< รหัส h1 = 'หัวของฉัน' เมื่อคลิก = 'แก้ไขข้อความ()' >< ข > นี้ ข > เป็น < ช่วง > หัวเรื่อง < ช่วง > < ฉัน > องค์ประกอบ ฉัน > h1 >
ศูนย์ >ในบรรทัดโค้ดที่ระบุไว้ข้างต้น:
- “ ” แท็กเพิ่มองค์ประกอบส่วนหัวของระดับ 1 พร้อมกับแนบมาด้วย “ เมื่อคลิก ” เหตุการณ์ที่ก่อให้เกิด “ แก้ไขข้อความ() ” ฟังก์ชั่นเมื่อผู้ใช้คลิกที่มัน
- องค์ประกอบส่วนหัวยังมี ' <ข> , ' <ช่วง> ', และ ' ” แท็กเป็นลูกหลาน แท็ก “ ” ใช้เพื่อทำให้สตริงที่ล้อมรอบเป็นตัวหนา แท็ก “” ที่ไม่มีคุณสมบัติการจัดรูปแบบใดๆ จะถูกนำมาใช้เพื่อไม่ใช้การกำหนดสไตล์กับสตริงที่กำหนด และใช้แท็ก “ ” เพื่อแสดง สตริงที่ระบุเป็นตัวเอียง
รหัสจาวาสคริปต์
< สคริปต์ >
ที่ไหน h1 = เอกสาร. รับ ElementById ( 'หัวของฉัน' ) ;
คอนโซล บันทึก ( h1 ) ;
ฟังก์ชั่นแก้ไขข้อความ ( ) {
h1. เนื้อหาข้อความ = 'ยินดีต้อนรับสู่ Linuxhint!' ;
คอนโซล บันทึก ( h1 )
}
สคริปต์ >ในโค้ด JavaScript ข้างต้น:
- ตัวแปร “h1” ใช้ “ document.getElementById() ” วิธีการเข้าถึงองค์ประกอบส่วนหัวผ่านรหัสที่กำหนด
- “ console.log() ” วิธีการแสดงองค์ประกอบส่วนหัวที่เข้าถึงได้บนคอนโซลก่อนที่จะเปลี่ยนเนื้อหา
- ฟังก์ชั่นชื่อ “ แก้ไขข้อความ() ” ใช้ “ เนื้อหาข้อความ ” คุณสมบัติในการแก้ไขข้อความขององค์ประกอบส่วนหัวที่ดึงมา
- เมธอด “console.log()” สุดท้ายจะแสดงค่า “h1” อีกครั้งหลังการแก้ไข
เอาท์พุต
คอนโซลแสดงให้เห็นอย่างชัดเจนว่าลูกทั้งหมดขององค์ประกอบส่วนหัวที่กำหนดได้ถูกแทนที่ด้วยข้อความที่ระบุใหม่เมื่อคลิกที่มัน:
ตัวอย่างที่ 3: การใช้คุณสมบัติ 'textContent' เพื่อแก้ไขข้อความของลูกขององค์ประกอบ
ตัวอย่างนี้ใช้คุณสมบัติ 'textContent' เพื่อแก้ไขข้อความขององค์ประกอบย่อยเฉพาะ
รหัส HTML
< กอง รหัส = 'มายดิฟ' สไตล์ = 'เส้นขอบ: 3px สีดำทึบ; ความกว้าง: 400px; การขยาย: 5px 5px; ระยะขอบ: อัตโนมัติ;' >
< ศูนย์ >
< ปุ่ม รหัส = 'บีทีเอ็น' เมาส์โอเวอร์ = 'ข้อความเปลี่ยนแปลง()' > ปุ่มเก่า < / ปุ่ม >
< / ศูนย์ >
< / กอง >ในสถานการณ์สมมตินี้:
- องค์ประกอบ 'div' มีองค์ประกอบ 'ปุ่ม' ที่สร้างขึ้นด้วยความช่วยเหลือของ ' <บีทีเอ็น> แท็ก”
- องค์ประกอบปุ่มยังมีรหัสที่กำหนดและ ' เมาส์โอเวอร์ ” เหตุการณ์ที่เรียกว่า “ เปลี่ยนข้อความ() ” จะทำงานเมื่อวางเมาส์ไว้เหนือมัน
รหัสจาวาสคริปต์
< สคริปต์ >
เป็น parentElement = เอกสาร. รับ ElementById ( 'มายดิฟ' ) ;
เป้าหมายที่หลากหลาย = เอกสาร. รับ ElementById ( 'บีทีเอ็น' ) ;
คือ find_me = องค์ประกอบหลัก ประกอบด้วย ( เป้า ) ;
ถ้า ( องค์ประกอบหลัก ประกอบด้วย ( เป้า ) == จริง ) {
คอนโซล บันทึก ( หาฉัน ) ;
ฟังก์ชั่นเปลี่ยนข้อความ ( ) {
เป้า. เนื้อหาข้อความ = 'ปุ่มใหม่' ;
}
} อื่น {
คอนโซล บันทึก ( 'ไม่ได้อยู่' )
}
สคริปต์ >ในข้อมูลโค้ดข้างต้น:
- ตัวแปร 'parentElement' ใช้ ' getElementById() ” วิธีการเข้าถึงองค์ประกอบ div หลัก ตัวแปร 'เป้าหมาย' ยังใช้วิธี 'getElementById()' เพื่อดึงองค์ประกอบปุ่มที่เพิ่มโดยใช้รหัสของมัน
- ตัวแปร “find_me” ใช้ “ ประกอบด้วย() ” วิธีการตรวจสอบว่าองค์ประกอบปุ่มเป้าหมายเป็นลูกของ div หรือไม่ วิธีการนี้จะกลับมา” จริง ” สำหรับ “ใช่” มิฉะนั้น “เท็จ”
- “ ถ้า-อย่างอื่น ” คำสั่งกำหนดบล็อกรหัส
- หากองค์ประกอบเป้าหมายเป็นองค์ประกอบย่อยขององค์ประกอบหลัก ดังนั้น “ เปลี่ยนข้อความ() ” ฟังก์ชั่นจะเปลี่ยนข้อความผ่านทาง “ เนื้อหาข้อความ ' คุณสมบัติ. มิฉะนั้น บล็อกโค้ด 'else' จะดำเนินการเพื่อแสดงข้อความที่ระบุโดยใช้เครื่องหมาย ' console.log() ' วิธี.
เอาท์พุต
คอนโซลแสดง ' จริง ” ค่าบูลีนที่ตรวจสอบว่าองค์ประกอบปุ่มเป็นลูกของ div ที่กำหนด จากนั้นข้อความจะเปลี่ยนเมื่อวางเมาส์ไว้เหนือ:
ความแตกต่างระหว่างคุณสมบัติ textContent, innerText และ innerHTML?
โดยทั่วไปแล้ว “ เนื้อหาข้อความ , ' ข้อความภายใน ', และ ' ภายในHTML คุณสมบัติ ” จัดการกับข้อความขององค์ประกอบหรือโหนดในการตั้งค่าและรับมัน อย่างไรก็ตาม คุณสมบัติเหล่านี้จะแตกต่างกันขึ้นอยู่กับปัจจัยบางประการ ในส่วนนี้จะเน้นย้ำถึงความแตกต่างที่สำคัญระหว่างทั้งหมด:
เงื่อนไข 'เนื้อหาข้อความ' 'ข้อความภายใน' “ภายในHTML” ประเภทการส่งคืน มันส่งคืนข้อความขององค์ประกอบรวมถึงลูกทั้งหมด (แท็กการจัดรูปแบบ) ข้อความที่ซ่อน CSS และช่องว่าง มันไม่ส่งคืนแท็ก HTML ขององค์ประกอบ มันส่งคืนเนื้อหาข้อความขององค์ประกอบ HTML เป้าหมายพร้อมกับลูกทั้งหมด (แท็กการจัดรูปแบบ) ไม่ส่งคืนช่องว่าง ข้อความที่ซ่อน CSS และแท็ก HTML ยกเว้น