innerText กับ innerHTML เทียบกับ label vs text vs textContent vs outerText

124

ฉันมีรายการแบบเลื่อนลงซึ่งสร้างโดย Javascript

ในขณะที่กำลังตัดสินใจว่าอะไรควรเป็นค่าเริ่มต้นที่จะแสดงบนโหลดฉันตระหนักว่าคุณสมบัติต่อไปนี้แสดงค่าเดียวกันทุกประการ:

innerText
innerHtml
label
text
textContent
outerText

งานวิจัยของฉันเองแสดงให้เห็นถึงการทดสอบการทำเครื่องหมายหรือการเปรียบเทียบระหว่างสองสามข้อ แต่ไม่ใช่ทั้งหมด

ฉันสามารถใช้สามัญสำนึกของตัวเองและเลือก 1 หรืออย่างอื่นเนื่องจากให้ผลลัพธ์เหมือนกัน แต่ฉันกังวลว่านี่จะไม่ใช่ความคิดที่ดีหากข้อมูลมีการเปลี่ยนแปลง

สิ่งที่ฉันค้นพบคือ:

innerText จะแสดงค่าตามที่เป็นอยู่และละเว้นการจัดรูปแบบ HTML ที่อาจรวมอยู่ด้วย
innerHTML จะแสดงค่าและใช้การจัดรูปแบบ HTML ใด ๆ
labelดูเหมือนจะเหมือนกับinnerTextดังนั้นฉันจึงไม่เห็นความแตกต่าง
textดูเหมือนจะเหมือนกับinnerTextแต่เวอร์ชันชวเลข jQuery
textContentดูเหมือนinnerTextแต่จะจัดรูปแบบไว้ (เช่น\n)
outerText ดูเหมือนจะเหมือนกับ innerText

งานวิจัยของฉันสามารถพาฉันไปได้ไกลที่สุดเท่าที่ฉันจะทำได้เพียงทดสอบสิ่งที่ฉันคิดหรืออ่านสิ่งที่เผยแพร่เท่านั้นมีใครยืนยันได้หรือไม่ว่างานวิจัยของฉันถูกต้องหรือไม่และมีอะไรพิเศษเกี่ยวกับlabelและouterTextหรือไม่

javascript html dom

— MyDaftQuestions
แหล่งที่มา

11

สาเหตุหนึ่งที่มีหลายวิธีในการเข้าถึงข้อความเป็นเพราะความแตกต่างระหว่างเบราว์เซอร์ หากคุณใช้ jQuery อยู่แล้วคุณควรใช้.text()เพื่อรับเนื้อหาข้อความขององค์ประกอบเนื่องจากจะให้การสนับสนุนข้ามเบราว์เซอร์สูงสุด

— JLRishe

2

developer.mozilla.org/en-US/docs/Web/API/…

— JLRishe

101

จากMDN :

Internet Explorer เปิดตัว element.innerText ความตั้งใจนั้นค่อนข้างเหมือนกับ [เป็น textContent] โดยมีข้อแตกต่างอยู่สองประการ:

โปรดทราบว่าในขณะที่ textContent รับเนื้อหาขององค์ประกอบทั้งหมดรวมถึง<script>และ<style>องค์ประกอบคุณสมบัติเฉพาะของ IE ส่วนใหญ่ innerText ไม่ได้

innerText ยังตระหนักถึงสไตล์และจะไม่ส่งคืนข้อความขององค์ประกอบที่ซ่อนอยู่ในขณะที่ textContent จะ

เนื่องจาก innerText ทราบถึงสไตล์ CSS มันจะทริกเกอร์ reflow ในขณะที่ textContent จะไม่

ดังนั้นinnerTextจะไม่รวมข้อความที่ CSS ซ่อนไว้ แต่textContentจะ

innerHTML ส่งคืน HTML ตามที่ระบุชื่อ บ่อยครั้งในการดึงข้อมูลหรือเขียนข้อความภายในองค์ประกอบผู้คนใช้ innerHTML ควรใช้ textContent แทน เนื่องจากข้อความไม่ได้แยกวิเคราะห์เป็น HTML จึงมีแนวโน้มที่จะมีประสิทธิภาพที่ดีกว่า ยิ่งไปกว่านั้นสิ่งนี้หลีกเลี่ยงเวกเตอร์การโจมตี XSS

ในกรณีที่คุณพลาดที่ให้ฉันทำซ้ำได้อย่างชัดเจนมากขึ้น: ทำไม่ได้ใช้.innerHTMLเฉพาะถ้าคุณตั้งใจที่จะแทรก HTML ภายในองค์ประกอบและมีการดำเนินการมาตรการป้องกันที่จำเป็นเพื่อให้แน่ใจว่า HTML ที่คุณจะใส่ไม่สามารถมีเนื้อหาที่เป็นอันตราย ถ้าคุณเพียงต้องการที่จะแทรกข้อความ, การใช้งาน.textContentหรือถ้าคุณต้องการที่จะสนับสนุน IE8 และก่อนหน้านี้ใช้ตรวจสอบคุณสมบัติเพื่อปิดระหว่างและ.textContent.innerText

สาเหตุหลักที่มีคุณสมบัติที่แตกต่างกันมากมายคือเบราว์เซอร์ที่แตกต่างกัน แต่เดิมมีชื่อที่แตกต่างกันสำหรับคุณสมบัติเหล่านี้และยังไม่มีการรองรับข้ามเบราว์เซอร์ที่สมบูรณ์สำหรับทุกคุณสมบัติ หากคุณใช้ jQuery คุณควรปฏิบัติตาม.text()เนื่องจากออกแบบมาเพื่อลดความแตกต่างข้ามเบราว์เซอร์ *

สำหรับบางส่วน: outerHTMLโดยพื้นฐานแล้วจะเหมือนกับinnerHTMLยกเว้นว่าจะมีแท็กเริ่มต้นและแท็กสิ้นสุดขององค์ประกอบที่เป็นของ ฉันไม่สามารถดูเหมือนจะหาคำอธิบายมากouterTextที่ทุกคน ฉันคิดว่านั่นอาจเป็นทรัพย์สินมรดกที่คลุมเครือและควรหลีกเลี่ยง

— JLRishe
แหล่งที่มา

3

ปัญหาเกี่ยวกับคำแนะนำของหมอนั้นin order to retrieve or write text within an element, people use innerHTML. textContent should be used insteadเป็นที่textContentไม่สนับสนุน IE 8 ซึ่งยังคงอยู่ในการใช้อย่างแพร่หลายเป็นธรรมเนื่องจากว่าเป็นรุ่นที่มาพร้อมกับ Windows 7 และ Firefox ไม่สนับสนุนinnerText ดังนั้นแม้ว่าinnerHTMLจะไม่เหมาะกับวัตถุประสงค์ แต่ก็มีความน่าเชื่อถือในการข้ามเบราว์เซอร์ที่ดีกว่า

— Adi Inbar

5

@AdiInbar หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าสิ่งที่ต้องทำคือใช้การตรวจจับคุณสมบัติเพื่อปิดระหว่าง.textContentและ.innerTextหรือใช้บางอย่างเช่น jQuery ที่ช่วยลดความแตกต่างของเบราว์เซอร์เหล่านี้

— JLRishe

1

ขอบคุณมากสำหรับคำอธิบายนี้! ฉันใช้ flot เพื่อแสดงแผนภูมิและไม่แสดงใน ff เพราะ ff ใช้ textContent Innertext ไม่ได้กำหนดไว้เสมอเมื่อฉันใช้ tickFormatter

— Rainhider

1

@bvl คุณไม่สามารถใช้textContentกับแท็ก HTML หากคุณต้องการแทรก HTML คุณจะใช้.innerHTMLหรือสร้างโหนด HTML โดยใช้document.createElement()ฯลฯ

— JLRishe

4

ความปลอดภัย:การใช้innerHTML(ไม่เหมือนtextContent) อย่างไม่ถูกต้องสามารถเปิดประตูสำหรับการโจมตี XSS (Cross-Site Scripting) ในแอปพลิเคชันของคุณ หากเนื้อหาที่ถูกแทรกลงใน DOM ผ่านinnerHTMLไม่น่าเชื่อถืออย่างสมบูรณ์ผู้โจมตีอาจใช้<script>องค์ประกอบเพื่อจี้แอปพลิเคชันของคุณที่ตรวจสอบสิทธิ์ภายใต้ระดับการอนุญาตของผู้ใช้หรือผู้ดูแลระบบ การโจมตีทั้งหมดรวมถึงการโจมตีแปลกมองเช่น<img src="x.x" onerror="alert('Hacked!');"/>และมากมายของคน sneakier จะถูกทำลายได้อย่างมีประสิทธิภาพโดยเพียงแค่ใช้ในบริบทนี้แทนที่จะเป็นอันตรายtextContent innerHTML

— ChaseMoskal

8

รายการแบบหล่นลงประกอบด้วยชุดของOptionวัตถุดังนั้นคุณควรใช้.textคุณสมบัติเพื่อตรวจสอบการแสดงข้อความขององค์ประกอบเช่น

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.textดูเหมือนจะเหมือนกับ.innerTextแต่เวอร์ชันชวเลขของ JQuery

ไม่ถูกต้อง $(element).text()เป็นเวอร์ชัน jQuery ในขณะที่เวอร์ชันelement.textการเข้าถึงคุณสมบัติ

— ช่องเสียบ
แหล่งที่มา

5

ภาคผนวกของ JLR เป็นคำตอบที่ยอดเยี่ยมอย่างอื่น:

เหตุผล innerText และ outerText ทั้งสองมีไว้สำหรับสมมาตรกับ innerHTML และ outerHTML สิ่งนี้มีความสำคัญเมื่อคุณมอบหมายให้กับคุณสมบัติ

สมมติว่าคุณมีองค์ประกอบที่eมีโค้ด HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

— ไม่ระบุชื่อ
แหล่งที่มา

2

textContent จะไม่จัดรูปแบบ (\ n)

— Hariharan
แหล่งที่มา

1

ดูความเข้ากันได้ของเบราว์เซอร์http://www.quirksmode.org/dom/html/หากคุณกำหนดเป้าหมายเบราว์เซอร์เฉพาะ เพราะดูเหมือนว่าพวกเขาทุกคนมีวิธีการทำสิ่งต่างๆเป็นของตัวเอง นั่นคือเหตุผลว่าทำไมจึงควรใช้ JQuery .text () ( http://api.jquery.com/text/ ) หากคุณไม่ต้องการเล่นซอ

— nywooz
แหล่งที่มา

0

textและlabelลบช่องว่างเพิ่มเติม ฉันได้รับผลลัพธ์เหล่านี้เมื่อสอบถามตัวเลือกในเมนูแบบเลื่อนลง:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"

— เจย์เจ
แหล่งที่มา