ค่าแอตทริบิวต์องค์ประกอบ Javascript การจัดการแอตทริบิวต์องค์ประกอบด้วย jQuery การตรวจสอบความถูกต้องของแบบฟอร์มข้อมูลที่ป้อน

โกลอฟนา / ข้อมูล Corisna

ในบทเรียน เราจะดู cob: Document Object Model (javaScript DOM) - พื้นฐานของ HTML แบบไดนามิก วิธีการเข้าถึงวัตถุจะถูกดู และวิธีการสำหรับการประมวลผลจาวาสคริปต์

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

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

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

มาดูไดอะแกรมกัน ลำดับชั้นของวัตถุใน JavaScriptและสิ่งเหล่านั้นจะพบเดієrarchіїในการวิเคราะห์วัตถุเอกสารหัวข้อนี้

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

เลื่อน (การกวาดล้างของการมีส่วนร่วมทั้งหมดของฝ่าย)

ก้น:

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

วัตถุเอกสารคือหน้าเว็บ

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

tobto วัตถุนั้นถูกเขียนด้วยจุดเริ่มต้น จากนั้นผ่านจุด i โดยไม่มีช่องว่าง จะแสดงพลังของมัน วิธีแอตทริบิวต์ chi

object.authority object.attribute object.method() วัตถุ

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

ก้น:ให้ html-document є tag

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

ta นัดหมายสำหรับใหม่ สไตล์ CSS(นำทางสองสไตล์ ส่วนอีกอันจำเป็นสำหรับการตั้งค่า):

ที่จำเป็น:

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

มาทำงานตามลำดับ:
✍ วิธีแก้ไข:

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

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

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

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

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

І งานที่เหลือ: เปลี่ยนค่าของแอตทริบิวต์ สำหรับผู้ที่เรามีการเตรียมสไตล์ ใหญ่. เปลี่ยนค่าของแอตทริบิวต์ class เป็นสไตล์:

// จำเป็นต้องเข้าถึงวัตถุ id var องค์ประกอบ = document.getElementById ("MyElem"); element.setAttribute("class","big");

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

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

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

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

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

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

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

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

วิธีต่างๆ ในการทำงานกับคุณลักษณะต่างๆ

ก้น:ป้อนค่าแอตทริบิวต์ค่า บล็อกข้อความ.

✍ วิธีแก้ไข:

มาเลยบล็อกข้อความ:

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

มาดูวิธีการดึงค่าของแอตทริบิวต์สองสามวิธี (เพื่อแสดงให้ใช้วิธี alert()):

elem.getAttribute("ค่า")

2. เครื่องหมายจุด:

elem.attributes .value

elem.attributes.value

3. เครื่องหมายวงเล็บ:

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

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

อำนาจขององค์ประกอบร่างกาย

ผ่านวัตถุเอกสาร คุณสามารถนำทางไปยังเนื้อหาของเอกสาร - แท็กเนื้อความ - ด้วยกำลังมหาศาล

ตัวอย่างเช่น แท็ก body มีพลังสองอย่าง: ความกว้างและความสูงของหน้าต่างของลูกค้า:

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

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

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

js8_1 ผู้จัดการ. ดูข้อมูลเกี่ยวกับการขยายหน้าต่างเบราว์เซอร์ เช่น "ปรับขนาดหน้าต่างเบราว์เซอร์ 600 x 400"

การเข้าถึงองค์ประกอบเอกสารใน JavaScript

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

ค้นหาโดย id(หรือเมธอด getElementById) หมุนองค์ประกอบเฉพาะ
ค้นหาชื่อแท็ก(หรือเมธอด getElementsByTagName) หมุนอาร์เรย์ขององค์ประกอบ
สอบถามชื่อแอตทริบิวต์(หรือเมธอด getElementsByName) หมุนอาร์เรย์ขององค์ประกอบ
ผ่านองค์ประกอบ batkivsky(การลบสารพัดทั้งหมด)

มาดูสกินจากตัวเลือกของรายงานกัน

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

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

เมธอด getElementById() จะหมุนองค์ประกอบเอง ซึ่งสามารถเรียกค้นข้อมูลได้

ก้น:ด้านข้างมีช่องข้อความพร้อมแอตทริบิวต์ id="cake":

...

จำเป็น

✍ วิธีแก้ไข:

alert(document.getElementById("เค้ก")).value); // เลี้ยว "ใกล้เค้ก"

คุณสามารถ vikonate เหล่านั้นได้ด้วยตัวเองโดยตระหนักถึงสัตว์ร้ายกับวัตถุ ผ่านการเปลี่ยนแปลง:

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

สิ่งสำคัญ:สคริปต์มีความผิด buti obov'yazkovo หลังแท็ก!

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

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

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

...

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

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

✍ วิธีแก้ไข:

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

เข้าถึงอาร์เรย์ขององค์ประกอบที่อยู่เบื้องหลังค่าของแอตทริบิวต์ชื่อ

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

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

ก้น:อนุญาตในองค์ประกอบเอกสารє:

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

ที่ ก้นนี้องค์ประกอบที่หนึ่ง แต่zdіysnyuєtsyaถึงองค์ประกอบศูนย์ของอาร์เรย์

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

วิธีการ document.getElementsByName ไม่สามารถใช้ได้กับองค์ประกอบอื่นๆ ของประเภท div, p และสิ่งที่คล้ายคลึงกัน

เข้าสู่บ้านของธาตุ Batkiv

เข้าถึงปุ่มจาวาสคริปต์ vydbuvaєtsyaสำหรับพลังเสริม childNodes พลังในการวางวัตถุbatkovі

document.getElementById (พาเรนต์) .childNodes ;
document.getElementById(พาเรนต์).childNodes;

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

มองเห็นได้ใน โมดอล viknoความหมายขององค์ประกอบในอาร์เรย์จากตัวพิมพ์ใหญ่ tobto 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); )

วิธีอื่นในการไปยังองค์ประกอบต่างๆ

วิธีดูอื่นๆ ในตัวอย่าง:

<ร่างกาย > <formname="f"> <ประเภทอินพุต="ข้อความ" id="t"> <ประเภทอินพุต = "ปุ่ม" id = "b" ค่า = "(!LANG:(!LANG:ปุ่ม" > !}!} <เลือก id="s" name="ss"> <ตัวเลือก id = "o1" > 1</option> <ตัวเลือก id = "o2" > 3</option> <ตัวเลือก id = "o3" > 4</option> </select> </form>

เข้าถึง:

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

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

รหัส HTML:

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

ตัวเลือกที่ 2:

document.getElementById("t1") .setAttribute("value", "สวัสดี!"); document.getElementById("b1" ) .style .backgroundColor = "สีแดง" ;

document.getElementById("t1").setAttribute("value","สวัสดี!"); document.getElementById("b1") .style.backgroundColor = "สีแดง";

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

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

จี้ไม่ปล่อยให้สนามว่าง?

ดานิมไว้ใจไม่ได้ ไม่มีเหตุผลที่จะยอมรับว่า coristuvachi อยู่ในชั่วโมงของการแนะนำข้อมูลїхїх ดังนั้นจึงจำเป็นสำหรับ chogo ที่จะชนะจาวาสคริปต์

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

if(document.getElementById("name")).value=="")

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

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

กำลังโอนสาขาไหนคะ การป้อนค่าตัวเลขและหากต้องการป้อนข้อความ จำเป็นต้องเลือกฟังก์ชัน isNaN (จากภาษาอังกฤษ “จี้ไม่ใช่ตัวเลข?”) เพื่อให้คุณตรวจสอบประเภทของข้อมูลที่จะป้อน และกลายเป็นจริงเมื่อคุณป้อนข้อมูลข้อความแทนข้อมูลตัวเลข

รวม หากตั้งค่าเป็น true จำเป็นต้องบอกผู้พูดว่ารูปแบบถูกต้องเพื่อที่ ตัวเลข.

if(isNaN(document.getElementById("minutes")).value))(แจ้งให้ป้อนข้อมูลที่เป็นตัวเลข);

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

ข้อมูลโค้ด html:

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

<แบบฟอร์ม >ชื่อ:<ประเภทการป้อนข้อมูล="text" id="name">
จำนวนโดนัท:<input type="text" id="donuts" >
ควิลิน:<ประเภทอินพุต="ข้อความ" id="นาที">
พอดแบ็ก:<ประเภทอินพุต = "ข้อความ" id="subitog" >
ของขวัญ:<ประเภทอินพุต="ข้อความ" id="tax">
พอดแบ็ก:<ประเภทอินพุต = "ข้อความ" id="ทั้งหมด">
<ประเภทอินพุต = "ส่ง" ค่า = "(!LANG:(!LANG:submit" onclick = "placeOrder();" > !}!} </form> <script type="text/javascript"> ... </script>

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

* งาน Vikonati ยังสำหรับความช่วยเหลือเพิ่มเติมของแอตทริบิวต์รูปแบบของช่องข้อความสำหรับความช่วยเหลือ

ข้อมูลโค้ดสคริปต์:

ที่รหัสที่พวกเขาชนะเพื่อสร้างแรงบันดาลใจให้จิตใจที่บิดเบี้ยว ผ่านไปก่อนหน้านี้

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

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

ไวยากรณ์

องค์ประกอบ.setAttribute( ชื่อ, ค่า);

พารามิเตอร์

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

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

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

ค่าส่งคืน

ข้อยกเว้น

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

ตัวอย่าง

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

HTML

JavaScript

var b = document.querySelector("ปุ่ม"); b.setAttribute("ชื่อ", "helloButton"); b.setAttribute("ปิดการใช้งาน", "");

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

การเรียกใช้ setAttribute() ครั้งแรกด้านบนจะแสดงการเปลี่ยนค่าแอตทริบิวต์ชื่อเป็น "helloButton"
ในการตั้งค่าแอตทริบิวต์บูลีน เช่น ปิดใช้งาน คุณสามารถระบุค่าใดก็ได้ สตริงว่างมีชื่อของแอตทริบิวต์ є ค่าที่แนะนำอย่างใดอย่างหนึ่ง ทั้งหมดคือว่าถ้าคุณลักษณะมีอยู่เลย โดยไม่คำนึงถึงมูลค่าที่แท้จริงของมันค่าของมันถือว่าเป็นความจริง การมีอยู่ของรายการแอตทริบิวต์ของค่านี้ไม่มีนัยสำคัญ โดยการตั้งค่าแอตทริบิวต์ที่ปิดใช้งานเป็นสตริงว่าง ("") เรากำลังตั้งค่าปิดการใช้งานเป็น 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)	removeAttributeNS	removeAttributeNode	-

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

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

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

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

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

	เดสก์ทอป	มือถือ
	โครเมียม	ขอบ	Firefox	Internet Explorer	โอเปร่า	ซาฟารี	android webview	Chrome สำหรับ Android	Firefox สำหรับ Android	Opera สำหรับ Android	Safari บน iOS	ซัมซุง อินเทอร์เน็ต
setAttribute	รองรับ Chrome เต็มรูปแบบใช่	รองรับขอบเต็ม 12	Firefox รองรับอย่างเต็มที่ใช่	IE สนับสนุนอย่างเต็มที่ 5 บันทึกย่อ สนับสนุนอย่างเต็มที่5 บันทึกย่อ บันทึกย่อ สำหรับ Internet Explorer 7 และรุ่นก่อนหน้า setAttribute จะไม่ตั้งค่าสไตล์และลบเหตุการณ์ออกเมื่อคุณพยายามตั้งค่า	รองรับ Opera เต็มรูปแบบใช่	Safari รองรับอย่างเต็มที่ 6	รองรับ WebView Android เต็มรูปแบบ ใช่	รองรับ Chrome Android เต็มรูปแบบ ใช่	รองรับ Firefox Android เต็มรูปแบบ ใช่	รองรับ Opera Android เต็มรูปแบบ ใช่	Safari iOS รองรับอย่างเต็มที่ใช่	รองรับ Samsung Internet Android เต็มรูปแบบ ใช่

เดสก์ทอป

มือถือ

โครเมียม

ขอบ

Firefox

Internet Explorer

โอเปร่า

ซาฟารี

android webview

Chrome สำหรับ Android

Firefox สำหรับ Android

Opera สำหรับ Android

Safari บน iOS

ซัมซุง อินเทอร์เน็ต

setAttribute

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

รองรับขอบเต็ม 12

Firefox รองรับอย่างเต็มที่ใช่

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

บันทึกย่อ

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

บันทึกย่อ

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

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

Safari รองรับอย่างเต็มที่ 6

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

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

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

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

Safari iOS รองรับอย่างเต็มที่ใช่

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

ตำนาน

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

โน้ตตุ๊กแก

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

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

แอตทริบิวต์มีลักษณะอย่างไร ผู้มีอำนาจ DOM มีลักษณะอย่างไร

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

หากเบราว์เซอร์ขอบรรทัดแรก จะใช้โค้ด HTML ขาออก หลังจากที่ไวน์นี้ขยายรหัสนี้และจะอยู่ในตัวแทน DOM เดียวกัน ภายใต้ชั่วโมงของกระบวนการ แอตทริบิวต์ HTML ขององค์ประกอบจะถูกแปลงเป็น DOM-authority.

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

Zvernennya ถึงเจ้าหน้าที่ tsikh รหัส JavaScript vykonuєtsyaตามอำนาจของวัตถุ วัตถุที่นี่คือโหนด (องค์ประกอบ) 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 ซึ่งสงวนไว้และไม่สามารถแทนที่ได้ ผ่าน rozrobniks มาตรฐานถูกเปลี่ยนเป็น vikoristovuvaty เพื่อความสอดคล้องเป็นชื่ออื่นซึ่ง className ถูกเลือก

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

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

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

มีการตรวจสอบแอตทริบิวต์เหล่านี้อย่างใดอย่างหนึ่ง

ค่าของแอตทริบิวต์ HTML ที่ตรวจสอบใน ถึงประเภทนี้โดยเฉพาะ- Tse แถวว่าง เอล พลังในการตั้งค่าแอตทริบิวต์ DOM นี้เป็น true เพราะ ตามกฎของมาตรฐานการตั้งค่าจริง ปริศนาของแอตทริบิวต์ในโค้ด HTML ใดก็เพียงพอ และหากเป็นเช่นนั้น ก็ไม่เป็นไร ตราบใดที่ยังมีค่าอยู่

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

แย่จัง JavaScript ช่วยให้คุณทำงานกับแอตทริบิวต์ได้ DOM API ใดมีวิธีการพิเศษ Ale їхจะดีกว่าถ้าเอาชนะพวกเขาได้ก็ต่อเมื่อคุณจำเป็นต้องฝึกฝนกับพวกเขาด้วยตัวเองจริงๆ

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

พลังหลักระหว่างพลัง DOM และแอตทริบิวต์:

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

การทำงานกับพลัง DOM ขององค์ประกอบ

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

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

ในส่วนแรก มาดูองค์ประกอบ HTML ถัดไปกัน:

ข้อความประกาศแจ้งข้อมูล...

บนพื้นฐานของการวิเคราะห์ใหม่ เป็นไปได้ที่จะสร้างอำนาจ DOM ใหม่ การเปลี่ยนแปลงและการเพิ่มอำนาจใหม่

การอ่านความหมายของหน่วยงาน DOM:

// ดึงรหัสค่าพลังงาน DOM var alertId = alert.id; // "alert" // รับค่าสิทธิ์ DOM className var alertClass = alert. className; // "alert alert-info" // รับค่าสิทธิ์ DOM ชื่อ var alertId = alert. title; // "ข้อความแนะนำ..."

เปลี่ยนค่าของหน่วยงาน DOM:

// หากต้องการเปลี่ยนค่าพลัง DOM คุณเพียงแค่ต้องตั้งค่าใหม่ alert.title = "(!LANG:(!LANG:New Hint text)"; // присвоим 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 = contents.length; i< length; i++) { contents[i].lang = "ru"; }

คุณลักษณะขององค์ประกอบและวิธีการทำงานกับพวกมัน

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

ค่าของแอตทริบิวต์บนพื้นฐานของอำนาจ DOM ตามที่ได้รับมอบหมายมากขึ้นเสมอในแถว

JavaScript สำหรับการดำเนินการเฉพาะที่เกี่ยวข้องกับแอตทริบิวต์ นี่คือวิธีการบางส่วน:

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

ลองมาดูที่มัน

ดูเจ ก้นด้วยแอตทริบิวต์ค่า

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

เราใช้ค่าของแอตทริบิวต์ค่าและพลัง DOM ของมูลค่า:

// ดึงค่าของแอตทริบิวต์ค่าขององค์ประกอบ name.getAttribute("value"); // "Bob" // ค่าพลัง DOM ที่ใช้ค่า name.value; // "Bob" // เปลี่ยนค่าของแอตทริบิวต์ value ตั้งค่าใหม่ name.setAttribute("value", "Tom"); // "Tom" // รับค่าพลัง DOM ค่า name.value; // "ทอม"

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

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

// ตั้งค่าอำนาจ DOM ใหม่ name.value = "(!LANG:(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}!}

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

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

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

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

Name.defaultValue; // ทอม

ปืนโค้งอีกหนึ่งอัน แต่ตอนนี้มีแอตทริบิวต์ href

สต็อกพร้อมแอตทริบิวต์ href

ตัวอย่างที่เราต้องใช้ความหมายของข้อความในขณะที่มันถูกแทรกลงใน HTML

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

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

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

ก้นกับแอตทริบิวต์ที่เลือก

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

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

อีกวิธีหนึ่งในการทำงานกับแอตทริบิวต์ (แอตทริบิวต์กำลัง)

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

ทาง Tseyคุณอาจรู้จัก zastosuvannya ได้ ตัวอย่างเช่น หากต้องการ ดูคุณลักษณะทั้งหมดขององค์ประกอบ

การเข้าถึงแอตทริบิวต์tsієїของคอลเลกชันจะได้รับจากดัชนีหรือโดยรายการวิธีตัวช่วย การตรวจสอบคุณลักษณะของคอลเล็กชันดำเนินการตั้งแต่ 0

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

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

แหลมไครเมีย คอลเลกชัน tsієyu ของ pratsyuvati ก็เป็นไปได้สำหรับความช่วยเหลือของวิธีการดังกล่าว:

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

Buttwork กับแอตทริบิวต์ผ่านเมธอด getNamedItem, setNamedItem และ removeNamedItem:

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

ผู้จัดการ

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

คุณสามารถสร้างการผูกที่ปรับแต่งได้ การผูกมัด,เป็นการสะท้อนความหมายของการร้องเพลงเฝ้า ความหมายเชิงตรรกะก่อนเพิ่ม chi ไม่ใช่แอตทริบิวต์ ก้น:

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 ( สำหรับ (var k ใน h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(องค์ประกอบ).removeAttr(k); ) ) ) ) ); ลิงค์

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

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

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

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

attr()สำหรับอ่านเพิ่มและเปลี่ยนคุณสมบัติ
ลบ Attr()สำหรับลักษณะภาพ

ในบทเรียนนี้ หุ่นยนต์จะถูกเลือกด้วยเมธอด attr() และ removeAttr()

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

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

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

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

// แสดงค่าของแอตทริบิวต์ "href" ขององค์ประกอบ # mylink alert($("a#mylink")).attr("href"));

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

เราตั้งค่าของคุณสมบัติ

คุณยังสามารถปรับแต่งเมธอด attr() เพื่อเพิ่มหรือเปลี่ยนค่าแอตทริบิวต์ได้:

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

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

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

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

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

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

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

เราติดตั้งคุณลักษณะจากการ์ดที่เลือก

คุณสามารถกำหนดคุณลักษณะหลายอย่างพร้อมกันสำหรับหนึ่งองค์ประกอบหรือหลายองค์ประกอบสำหรับการ์ดเพิ่มเติม รายชื่อคู่ของชื่อ/ค่ามีลักษณะดังนี้:

(im'ya1: value1, im'ya2: 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() คุณสามารถส่งต่อไปยังฟังก์ชันเรียกกลับได้ ด้วยวิธีนี้ คุณสามารถตั้งค่าแอตทริบิวต์สำหรับองค์ประกอบรูปลอกได้แบบไดนามิก โดยขึ้นอยู่กับตำแหน่งขององค์ประกอบที่มีค่าของแอตทริบิวต์หรือพลังอื่นๆ

ฟังก์ชันโรตารีสามารถรับอาร์กิวเมนต์ได้สองอาร์กิวเมนต์:

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

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

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

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

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

แอตทริบิวต์การมองเห็น

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

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

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

// ลบแอตทริบิวต์ "title" ออกจากชุด $("a").removeAttr("title");

สรุป

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

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

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

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

อำนาจขององค์ประกอบร่างกาย

การเข้าถึงองค์ประกอบเอกสารใน JavaScript

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

ไวยากรณ์

พารามิเตอร์

ค่าส่งคืน

ข้อยกเว้น

ตัวอย่าง

HTML

JavaScript

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

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

ตำนาน

โน้ตตุ๊กแก

แอตทริบิวต์มีลักษณะอย่างไร ผู้มีอำนาจ DOM มีลักษณะอย่างไร

การทำงานกับพลัง DOM ขององค์ประกอบ

คุณลักษณะขององค์ประกอบและวิธีการทำงานกับพวกมัน

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

สต็อกพร้อมแอตทริบิวต์ href

ก้นกับแอตทริบิวต์ที่เลือก

อีกวิธีหนึ่งในการทำงานกับแอตทริบิวต์ (แอตทริบิวต์กำลัง)

ผู้จัดการ

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

เราตั้งค่าของคุณสมบัติ

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

เราติดตั้งคุณลักษณะจากการ์ดที่เลือก

เรากำหนดคุณสมบัติของการเลือกฟังก์ชั่นการเลี้ยว

แอตทริบิวต์การมองเห็น

สรุป

ทางเลือกของบรรณาธิการ