วิธี getAttribute ()
จนถึงตอนนี้เราได้แนะนำสองวิธีในการดึงโหนดองค์ประกอบเฉพาะ: หนึ่งคือการใช้วิธี getElementById () และอีกวิธีหนึ่งคือการใช้วิธี getElementsByTagname () หลังจากค้นหาองค์ประกอบนั้นเราสามารถใช้วิธี getAttribute () เพื่อสอบถามค่าของแอตทริบิวต์ต่างๆ
วิธี getAttribute () เป็นฟังก์ชัน มีพารามิเตอร์เดียวเท่านั้น - ชื่อของแอตทริบิวต์ที่คุณวางแผนจะสอบถาม:
Object.getAttribute (แอตทริบิวต์)
อย่างไรก็ตามวิธีการ getAttribute () ไม่สามารถเรียกผ่านวัตถุเอกสารซึ่งแตกต่างจากวิธีอื่น ๆ ที่เราได้แนะนำมาก่อน เราสามารถเรียกมันผ่านวัตถุโหนดองค์ประกอบเดียวเท่านั้น
ตัวอย่างเช่นคุณสามารถรวมเข้ากับวิธี getElementsByTagname () เพื่อสอบถามแอตทริบิวต์ชื่อของแต่ละองค์ประกอบ <p> ดังที่แสดงด้านล่าง:
var text = document.getElementsByTagname ("P") สำหรับ (var i = 0; i <text.length; i ++) {แจ้งเตือน (ข้อความ [i] .getAttribute ("title"));}หากคุณแทรกรหัสด้านบนที่ส่วนท้ายของเอกสารตัวอย่าง "รายการช้อปปิ้ง" ที่ให้ไว้ก่อนหน้านี้และโหลดหน้าใหม่ในเว็บเบราว์เซอร์กล่องโต้ตอบดัดแปลงพร้อมข้อความข้อความ "การเตือนความจำอ่อนโยน" จะปรากฏขึ้นบนหน้าจอ
มีเพียงหนึ่งองค์ประกอบ <p> ที่มีแอตทริบิวต์ชื่อเรื่องในเอกสารรายการช้อปปิ้ง หากเอกสารมีองค์ประกอบ <p> หนึ่งองค์ประกอบขึ้นไปโดยไม่มีแอตทริบิวต์ชื่อเรื่องการโทร GetAttribute ("ชื่อ") ที่สอดคล้องกันจะกลับมาเป็นค่า NULL NULL เป็นค่า NULL ในภาษา JavaScript และความหมายของมันคือ "สิ่งที่คุณพูดไม่มีอยู่" หากคุณต้องการตรวจสอบสิ่งนี้เป็นการส่วนตัวโปรดแทรกข้อความต่อไปนี้ลงในย่อหน้าข้อความที่มีอยู่ในเอกสารรายการช้อปปิ้ง:
<p> นี่เป็นเพียงการทดสอบ </p>
จากนั้นโหลดหน้าใหม่ เวลานี้คุณจะเห็นกล่องโต้ตอบ Alter สองตัวและกล่องโต้ตอบที่สองจะว่างเปล่าหรือแสดงคำว่า "null" - สถานการณ์เฉพาะขึ้นอยู่กับว่าเว็บเบราว์เซอร์ของคุณจะแสดงค่า NULL อย่างไร
เราสามารถแก้ไขสคริปต์ของเราเพื่อที่จะปรากฏข้อความเฉพาะเมื่อมีคุณสมบัติชื่ออยู่ เราจะเพิ่มคำสั่ง IF เพื่อตรวจสอบว่าค่าส่งคืนของวิธี getAttribute () เป็นโมฆะหรือไม่ การใช้ประโยชน์จากโอกาสนี้เรายังเพิ่มตัวแปรหลายตัวเพื่อปรับปรุงความสามารถในการอ่านสคริปต์:
var ts = document.getElementsByTagname ("li"); สำหรับ (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); ถ้า (ข้อความ! = null) {แจ้งเตือนตอนนี้ถ้าคุณโหลดหน้านี้ใหม่คุณจะเห็นกล่องโต้ตอบดัดแปลงที่แสดงข้อความ "การเตือนความจำอ่อนโยน" ดังที่แสดงไว้ด้านล่าง
เรายังสามารถลดรหัสนี้ให้สั้นลงได้ เมื่อตรวจสอบว่าข้อมูลบางอย่างเป็นค่าว่างหรือไม่เรากำลังตรวจสอบว่ามีอยู่จริงหรือไม่ การตรวจสอบประเภทนี้สามารถทำให้ง่ายขึ้นเพื่อใช้ข้อมูลที่ตรวจสอบโดยตรงเป็นเงื่อนไขสำหรับคำสั่ง IF ถ้า (บางสิ่ง) เทียบเท่ากับถ้า (บางสิ่งบางอย่าง! = null) แต่อดีตเห็นได้ชัดว่ากระชับมากขึ้น ในเวลานี้หากมีบางสิ่งที่มีอยู่เงื่อนไขของคำสั่ง IF จะเป็นจริง หากไม่มีสิ่งใดอยู่เงื่อนไขของคำสั่ง IF จะเป็นเท็จ
สำหรับตัวอย่างนี้ตราบใดที่เราแทนที่ถ้า (title_text! = null) ด้วย IF (title_text) เราจะได้รับรหัสที่กระชับมากขึ้น นอกจากนี้เพื่อเพิ่มความสามารถในการอ่านรหัสเพิ่มเติมเรายังสามารถใช้โอกาสนี้ในการเขียนคำสั่งเปลี่ยนแปลงและหากข้อความในบรรทัดเดียวกันซึ่งสามารถทำให้พวกเขาใกล้ชิดกับประโยคภาษาอังกฤษในชีวิตประจำวันของเรา:
var ts = document.getElementsByTagname ("li"); สำหรับ (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); ถ้า (ข้อความ) แจ้งเตือน3.4.2 เมธอด setAttribute ()
วิธีการทั้งหมดที่เราแนะนำให้คุณก่อนสามารถใช้เพื่อดึงข้อมูลเท่านั้น วิธีการ setattribute () มีความแตกต่างที่สำคัญจากพวกเขา: มันช่วยให้เราสามารถปรับเปลี่ยนค่าของโหนดแอตทริบิวต์
เช่นเดียวกับวิธีการ getAttribute () วิธี setAttribute () ยังเป็นฟังก์ชันที่สามารถเรียกผ่านวัตถุโหนดองค์ประกอบเท่านั้น แต่วิธีการ setAttribute () ต้องการให้เราส่งผ่านพารามิเตอร์สองพารามิเตอร์:
obect.setAttribute (แอตทริบิวต์ค่า)
ในตัวอย่างต่อไปนี้คำสั่งแรกจะดึงองค์ประกอบที่มีค่าแอตทริบิวต์ ID และคำสั่งที่สองจะตั้งค่าแอตทริบิวต์ชื่อขององค์ประกอบนี้เป็นรายการสินค้า:
var Shopping = document.getElementById ("การซื้อ") Shopping.setAttribute ("ชื่อ", "รายการสินค้า")เราสามารถใช้เมธอด getAttribute () เพื่อพิสูจน์ว่าค่าแอตทริบิวต์ชื่อขององค์ประกอบนี้มีการเปลี่ยนแปลงอย่างแน่นอน:
var shopping = document.getElementById ("การซื้อ"); Alert (Shopping.getAttribute ("title")); photing.setAttribute ("title", "รายการสินค้า"); Alert (Shopping.getAttribute ("Title"));คำสั่งข้างต้นจะปรากฏขึ้นสองกล่องโต้ตอบการแจ้งเตือนบนหน้าจอ: กล่องโต้ตอบการเปลี่ยนแปลงครั้งแรกจะปรากฏขึ้นก่อนที่จะเรียกวิธีการ setattribute () มันจะว่างเปล่าหรือคำว่า "null" จะปรากฏขึ้น; ครั้งที่สองจะปรากฏขึ้นหลังจากตั้งค่าแอตทริบิวต์ชื่อเรื่องแล้วมันจะแสดงข้อความ "รายการสินค้า"
ในตัวอย่างข้างต้นเราตั้งค่าแอตทริบิวต์ชื่อเรื่องของโหนดที่มีอยู่ แต่แอตทริบิวต์นี้ไม่มีอยู่ตั้งแต่แรก ซึ่งหมายความว่าการเรียก SetAttribute () ที่เราออกจริง ๆ แล้วเสร็จสิ้นการดำเนินการสองรายการ: ก่อนสร้างแอตทริบิวต์นี้ก่อนจากนั้นตั้งค่า หากเราใช้เมธอด setAttribute () บนแอตทริบิวต์ที่มีอยู่ของโหนดองค์ประกอบค่าปัจจุบันของแอตทริบิวต์นี้จะถูกเขียนทับ
ในเอกสารตัวอย่าง "รายการช็อปปิ้ง" องค์ประกอบ <p> มีแอตทริบิวต์ชื่อเรื่องแล้วและค่าของแอตทริบิวต์นี้เป็นเครื่องเตือนใจที่อ่อนโยน เราสามารถใช้เมธอด setAttribute () เพื่อเปลี่ยนค่าปัจจุบัน:
<script type = "text/javascript"> var ts = document.getElementByTagname ("li"); สำหรับ (var i = 0; i <ts.length; i ++) {var text = ts [i] ประสบความสำเร็จ! ") การแจ้งเตือน (ts [i] .getAttribute (" title "))}}รหัสข้างต้นจะดึงองค์ประกอบ <p> ทั้งหมดที่มีแอตทริบิวต์ชื่อเรื่องจากเอกสารแล้วแก้ไขค่าแอตทริบิวต์ชื่อทั้งหมดของพวกเขาเป็นข้อความชื่อเรื่องใหม่ โดยเฉพาะสำหรับเอกสาร "รายการช้อปปิ้ง" มูลค่าทรัพย์สินเป็นตัวเตือนที่อ่อนโยนจะถูกเขียนทับ
นี่คือรายละเอียดที่น่าสังเกตมาก: การปรับเปลี่ยนเอกสารผ่านวิธี SetAttribute () จะทำให้เอกสารแสดงเอฟเฟกต์และ/หรือพฤติกรรมในหน้าต่างเบราว์เซอร์เพื่อเปลี่ยนตามลำดับ แต่เมื่อเราดูซอร์สโค้ดของเอกสารผ่านตัวเลือกมุมมองของเบราว์เซอร์ ปรากฏการณ์นี้ของ "ไม่สอดคล้องกันภายในและภายนอก" มาจากโหมดการทำงานของ DOM: โหลดเนื้อหาคงที่ของเอกสารก่อนแล้วจึงรีเฟรชแบบไดนามิก การรีเฟรชแบบไดนามิกไม่ส่งผลกระทบต่อเนื้อหาคงที่ของเอกสาร นี่คือพลังที่แท้จริงและการล่อลวงของ DOM: เนื้อหาหน้าเว็บรีเฟรชไม่ต้องการให้ผู้ใช้ปลายทางดำเนินการรีเฟรชหน้าในเบราว์เซอร์ของพวกเขา