ดึงค่าแอตทริบิวต์จาวาสคริปต์ทั้งหมด การจัดการแอตทริบิวต์องค์ประกอบใน jQuery คุณสมบัติ classList เป็นวัตถุสำหรับการทำงานกับชั้นเรียน

บทเรียนจะครอบคลุมถึงจุดเริ่มต้นของหัวข้อ: โมเดลวัตถุเอกสาร (javaScript DOM) เป็นพื้นฐานของ HTML แบบไดนามิก วิธีการเข้าถึงวัตถุจะได้รับการศึกษา และวิธีการประมวลผลเหตุการณ์จาวาสคริปต์จะได้รับการพิจารณา

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

ก่อนหน้านี้เราได้เริ่มทำความคุ้นเคยกับแนวคิดในจาวาสคริปต์แล้ว

ในจาวาสคริปต์มีสิ่งเช่น DOM - โมเดลออบเจ็กต์เอกสาร— รูปแบบวัตถุของหน้าเว็บ (หน้า html)
แท็กเอกสารหรืออย่างที่พวกเขาพูดกันว่าโหนดเอกสารเป็นวัตถุ

ลองดูที่แผนภาพ ลำดับชั้นของวัตถุใน JavaScriptและตำแหน่งของอ็อบเจ็กต์เอกสารที่กล่าวถึงในหัวข้อนี้อยู่ในลำดับชั้น

องค์ประกอบสคริปต์มีคุณสมบัติดังต่อไปนี้:

เลื่อนออกไป (รอให้โหลดหน้าเสร็จ)

ตัวอย่าง:

/* อนุญาตให้โหลดไฟล์ js แบบขนานและดำเนินการทันทีหลังจากโหลด โดยไม่ต้องรอให้ส่วนที่เหลือของหน้าประมวลผล */ /* อนุญาตให้เบราว์เซอร์เริ่มโหลดไฟล์ js แบบขนานโดยไม่ต้องหยุดการประมวลผลหน้าต่อไป การดำเนินการเกิดขึ้นหลังจากการแยกวิเคราะห์โมเดลออบเจ็กต์เอกสารเสร็จสมบูรณ์ */

คุณสมบัติและคุณลักษณะของวัตถุเอกสารใน JavaScript

วัตถุเอกสารแสดงถึงหน้าเว็บ

สิ่งสำคัญ: ในการเข้าถึงคุณสมบัติและวิธีการของวัตถุในจาวาสคริปต์ เช่นเดียวกับเมื่อทำงานกับวัตถุอื่น จะใช้เครื่องหมายจุด:

เหล่านั้น. ขั้นแรกวัตถุจะถูกเขียน จากนั้นคุณสมบัติ คุณลักษณะ หรือวิธีการของวัตถุจะถูกระบุผ่านจุดและไม่มีการเว้นวรรค

object.property object.attribute object.method ()

ลองดูตัวอย่าง:

ตัวอย่าง: ให้มีแท็กในเอกสาร html

องค์ประกอบของฉัน

และเฉพาะเจาะจงสำหรับเขา สไตล์ CSS(แม้จะมีสองสไตล์ แต่อันที่สองก็จะมีประโยชน์สำหรับงาน):

.small( color : red ; font-size : small ; ) .big( color : blue ; font-size : big; )

.small( color:red; font-size:small; ) .big( color:blue; font-size:big; )

จำเป็น:

ตั้งค่าคุณสมบัติใหม่ของวัตถุ กำหนดค่าให้กับวัตถุ และแสดงค่านี้

แสดงค่าของแอตทริบิวต์วัตถุ

เปลี่ยนค่าของแอตทริบิวต์วัตถุ

มาทำงานให้เสร็จตามลำดับ:
✍ วิธีแก้ไข:

ตั้งแต่นี้เป็นต้นมา ภาษาจาวาสคริปต์จากนั้นวัตถุสามารถประดิษฐ์และกำหนดคุณสมบัติใด ๆ ที่มีค่าใดก็ได้ แต่ก่อนอื่น เรามาเข้าถึงวัตถุกันก่อน (การเข้าถึงวัตถุจะกล่าวถึงรายละเอียดในบทเรียนนี้):

// เข้าถึงวัตถุด้วยรหัส var element = document.getElementById("MyElem"); องค์ประกอบ myProperty = 5; // กำหนดการแจ้งเตือนคุณสมบัติ (element.myProperty); // แสดงในกล่องโต้ตอบ

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

ตอนนี้เรามาเพิ่มโค้ดจาวาสคริปต์เพื่อแสดงค่าแอตทริบิวต์ของวัตถุของเรา รหัสต้องเป็น หลังจากแท็กหลัก:

// เข้าถึงวัตถุด้วยรหัส var element = document.getElementById("MyElem"); alert(element.getAttribute("คลาส")); // แสดงในกล่องโต้ตอบ

และงานสุดท้าย: การเปลี่ยนค่าแอตทริบิวต์ เรามีสไตล์สำหรับสิ่งนี้ "ใหญ่". ลองแทนที่ค่าของแอตทริบิวต์คลาสด้วยสไตล์นี้:

// เข้าถึงวัตถุด้วยรหัส var element = document.getElementById("MyElem"); element.setAttribute("คลาส", "ใหญ่");

เป็นผลให้องค์ประกอบของเรามีขนาดใหญ่ขึ้นและเป็นสีน้ำเงิน (คลาสใหญ่)

ตอนนี้เรามาดูวิธีการที่ใช้ในตัวอย่างในการทำงานกับแอตทริบิวต์กันดีกว่า

วิธีการทำงานกับแอตทริบิวต์ใน JavaScript

สามารถเพิ่ม ลบ และแก้ไขแอตทริบิวต์ได้ มีวิธีพิเศษสำหรับสิ่งนี้:

การเพิ่มแอตทริบิวต์ (การตั้งค่าใหม่):

getAttribute(แอตทริบิวต์)

กำลังตรวจสอบการมีอยู่ของแอตทริบิวต์นี้:

ลบแอตทริบิวต์(attr)

วิธีต่างๆ ในการทำงานกับแอตทริบิวต์

ตัวอย่าง: พิมพ์ค่าของแอตทริบิวต์ value ของบล็อกข้อความ

✍ วิธีแก้ไข:

ให้มีบล็อกข้อความ:

var elem = document.getElementById("MyElem"); var x = "ค่า";

ลองดูหลายวิธีในการรับค่าแอตทริบิวต์ (ใช้ alert() วิธีการสำหรับการส่งออก):

elem.getAttribute("มูลค่า")

2. สัญกรณ์จุด:

องค์ประกอบ.attributes.value

3. สัญกรณ์วงเล็บ:

องค์ประกอบ var = document.getElementById("t1"); การแจ้งเตือน(...) element.setAttribute(...);

var x = "คีย์"; // คีย์ - ชื่อแอตทริบิวต์ val - ค่าสำหรับแอตทริบิวต์ // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")

คุณสามารถเข้าถึงเนื้อหาของเอกสาร - แท็ก body - ด้วยคุณสมบัติที่เป็นประโยชน์บางอย่างผ่านอ็อบเจ็กต์เอกสาร

ตัวอย่างเช่น แท็ก body มีคุณสมบัติสองประการ: ความกว้างและความสูงของหน้าต่างไคลเอ็นต์:

document.body.clientHeight — ความสูงของหน้าต่างไคลเอนต์
document.body.clientWidth — ความกว้างของหน้าต่างไคลเอนต์

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

สำคัญ: เมื่อเข้าถึงแท็กหน้าด้วยวิธีนี้ สคริปต์จะต้องอยู่ที่ส่วนท้ายของโครงสร้างองค์ประกอบ ก่อนที่จะปิดเนื้อหา ! เนื่องจากเมื่อถึงเวลาที่สคริปต์ถูกเรียกใช้งาน องค์ประกอบทั้งหมดควรถูก "วาด" โดยเบราว์เซอร์บนหน้าจอแล้ว

งาน js8_1 . แสดงข้อความเกี่ยวกับขนาดของหน้าต่างเบราว์เซอร์: ตัวอย่างเช่น “ขนาดหน้าต่างเบราว์เซอร์ 600 x 400”

มีหลายตัวเลือกในการเข้าถึงหรือค้นหาออบเจ็กต์:

ค้นหาด้วยรหัส (หรือวิธี getElementById) ส่งคืนองค์ประกอบเฉพาะ

ค้นหาตามชื่อแท็ก (หรือวิธี getElementsByTagName) ส่งคืนอาร์เรย์ขององค์ประกอบ

ค้นหาตามแอตทริบิวต์ชื่อ (หรือวิธี getElementsByName) ส่งคืนอาร์เรย์ขององค์ประกอบ

ผ่านองค์ประกอบหลัก (รับลูกทั้งหมด)

ลองพิจารณาแต่ละตัวเลือกโดยละเอียด

การเข้าถึงองค์ประกอบผ่านแอตทริบิวต์ id

ไวยากรณ์: document.getElementById(id)

เมธอด getElementById() จะส่งคืนองค์ประกอบเอง ซึ่งสามารถใช้เพื่อเข้าถึงข้อมูลได้

ตัวอย่าง: หน้าเว็บมีช่องข้อความที่มีแอตทริบิวต์ id="cake":

...

จำเป็น

✍ วิธีแก้ไข:

alert(document.getElementById("เค้ก").value); // ส่งกลับ "จำนวนเค้ก"

คุณสามารถทำสิ่งเดียวกันได้โดยเข้าถึงวัตถุผ่านตัวแปร:

var a=document.getElementById("เค้ก"); การแจ้งเตือน (a.value); // แสดงค่าของแอตทริบิวต์ value เช่น ข้อความ "จำนวนเค้ก"

สำคัญ: สคริปต์ต้องอยู่หลังแท็ก!

การเข้าถึงอาร์เรย์ขององค์ประกอบผ่านแท็กชื่อและผ่านดัชนีอาร์เรย์

ไวยากรณ์:
document.getElementsByTagName(ชื่อ);

ตัวอย่าง: หน้าเว็บมีช่องข้อความ (แท็กอินพุต) พร้อมแอตทริบิวต์ค่า:

...

จำเป็น: แสดงค่าของแอตทริบิวต์ค่าของมัน

เมธอด getElementsByTagName ให้การเข้าถึงตัวแปรไปยังองค์ประกอบอินพุตทั้งหมด (เช่น อาร์เรย์ขององค์ประกอบอินพุต) แม้ว่าองค์ประกอบนี้จะเป็นองค์ประกอบเดียวในเพจก็ตาม ในการเข้าถึงองค์ประกอบเฉพาะ เช่น องค์ประกอบแรก เราจะระบุดัชนีของมัน (อาร์เรย์เริ่มต้นที่ดัชนีศูนย์)

✍ วิธีแก้ไข:

var a =document.getElementsByTagName("อินพุต"); การแจ้งเตือน (a.value); // ส่งคืน "จำนวนเค้ก"

การเข้าถึงอาร์เรย์ขององค์ประกอบด้วยค่าของแอตทริบิวต์ name

ไวยากรณ์:
document.getElementsByName(ชื่อ);

เมธอด getElementsByName("...") ส่งคืนอาร์เรย์ของอ็อบเจ็กต์ที่มีแอตทริบิวต์ name เท่ากับค่าที่ระบุเป็นพารามิเตอร์ของเมธอด หากมีองค์ประกอบดังกล่าวเพียงองค์ประกอบเดียวบนเพจ วิธีการดังกล่าวจะยังคงส่งคืนอาร์เรย์ (ที่มีองค์ประกอบเดียวเท่านั้น)

ตัวอย่าง: สมมติว่ามีองค์ประกอบในเอกสาร:

องค์ประกอบ var = document.getElementsByName("MyElem"); การแจ้งเตือน (องค์ประกอบ.ค่า);

ใน ในตัวอย่างนี้มีเพียงองค์ประกอบเดียว แต่เข้าถึงองค์ประกอบศูนย์ของอาร์เรย์ได้

สำคัญ:วิธีการนี้ใช้ได้กับองค์ประกอบที่ระบุแอตทริบิวต์ name ไว้อย่างชัดเจนในข้อกำหนด: ได้แก่ form , input , a , select , textarea และแท็กอื่นๆ ที่หายากกว่าอีกจำนวนหนึ่ง

เมธอด document.getElementsByName จะไม่ทำงานกับองค์ประกอบอื่นๆ เช่น div , p ฯลฯ

การเข้าถึงลูกหลานขององค์ประกอบหลัก

เด็ก ๆ สามารถเข้าถึงได้ในจาวาสคริปต์ผ่านคุณสมบัติ childNodes คุณสมบัติเป็นของวัตถุหลัก

document.getElementById(roditel).childNodes;

ลองดูตัวอย่างการวางแท็กรูปภาพในคอนเทนเนอร์ที่เรียกว่าแท็ก div ดังนั้น แท็ก div จึงเป็นพาเรนต์ของข้อมูลรูปภาพ และแท็ก img เองก็เป็นแท็กย่อยของแท็ก div:

ตอนนี้เรามาส่งออกไปที่ หน้าต่างกิริยาช่วยค่าขององค์ประกอบอาร์เรย์ที่มีการสืบทอดเช่น แท็ก img:

var myDiv=document.getElementById("div_for_img"); // เข้าถึงคอนเทนเนอร์หลัก var childMas=myDiv.childNodes; // อาร์เรย์ของผู้สืบทอดสำหรับ (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

โปรดทราบว่าสะดวกที่จะใช้ลูปเพื่อวนซ้ำองค์ประกอบของอาร์เรย์สืบทอด เหล่านั้น. ในตัวอย่างของเรา เราได้วงจร:

... สำหรับ (var a ใน childMas) ( alert(childMas[ a].src ) ; )

สำหรับ (var a ใน childMas)( alert(childMas[a].src); )

วิธีอื่นในการเข้าถึงองค์ประกอบ

ลองดูวิธีอื่นโดยใช้ตัวอย่าง:

1 3 4

เข้าถึง:

... // ตัวเข้าถึงองค์ประกอบที่ไม่ต้องการและเลิกใช้แล้ว: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // การแจ้งเตือนข้อความ (document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // การแจ้งเตือน o2 (document.f .b .type ) ; // ปุ่มแจ้งเตือน (document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // วิธีที่ต้องการสำหรับการเข้าถึงองค์ประกอบ การแจ้งเตือน(document.getElementById ("t" ) .type ) ; // ข้อความแจ้งเตือน(document.getElementById ("s" ) .name ) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4 ...

... // วิธีการเข้าถึงองค์ประกอบที่ไม่ต้องการและเลิกใช้แล้ว: alert(document.forms.name); // f alert(document.forms.elements.type); // การแจ้งเตือนข้อความ (document.forms.elements.options.id); // o2 alert(document.f.b.type); // ปุ่มแจ้งเตือน (document.f.s.name); // ss alert(document.f.s.options.id); // o2 // วิธีที่ต้องการสำหรับการเข้าถึงองค์ประกอบ การแจ้งเตือน(document.getElementById("t").type); // ข้อความแจ้งเตือน(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

ตัวอย่าง: ในเอกสาร HTML ให้สร้างปุ่มและช่องข้อความ ใช้สคริปต์ กำหนดสีพื้นหลังของปุ่ม (คุณสมบัติ style.พื้นหลังสีของปุ่ม) และแสดงคำจารึก "สวัสดี!"ในช่องข้อความ (แอตทริบิวต์ค่า)

รหัส HTML:

document.getElementById("t1").value = "สวัสดี!"; document.getElementById("b1").style.backgroundColor = "red";!}

ตัวเลือก 2:

document.getElementById ("t1" ) .setAttribute ( "value" , "สวัสดี!" ) ; document.getElementById("b1" ) .style .พื้นหลังสี = "สีแดง" ;

document.getElementById("t1").setAttribute("value","Hello!"); document.getElementById("b1").style.พื้นหลังสี = "สีแดง";

งาน Js8_2 สร้างแท็กฟิลด์ข้อความตามที่แสดงในภาพ ระบุค่าแอตทริบิวต์ id ที่เกี่ยวข้อง (แสดงในรูป) ใช้สคริปต์เพิ่มค่า “0” ลงในช่องตัวเลขทั้งหมด (สมมติว่าเป็นค่าตัวเลข)

ตรวจสอบว่าป้อนข้อมูลในแบบฟอร์มอย่างถูกต้อง

สนามว่างหรือเปล่า?

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

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

if(document.getElementById("name").value=="") (การกระทำบางอย่าง เช่น การแสดงข้อความขอให้คุณกรอกข้อมูลในช่อง)

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

ส่งข้อความแทน ค่าตัวเลข: ฟังก์ชั่นคือNaN

หากฟิลด์จำเป็นต้องป้อนค่าตัวเลข แต่ผู้ใช้ป้อนข้อความแทน จะต้องใช้ฟังก์ชัน isNaN “ไม่ใช่ตัวเลขเหรอ?”) ซึ่งจะตรวจสอบประเภทของข้อมูลที่ป้อนและส่งคืนค่าจริงหากป้อนข้อมูลข้อความแทนข้อมูลตัวเลข

ที่. หากส่งคืนเป็น true ผู้ใช้จะต้องได้รับแจ้งให้ป้อนรูปแบบที่ถูกต้องเช่น ตัวเลข.

if(isNaN(document.getElementById(" minutes").value))( การแจ้งเตือนกำหนดให้คุณต้องป้อนข้อมูลตัวเลข);

กำหนดหน้าพร้อมองค์ประกอบให้กรอก:

แฟรกเมนต์ รหัสเอชทีเอ็ม:

1 2 3 4 5 6 7 8 9 10 11 12

ชื่อ:
จำนวนโดนัท:
นาที:
สรุป:
ภาษี:
ผลลัพธ์:
...

จำเป็น:
เติมช่องว่างในข้อมูลโค้ดด้านล่างเพื่อตรวจสอบว่ากรอกช่องข้อความสองช่องอย่างถูกต้อง: ชื่อ(id = "ชื่อ") และ นาที(id="นาที"). ใช้การตรวจสอบเพื่อให้แน่ใจว่าฟิลด์นั้นเว้นว่างไว้ ("") และฟิลด์ตัวเลขถูกกรอกอย่างถูกต้อง (isNaN)

* ดำเนินงานด้วยแอตทริบิวต์รูปแบบของช่องข้อความโดยใช้ .

ส่วนของสคริปต์:

รหัสใช้เงื่อนไขที่เรียนรู้ก่อนหน้านี้เพื่อสร้างเงื่อนไขที่ซับซ้อน

แนวคิดใหม่สำหรับคุณคือการเรียกใช้ฟังก์ชันเป็นตัวจัดการเหตุการณ์ของปุ่ม:
onclick="placeOrder();"
เมื่อคลิกปุ่มแล้ว ฟังก์ชัน placeOrder() จะถูกเรียก

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

Ko.bindingHandlers.attrIf = ( อัปเดต: ฟังก์ชั่น (องค์ประกอบ, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (แสดง) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k in h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(องค์ประกอบ).removeAttr(k); ) ) ) ) ); ลิงค์

ฉันหวังว่าฉันจะตอบ @gbs ได้ แต่ฉันทำไม่ได้ วิธีแก้ปัญหาของฉันคือมีสองอันที่เหมือนกัน องค์ประกอบ HTML: อันหนึ่งที่มีแอตทริบิวต์ โดยไม่มีมัน และมีเงื่อนไขที่น่าพิศวงเพื่อเพิ่มหนึ่งในนั้นตามองค์ประกอบ ฉันยังตระหนักถึงความคาดหวังทั่วไปนี้ด้วย แต่โซลูชันใดมีประสิทธิภาพมากกว่ากัน

บทช่วยสอนนี้เกี่ยวกับการอ่านและการเปลี่ยนแปลงแอตทริบิวต์ขององค์ประกอบใน jQuery

คุณลักษณะคือคู่ชื่อ/ค่าที่กำหนดให้กับองค์ประกอบในแท็ก ตัวอย่างของคุณลักษณะ ( href, ชื่อ, src, ระดับ):

นี่คือข้อความสรุป

attr() เพื่ออ่าน เพิ่ม และเปลี่ยนแปลงคุณสมบัติ
RemoveAttr() เพื่อลบแอตทริบิวต์

บทเรียนนี้ครอบคลุมถึงการทำงานกับเมธอด attr() และ RemoveAttr()

มีวิธีพิเศษของ jQuery สำหรับการทำงานกับคลาส CSS ซึ่งอธิบายไว้ในบทเรียนอื่น เมื่อทำงานในโครงการใน jQuery คุณต้องจัดการคลาส CSS บ่อยครั้ง และแอตทริบิวต์ class สามารถมีชื่อคลาสได้หลายชื่อ ซึ่งทำให้การทำงานกับคลาสนั้นซับซ้อนกว่าแอตทริบิวต์อื่น ๆ มาก

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

การอ่านค่าแอตทริบิวต์

การอ่านค่าแอตทริบิวต์ขององค์ประกอบนั้นทำได้ง่าย คุณจะต้องเรียกใช้เมธอด attr() บนวัตถุ jQuery ที่มีองค์ประกอบ โดยส่งผ่านชื่อของแอตทริบิวต์ที่จะอ่าน วิธีการส่งกลับค่าแอตทริบิวต์:

// พิมพ์ค่าของแอตทริบิวต์ "href" ของการแจ้งเตือนองค์ประกอบ #myLink ($("a#myLink").attr("href"));

หากวัตถุ jQuery ของคุณมีหลายองค์ประกอบ วิธีการ attr() จะอ่านค่าแอตทริบิวต์สำหรับองค์ประกอบแรกในชุดเท่านั้น

การตั้งค่าแอตทริบิวต์

Attr() วิธีการสามารถใช้เพื่อเพิ่มหรือเปลี่ยนค่าแอตทริบิวต์:

ถ้าแอตทริบิวต์ ไม่ได้อยู่ในองค์ประกอบก็จะเป็น เพิ่มและจะกำหนดค่าตามที่กำหนด
ถ้าแอตทริบิวต์ มีอยู่แล้วมูลค่าของมันจะเป็น ปรับปรุงแล้วมูลค่าที่กำหนด

มีสามวิธีในการใช้ attr() วิธีการเพิ่มหรือเปลี่ยนแอตทริบิวต์:

คุณสามารถเพิ่ม/เปลี่ยนแปลงแอตทริบิวต์สำหรับองค์ประกอบใดๆ (หรือชุดขององค์ประกอบ)

คุณสามารถเพิ่ม/เปลี่ยนแปลงแอตทริบิวต์หลายรายการพร้อมกันสำหรับองค์ประกอบ (หรือองค์ประกอบ) ได้โดยการระบุแผนผังชื่อและค่าแอตทริบิวต์

คุณสามารถเพิ่ม/เปลี่ยนแปลงแอตทริบิวต์เดียวสำหรับหลายองค์ประกอบแบบไดนามิกได้โดยใช้ฟังก์ชันโทรกลับ

กำหนดแอตทริบิวต์หนึ่งรายการ

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

// เปลี่ยนค่าของแอตทริบิวต์ "href" ขององค์ประกอบ #myLink เป็นค่า "http://www.example.com/" // (หากไม่มีแอตทริบิวต์ "href" ก็จะถูกสร้างขึ้นโดยอัตโนมัติ) $("a#myLink"). attr("href", "http://www.example.com/");

นอกจากนี้ยังสามารถตั้งค่าแอตทริบิวต์เดียวกันสำหรับหลายองค์ประกอบได้:

การตั้งค่าคุณลักษณะหลายอย่างโดยใช้แผนที่

คุณสามารถตั้งค่าแอตทริบิวต์หลายรายการพร้อมกันในองค์ประกอบหนึ่งรายการขึ้นไปโดยใช้แผนที่ นี่คือรายการคู่ชื่อ/ค่าที่มีลักษณะดังนี้:

( name1: value1, name2: value2, ... )

ตัวอย่างต่อไปนี้ตั้งค่าแอตทริบิวต์สองรายการในองค์ประกอบ img ในเวลาเดียวกัน:

// ตั้งค่าแอตทริบิวต์ "src" และ "alt" สำหรับองค์ประกอบ img #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo" )) ;

คุณยังสามารถตั้งค่าแอตทริบิวต์สำหรับหลายองค์ประกอบ:

// ตั้งค่าแอตทริบิวต์ "src" และ "alt" สำหรับองค์ประกอบ img ทั้งหมด $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));

การตั้งค่าแอตทริบิวต์โดยใช้ฟังก์ชันโทรกลับ

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

ฟังก์ชัน return จะต้องมีสองอาร์กิวเมนต์:

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

ค่าที่ส่งคืนโดยฟังก์ชันใช้เพื่อแทนที่ค่าแอตทริบิวต์

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

ตัวอย่างใช้ฟังก์ชันโทรกลับเพื่อเพิ่มแอตทริบิวต์ alt ให้กับแต่ละภาพบนหน้าตามตำแหน่งของภาพและแอตทริบิวต์ src:

$(เริ่มต้น); function init() ( // ตั้งค่าแอตทริบิวต์ "alt" สำหรับองค์ประกอบ "img" ทั้งหมด $("img").attr("alt", setAltText); function setAltText(index,attributeValue) ( return ("Figure" + (ดัชนี +1) + ": " + this.src); ) )

หลังจากรันโค้ด รูปภาพแรกจะมีแอตทริบิวต์ alt ที่มีค่า "ภาพที่ 1: myphoto.jpg" และรูปภาพที่สองจะมีแอตทริบิวต์ alt ที่มีค่า "รูปที่ 2: yourphoto.jpg"

การลบแอตทริบิวต์

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

// ลบแอตทริบิวต์ "title" ออกจากองค์ประกอบ #myLink $("a#myLink").removeAttr("title");

คุณยังสามารถเรียกใช้เมธอด RemoveAttr() บนวัตถุ jQuery ที่มีองค์ประกอบหลายรายการได้ RemoveAttr() วิธีการจะลบแอตทริบิวต์ที่ระบุออกจากองค์ประกอบทั้งหมด:

// ลบแอตทริบิวต์ "title" ออกจากลิงก์ทั้งหมด $("a").removeAttr("title");

สรุป

บทเรียนนี้ครอบคลุมถึงปัญหาการทำงานกับแอตทริบิวต์ขององค์ประกอบใน jQuery:

การอ่านค่าแอตทริบิวต์
การตั้งค่าแอตทริบิวต์หนึ่งรายการ
การตั้งค่าคุณสมบัติที่แตกต่างกันหลายรายการพร้อมกัน
การใช้ฟังก์ชันโทรกลับเพื่อตั้งค่าแอตทริบิวต์บนชุดองค์ประกอบแบบไดนามิก
การลบคุณลักษณะออกจากองค์ประกอบ

ตั้งค่าของแอตทริบิวต์ในองค์ประกอบที่ระบุ หากมีแอตทริบิวต์อยู่แล้ว ค่าจะถูกอัพเดต มิฉะนั้นจะมีการเพิ่มแอตทริบิวต์ใหม่ด้วยชื่อและค่าที่ระบุ

ไวยากรณ์ องค์ประกอบ.setAttribute( ชื่อ, ค่า); ชื่อพารามิเตอร์ A DOMString ระบุชื่อของแอ็ตทริบิวต์ที่มีค่าที่จะตั้งค่า ชื่อแอตทริบิวต์จะถูกแปลงเป็นตัวพิมพ์เล็กทั้งหมดโดยอัตโนมัติเมื่อมีการเรียกใช้ setAttribute() บนองค์ประกอบ HTML ในเอกสาร HTML ค่า DOMString ที่มีค่าที่จะกำหนดให้กับแอตทริบิวต์ ค่าที่ไม่ใช่สตริงที่ระบุจะถูกแปลงเป็นสตริงโดยอัตโนมัติ

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

เนื่องจากค่าที่ระบุจะถูกแปลงเป็นสตริง การระบุ null ไม่จำเป็นต้องเป็นไปตามที่คุณคาดหวัง แทนที่จะลบแอตทริบิวต์หรือตั้งค่าให้เป็น null การระบุค่าของแอตทริบิวต์เป็นสตริง "null" แทน หากคุณต้องการลบแอตทริบิวต์ ให้เรียก RemoveAttribute()

ส่งกลับค่าข้อยกเว้น InvalidCharacterError ชื่อแอตทริบิวต์ที่ระบุมีอักขระอย่างน้อยหนึ่งตัวที่ไม่ถูกต้องในชื่อแอตทริบิวต์ ตัวอย่าง

ในตัวอย่างต่อไปนี้ setAttribute() ใช้เพื่อตั้งค่าแอตทริบิวต์บนไฟล์ .

HTML สวัสดีชาวโลก JavaScript var b = document.querySelector("button"); b.setAttribute("ชื่อ", "helloButton"); b.setAttribute("ปิดการใช้งาน", "");

สิ่งนี้แสดงให้เห็นสองสิ่ง:

การเรียก setAttribute() ครั้งแรกด้านบนจะแสดงการเปลี่ยนค่าของแอตทริบิวต์ของชื่อเป็น "helloButton" คุณสามารถดูสิ่งนี้ได้โดยใช้ตัวตรวจสอบหน้าของเบราว์เซอร์ (Chrome, Edge, Firefox, Safari)
หากต้องการตั้งค่าของแอตทริบิวต์บูลีน เช่น Disabled คุณสามารถระบุค่าใดก็ได้ สตริงว่างหรือชื่อของแอตทริบิวต์เป็นค่าที่แนะนำ สิ่งสำคัญก็คือ ถ้ามีคุณลักษณะอยู่เลย โดยไม่คำนึงถึงมูลค่าที่แท้จริงถือว่าค่าของมันเป็นจริง การไม่มีแอตทริบิวต์หมายความว่าค่าเป็นเท็จ โดยการตั้งค่าของแอตทริบิวต์ที่ปิดใช้งานเป็นสตริงว่าง ("") เรากำลังตั้งค่าปิดการใช้งานเป็น true ซึ่งส่งผลให้ปุ่มถูกปิดใช้งาน

วิธีการ DOM ที่เกี่ยวข้องกับคุณลักษณะขององค์ประกอบ:

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

setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
มีแอตทริบิวต์ (DOM2)	มีแอตทริบิวต์NS	-	-
ลบแอตทริบิวต์ (DOM 1)	ลบ AttributeNS	ลบ AttributeNode	-

ข้อมูลจำเพาะ

DOM ระดับ 2 Core: setAttribute (แนะนำใน DOM ระดับ 1 Core)

ความเข้ากันได้ของเบราว์เซอร์

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub

เดสก์ท็อปมือถือโครม เอดจ์ ไฟร์ฟอกซ์ อินเทอร์เน็ตเอ็กซ์พลอเรอร์ Opera Safari Android webview Chrome สำหรับ Android Firefox สำหรับ Android Opera สำหรับ Android Safari บน iOS Samsung InternetsetAttribute

Chrome รองรับเต็มรูปแบบ ใช่

ขอบสนับสนุนเต็ม 12

รองรับ Firefox เต็มรูปแบบ ใช่

การสนับสนุน IE เต็มรูปแบบ 5

หมายเหตุ

สนับสนุนอย่างเต็มที่ 5

หมายเหตุ

หมายเหตุ ใน Internet Explorer 7 และรุ่นก่อนหน้า setAttribute จะไม่ตั้งค่าสไตล์และลบเหตุการณ์เมื่อคุณพยายามตั้งค่า

รองรับ Opera เต็มรูปแบบ ใช่

ซาฟารีรองรับเต็มรูปแบบ 6

รองรับ WebView Android เต็มรูปแบบ ใช่

รองรับ Chrome Android เต็มรูปแบบใช่

รองรับ Firefox Android อย่างเต็มรูปแบบ ใช่

รองรับ Opera Android เต็มรูปแบบ ใช่

Safari iOS รองรับเต็มรูปแบบ ใช่

Samsung Internet Android รองรับเต็มรูปแบบ ใช่

Legend การสนับสนุนอย่างเต็มที่ การสนับสนุนอย่างเต็มที่ ดูบันทึกการใช้งาน ดูบันทึกการใช้งาน หมายเหตุตุ๊กแก

การใช้ setAttribute() เพื่อแก้ไขแอตทริบิวต์บางอย่าง โดยเฉพาะค่าใน XUL นั้นทำงานไม่สอดคล้องกัน เนื่องจากแอตทริบิวต์ระบุค่าเริ่มต้น หากต้องการเข้าถึงหรือแก้ไขค่าปัจจุบัน คุณควรใช้คุณสมบัติ ตัวอย่างเช่น ใช้ Element.value แทน Element.setAttribute()

ในบทความนี้ เราจะทำความคุ้นเคยกับคุณสมบัติและแอตทริบิวต์ DOM พิจารณาว่าแตกต่างกันอย่างไรและทำงานอย่างไรอย่างถูกต้อง มาดูกันว่า JavaScript มีวิธีการใดบ้างในการดำเนินการกับแอตทริบิวต์

ความแตกต่างระหว่างแอตทริบิวต์และคุณสมบัติ DOM คืออะไร?

คุณลักษณะคือเอนทิตี HTML ซึ่งเราสามารถเพิ่มข้อมูลบางอย่างให้กับองค์ประกอบในโค้ด HTML ได้

เมื่อเบราว์เซอร์ร้องขอเพจ จะได้รับซอร์สโค้ด HTML หลังจากนั้น มันจะแยกวิเคราะห์โค้ดนี้และสร้าง DOM ตามโค้ดนั้น ในระหว่างกระบวนการนี้ คุณลักษณะ HTML ขององค์ประกอบจะถูกแปลเป็นคุณสมบัติ DOM ที่สอดคล้องกัน

ตัวอย่างเช่น เมื่ออ่านโค้ด HTML บรรทัดต่อไปนี้ เบราว์เซอร์จะสร้างคุณสมบัติ DOM ต่อไปนี้สำหรับองค์ประกอบนี้: id , className , src และ alt

คุณสมบัติเหล่านี้เข้าถึงได้ในโค้ด JavaScript เป็นคุณสมบัติของออบเจ็กต์ วัตถุที่นี่คือโหนด DOM (องค์ประกอบ)

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

// รับองค์ประกอบ var brandImg = document.querySelector("#brand"); // แสดงค่าของคุณสมบัติ DOM ขององค์ประกอบไปยังคอนโซล console.log(brandImg.id); // "แบรนด์" console.log(brandImg.className); // "แบรนด์" console.log(brandImg.src); // "/logo.png" console.log(brandImg.alt); // "โลโก้ของเว็บไซต์"

ชื่อคุณสมบัติ DOM บางชื่อไม่ตรงกับชื่อแอตทริบิวต์ หนึ่งในนั้นคือแอตทริบิวต์คลาส คุณลักษณะนี้สอดคล้องกับคุณสมบัติ DOM className ความแตกต่างนี้เกิดจากการที่คลาสเป็น คำสำคัญใน JavaScript จะถูกสงวนไว้และไม่สามารถใช้งานได้ ด้วยเหตุนี้ นักพัฒนามาตรฐานจึงตัดสินใจใช้ชื่ออื่นเพื่อให้เป็นไปตามข้อกำหนด ซึ่งเลือกเป็น className

ความแตกต่างอีกประการหนึ่งเกี่ยวข้องกับความจริงที่ว่าการแปลแอตทริบิวต์ HTML ที่ระบุใน รหัสแหล่งที่มาเอกสาร คุณสมบัติ DOM ไม่ได้ถูกนำมาใช้แบบหนึ่งต่อหนึ่งเสมอไป

หากองค์ประกอบมีแอตทริบิวต์ HTML ที่ไม่เป็นมาตรฐาน ระบบจะไม่สร้างคุณสมบัติที่สอดคล้องกับองค์ประกอบนั้นใน DOM

// รับองค์ประกอบ mydiv = document.querySelector("#mydiv"); // รับค่าของคุณสมบัติ alt ขององค์ประกอบและส่งออกไปยังคอนโซล console.log(mydiv.alt); // ไม่ได้กำหนด // รับค่าของแอตทริบิวต์ alt ขององค์ประกอบและส่งออกไปยังคอนโซล console.log(mydiv.getAttribute("alt")); // "..."

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

มีการตรวจสอบหนึ่งในคุณลักษณะเหล่านี้

ค่าของแอตทริบิวต์ HTML ที่เลือกในกรณีนี้คือสตริงว่าง แต่คุณสมบัติที่สอดคล้องกับแอตทริบิวต์ที่กำหนดใน DOM จะมี จริง. เพราะ ตามกฎของมาตรฐาน หากต้องการตั้งค่าให้เป็นจริง เพียงระบุแอตทริบิวต์นี้ในโค้ด HTML ก็เพียงพอแล้ว และไม่สำคัญว่าจะมีค่าเท่าใด

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

นอกจากนี้ JavaScript ยังช่วยให้คุณทำงานกับแอตทริบิวต์ได้ มีวิธีการพิเศษสำหรับสิ่งนี้ใน DOM API แต่ขอแนะนำให้ใช้เมื่อคุณต้องการทำงานกับข้อมูลในลักษณะนี้จริงๆ เท่านั้น

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

ความแตกต่างที่สำคัญระหว่างคุณสมบัติ DOM และแอตทริบิวต์คือ:

ค่าแอตทริบิวต์จะเป็นสตริงเสมอ และค่าคุณสมบัติ DOM จะเป็นประเภทข้อมูลบางอย่าง (ไม่จำเป็นต้องเป็นสตริง)
ชื่อแอ็ตทริบิวต์ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ และคุณสมบัติ DOM คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ เหล่านั้น. ในโค้ด HTML เราสามารถเขียนแอตทริบิวต์ HTML id เป็น Id , ID เป็นต้น เช่นเดียวกับชื่อแอตทริบิวต์ซึ่งเราระบุในวิธี JavaScript พิเศษสำหรับการทำงานกับชื่อดังกล่าว แต่เราสามารถเข้าถึงคุณสมบัติ DOM ที่เกี่ยวข้องได้โดยใช้รหัสเท่านั้นและไม่มีอะไรอื่นอีก

การทำงานกับคุณสมบัติ DOM ขององค์ประกอบ

การทำงานกับคุณสมบัติขององค์ประกอบใน JavaScript ดังที่ระบุไว้ข้างต้นนั้นดำเนินการเช่นเดียวกับคุณสมบัติของวัตถุ

แต่เพื่อที่จะเข้าถึงคุณสมบัติขององค์ประกอบนั้นจะต้องได้รับก่อน คุณสามารถรับองค์ประกอบ DOM ใน JavaScript ได้ เช่น โดยใช้วิธี universal querySelector และคอลเลกชัน องค์ประกอบ DOMตัวอย่างเช่น ผ่าน querySelectorAll

เป็นตัวอย่างแรก ให้พิจารณาองค์ประกอบ HTML ต่อไปนี้:

ข้อความแสดงข้อมูล... var alert = document.querySelector("#alert"); // รับองค์ประกอบ

จากนั้นเราจะวิเคราะห์วิธีรับคุณสมบัติ DOM เปลี่ยนแปลงและเพิ่มคุณสมบัติใหม่

การอ่านค่าคุณสมบัติ DOM:

// รับค่าของคุณสมบัติ DOM id var alertId = alert.id; // "alert" // รับค่าของคุณสมบัติ DOM className var alertClass = alert.className; // "alert alert-info" // รับค่าของชื่อคุณสมบัติ DOM var alertId = alert.title; // "ข้อความช่วยเหลือ..."

การเปลี่ยนค่าคุณสมบัติ DOM:

// หากต้องการเปลี่ยนค่าของคุณสมบัติ DOM คุณเพียงแค่ต้องกำหนดค่าใหม่ให้กับมัน alert.title = "ข้อความคำแนะนำเครื่องมือใหม่"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

การเพิ่มคุณสมบัติ DOM:

Alert.lang = "ru"; // ตั้งค่าคุณสมบัติ lang เป็น "ru" alert.dir = "ltr"; // ตั้งค่าคุณสมบัติ dir เป็น "ltr"

ตัวอย่างที่เราจะส่งออกค่าคลาสทั้งหมดที่องค์ประกอบ p มีบนเพจไปยังคอนโซล:

Var ย่อหน้า = document.querySelectorAll("p"); สำหรับ (var i = 0, length = ย่อหน้าความยาว ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

ตัวอย่างที่เราตั้งค่าคุณสมบัติ lang ให้กับองค์ประกอบทั้งหมดด้วยคลาสเนื้อหาที่มีค่า “ru”:

เนื้อหา Var = document.querySelectorAll(".content"); สำหรับ (var i = 0, length = content.length; i< length; i++) { contents[i].lang = "ru"; }

คุณลักษณะองค์ประกอบและวิธีการทำงานกับองค์ประกอบเหล่านั้น

แอตทริบิวต์จะถูกตั้งค่าเริ่มต้นในโค้ด HTML แม้ว่าพวกเขาจะเชื่อมโยงกันด้วยคุณสมบัติในทางใดทางหนึ่ง แต่ก็ไม่เหมือนกัน ในกรณีส่วนใหญ่ คุณควรทำงานกับคุณสมบัติ และเข้าถึงแอตทริบิวต์เฉพาะเมื่อคุณต้องการจริงๆ เท่านั้น

ค่าแอตทริบิวต์ไม่เหมือนกับคุณสมบัติ DOM ดังที่ระบุไว้ข้างต้น จะเป็นสตริงเสมอ

JavaScript มีสี่วิธีในการดำเนินการที่เกี่ยวข้องกับแอตทริบิวต์:

.hasAttribute("attribute_name") – ตรวจสอบว่าองค์ประกอบมีแอตทริบิวต์ที่ระบุหรือไม่ หากองค์ประกอบมีแอตทริบิวต์ที่กำลังตรวจสอบอยู่ วิธีนี้คืนค่าจริงมิฉะนั้นจะเป็นเท็จ
.getAttribute("attribute_name") – รับค่าแอตทริบิวต์ หากองค์ประกอบไม่มีแอตทริบิวต์ที่ระบุ วิธีการนี้จะส่งคืนสตริงว่าง ("") หรือ null
.setAttribute("attribute_name", "attribute_value") – ตั้งค่าแอตทริบิวต์ที่ระบุด้วยค่าที่ระบุให้กับองค์ประกอบ หากองค์ประกอบมีแอตทริบิวต์ที่ระบุ วิธีการนี้ก็จะเปลี่ยนค่าของมัน
.removeAttribute("attribute_name") - ลบแอตทริบิวต์ที่ระบุออกจากองค์ประกอบ

ลองดูตัวอย่าง

ตัวอย่างที่น่าสนใจมากพร้อมแอตทริบิวต์ค่า

ตัวอย่างที่มีค่าแอตทริบิวต์ var name = document.querySelector("input"); // รับองค์ประกอบ

มารับค่าของแอตทริบิวต์ value และค่าคุณสมบัติ DOM:

// รับค่าของแอตทริบิวต์ค่าขององค์ประกอบ name.getAttribute("value"); // "Bob" // รับค่าของค่าคุณสมบัติ DOM name.value; // "Bob" // อัปเดตค่าของแอตทริบิวต์ value ตั้งค่าเป็นค่าใหม่ name.setAttribute("value", "Tom"); // "Tom" // รับค่าของค่าคุณสมบัติ DOM name.value; // "ทอม"

ตัวอย่างนี้แสดงให้เห็นว่าเมื่อแอตทริบิวต์ค่าเปลี่ยนแปลง เบราว์เซอร์จะเปลี่ยนคุณสมบัติค่า DOM โดยอัตโนมัติตามนั้น

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

// ตั้งค่าใหม่สำหรับค่าคุณสมบัติ DOM name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

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

สิ่งเดียวกันนี้จะเกิดขึ้นเมื่อผู้ใช้ป้อนข้อความลงในฟิลด์นี้ ค่าคุณสมบัติ DOM จะมีค่าจริง และแอตทริบิวต์ที่เกี่ยวข้องจะประกอบด้วยค่าดั้งเดิมหรือค่าที่เราตั้งค่าไว้ เช่น โดยใช้เมธอด setAttribute

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

แม้ในกรณีที่คุณต้องการรับค่าเริ่มต้นที่เรากำหนดไว้ใน HTML คุณก็สามารถใช้คุณสมบัติได้ คุณสมบัติที่มีค่าเริ่มต้นของแอตทริบิวต์ value เรียกว่า defaultValue

ชื่อ.defaultValue; //ทอม

อีกตัวอย่างที่น่าสนใจมาก แต่ตอนนี้มีแอตทริบิวต์ href แล้ว

ตัวอย่างที่มีแอตทริบิวต์ href

ตัวอย่างที่เราจำเป็นต้องรับค่าของลิงก์ตามที่ตั้งค่าไว้ใน HTML

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // URL แบบเต็ม เช่น http://localhost/page2.html

ในตัวอย่างนี้ แอตทริบิวต์ href และคุณสมบัติ href DOM มีค่าที่แตกต่างกัน แอตทริบิวต์ href คือสิ่งที่เราตั้งไว้ในโค้ด และคุณสมบัติ DOM คือ URL แบบเต็ม ความแตกต่างนี้กำหนดโดยมาตรฐานที่เบราว์เซอร์ต้องแก้ไขค่า href ให้เป็น URL แบบเต็ม

ดังนั้น หากเราต้องการได้รับสิ่งที่อยู่ในแอตทริบิวต์ ในกรณีนี้ เราจะไม่สามารถทำได้หากไม่มีเมธอด getAttribute

สุดท้ายเรามาดูแอตทริบิวต์ที่เลือกกัน

ตัวอย่างที่มีแอตทริบิวต์ที่เลือก

ตัวอย่างที่แสดงวิธีที่คุณสามารถรับค่าของตัวเลือกที่เลือก:

ไม่มีการให้คะแนน 1 2 3 4 5 // รับองค์ประกอบที่เลือก var mark = document.querySelector("#mark"); // 1 ทาง mark.querySelector("option:checked").value; // วิธีที่ 2 mark.value;

ตัวอย่างที่แสดงวิธีที่คุณสามารถรับค่าตัวเลือกที่เลือกในองค์ประกอบที่เลือก:

ไม่มีการให้คะแนน 1 2 3 4 5 // รับองค์ประกอบที่เลือก var mark = document.querySelector("#mark"); // วิธีที่ 1 (โดยการสร้างอาร์เรย์และเติมค่าของตัวเลือกที่เลือก) var arr = ; สำหรับ (var i = 0, length = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>ตัวเลือก.value)

อีกวิธีหนึ่งในการทำงานกับแอตทริบิวต์ (คุณสมบัติแอตทริบิวต์)

ใน JavaScript แต่ละองค์ประกอบมีคุณสมบัติแอตทริบิวต์ ซึ่งสามารถใช้เพื่อดึงข้อมูลคุณลักษณะทั้งหมดเป็นวัตถุ NamedNodeMap

วิธีการนี้สามารถใช้เมื่อคุณต้องการ เช่น วนซ้ำแอตทริบิวต์ทั้งหมดขององค์ประกอบ

คุณลักษณะในคอลเลกชันนี้เข้าถึงได้โดยดัชนีหรือโดยใช้วิธีรายการ คุณลักษณะในคอลเลกชันนี้นับจาก 0

ตัวอย่างเช่น เรามาแสดงแอตทริบิวต์ทั้งหมดขององค์ประกอบบางอย่างบนคอนโซล:

ฉันรักจาวาสคริปต์

// รับองค์ประกอบด้วยข้อความตัวระบุ var message = document.querySelector("#message"); // รับแอตทริบิวต์ var attrs = message.attributes; // ดูแอตทริบิวต์ทั้งหมดโดยใช้การวนซ้ำ (attrs.length – จำนวนแอตทริบิวต์) สำหรับ (var i = 0, length = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "ข้อมูล"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

นอกจากนี้ คุณยังสามารถทำงานกับคอลเลกชันนี้ได้โดยใช้วิธีการต่อไปนี้:

.getNamedItem("attribute_name") – รับค่าของแอตทริบิวต์ที่ระบุ (หากไม่มีแอตทริบิวต์ที่ระบุในองค์ประกอบ ผลลัพธ์จะเป็นโมฆะ)
.setNamedItem("attribute_node") – เพิ่มแอตทริบิวต์ใหม่ให้กับองค์ประกอบหรืออัปเดตค่าของแอตทริบิวต์ที่มีอยู่ ในการสร้างแอตทริบิวต์ คุณต้องใช้เมธอด document.createAttribute() ซึ่งจะต้องส่งชื่อแอตทริบิวต์เป็นพารามิเตอร์ แอตทริบิวต์ที่สร้างขึ้นจะต้องกำหนดค่าโดยใช้คุณสมบัติค่า
.removeNamedItem("attribute_name") – ลบแอตทริบิวต์ที่ระบุออกจากองค์ประกอบ (ส่งคืนแอตทริบิวต์ที่ถูกลบเป็นผลลัพธ์)

ตัวอย่างของการทำงานกับแอ็ตทริบิวต์ผ่านเมธอด getNamedItem, setNamedItem และ RemoveNamedItem:

ฉันรักจาวาสคริปต์

// รับองค์ประกอบด้วยข้อความตัวระบุ var message = document.querySelector("#message"); // รับแอตทริบิวต์ var attrs = message.attributes; // ภารกิจที่ 1 รับค่าของแอตทริบิวต์ id console.log(attrs.getNamedItem("id")); // ภารกิจที่ 2 ตั้งค่าแอตทริบิวต์ (หากมีอยู่ ให้เปลี่ยนค่า หรือเพิ่มแอตทริบิวต์ใหม่) // สร้างแอตทริบิวต์ style และบันทึกลงในตัวแปร attrStyle var attrStyle = document.createAttribute("style"); // กำหนดค่าให้กับแอตทริบิวต์โดยใช้ค่าคุณสมบัติ attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

งาน

พิมพ์ไปยังคอนโซลองค์ประกอบเอกสารทั้งหมดที่มีแอตทริบิวต์ id
เพิ่มแอตทริบิวต์ชื่อให้กับรูปภาพทั้งหมดบนเพจหากไม่มีแอตทริบิวต์นี้ ตั้งค่าแอตทริบิวต์ให้เท่ากับค่าแอตทริบิวต์ alt