getAttribute () กับคุณสมบัติของวัตถุ Element?

นิพจน์เหมือนElement.getAttribute("id")และElement.idส่งคืนสิ่งเดียวกัน

ควรใช้อันไหนเมื่อเราต้องการคุณสมบัติของวัตถุ HTMLElement

มีผู้ใดปัญหาเบราว์เซอร์ข้ามด้วยวิธีการเหล่านี้เช่นgetAttribute()และsetAttribute()?

หรือผลกระทบใด ๆ ต่อประสิทธิภาพระหว่างการเข้าถึงคุณสมบัติของวัตถุโดยตรงกับการใช้วิธีแอตทริบิวต์เหล่านี้?

getAttributeดึงแอตทริบิวต์ขององค์ประกอบ DOM ในขณะที่el.idดึงคุณสมบัติขององค์ประกอบ DOM นี้ พวกเขาไม่เหมือนกัน

โดยส่วนใหญ่คุณสมบัติ DOM จะซิงโครไนซ์กับแอตทริบิวต์

อย่างไรก็ตามการประสานไม่ได้รับประกันค่าเดียวกัน ตัวอย่างคลาสสิกอยู่ระหว่างel.hrefและel.getAttribute('href')สำหรับองค์ประกอบจุดยึด

ตัวอย่างเช่น:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

ลักษณะการทำงานนี้เกิดขึ้นเนื่องจากตามW3Cคุณสมบัติ href ต้องเป็นลิงก์ที่มีรูปแบบดี เบราว์เซอร์ส่วนใหญ่เคารพมาตรฐานนี้ (เดาว่าไม่มีใคร)

มีกรณีอื่นเป็นinputของcheckedสถานที่ให้บริการ คุณสมบัติ DOM จะส่งกลับtrueหรือfalseในขณะที่แอตทริบิวต์ส่งคืนสตริง"checked"หรือสตริงว่าง

และจากนั้นก็มีคุณสมบัติบางอย่างที่ตรงกันทางเดียวเท่านั้น ตัวอย่างที่ดีที่สุดคือvalueคุณสมบัติของinputองค์ประกอบ การเปลี่ยนค่าผ่านคุณสมบัติ DOM จะไม่เปลี่ยนแอตทริบิวต์ (แก้ไข: ตรวจสอบความคิดเห็นแรกเพื่อความแม่นยำยิ่งขึ้น)

ด้วยเหตุผลเหล่านี้ฉันขอแนะนำให้คุณใช้คุณสมบัติ DOM ต่อไปไม่ใช่แอตทริบิวต์เนื่องจากพฤติกรรมของพวกเขาแตกต่างกันระหว่างเบราว์เซอร์

ในความเป็นจริงมีเพียงสองกรณีที่คุณต้องใช้แอตทริบิวต์:

1. แอตทริบิวต์ HTML ที่กำหนดเองเนื่องจากไม่ได้ซิงค์กับคุณสมบัติ DOM
2. ในการเข้าถึงแอตทริบิวต์ HTML ในตัวซึ่งไม่ได้ซิงค์จากคุณสมบัติและคุณแน่ใจว่าต้องการแอตทริบิวต์ (เช่นต้นฉบับvalueของinputองค์ประกอบ)

หากคุณต้องการคำอธิบายโดยละเอียดฉันขอแนะนำให้คุณอ่านหน้านี้ คุณจะใช้เวลาไม่กี่นาทีเท่านั้น แต่คุณจะรู้สึกยินดีกับข้อมูล (ซึ่งฉันสรุปไว้ที่นี่)

getAttribute('attribute') โดยปกติจะส่งคืนค่าแอตทริบิวต์เป็นสตริงตามที่กำหนดไว้ในซอร์ส HTML ของเพจ

อย่างไรก็ตามelement.attributeสามารถส่งคืนค่าที่เป็นมาตรฐานหรือจากการคำนวณของแอตทริบิวต์ ตัวอย่าง:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href จะมีURL แบบเต็ม
• <input type="checkbox" checked>
  • input.checked จะเป็นจริง (บูลีน)
• <input type="checkbox" checked="bleh">
  • input.checked จะเป็นจริง (บูลีน)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img ความกว้างจะเป็น 0 (ตัวเลข) ก่อนโหลดรูปภาพ
  • img ความกว้างจะเป็น 64 (ตัวเลข) เมื่อโหลดภาพ (หรือไม่กี่ไบต์แรก)
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img ความกว้างจะคำนวณ 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img ความกว้างจะเท่ากับ 50 (ตัวเลข)
• <div style='background: lime;'></div>
  • div.style จะเป็นวัตถุ

ตามการทดสอบ jsPerf getAttributeนี้ช้ากว่าidคุณสมบัติ

ปล

คำสั่งทั้งสองผิดปกติมากพอทำงานได้แย่มากบน IE8 (เมื่อเทียบกับเบราว์เซอร์อื่น ๆ )

ใช้คุณสมบัติเสมอเว้นแต่คุณจะมีเหตุผลเฉพาะที่จะไม่ทำ

• getAttribute()และsetAttribute()เสียใน IE รุ่นเก่า (และโหมดความเข้ากันได้ในรุ่นที่ใหม่กว่า)
• คุณสมบัติสะดวกกว่า (โดยเฉพาะคุณสมบัติที่สอดคล้องกับคุณสมบัติบูลีน)

มีข้อยกเว้นบางประการ :

• การเข้าถึงคุณลักษณะของ<form>องค์ประกอบ
• การเข้าถึงแอตทริบิวต์ที่กำหนดเอง (แม้ว่าฉันจะไม่แนะนำให้ใช้แอตทริบิวต์ที่กำหนดเองเลยก็ตาม)

ฉันเคยเขียนเกี่ยวกับเรื่องนี้สองสามครั้งใน SO:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

.idบันทึกค่าใช้จ่ายในการเรียกฟังก์ชัน (ซึ่งเล็กมาก แต่คุณถาม)

ลองใช้ตัวอย่างด้านล่างเพื่อทำความเข้าใจสิ่งนี้อย่างสมบูรณ์ สำหรับ DIV ด้านล่าง

<div class="myclass"></div>

Element.getAttribute('class')จะกลับมาmyclassแต่คุณต้องใช้งานElement.classNameซึ่งจะดึงมันออกมาจากสถานที่ให้บริการ DOM

พื้นที่หนึ่งที่สร้างความแตกต่างอย่างมากคือการจัดแต่งทรงผม css ตามคุณลักษณะ

พิจารณาสิ่งต่อไปนี้:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

div ที่มีชุดคุณสมบัติที่กำหนดเองโดยตรงไม่ได้สะท้อนถึงค่าของแอตทริบิวต์และไม่ได้ถูกเลือกโดยตัวเลือกแอตทริบิวต์ของเรา ( div[custom]) ใน css

อย่างไรก็ตาม div ที่มีชุดแอตทริบิวต์ที่กำหนดเองโดยใช้setAttributeสามารถเลือกได้โดยใช้ตัวเลือกแอตทริบิวต์ css และจัดรูปแบบตามนั้น