การรวบรวมคะแนนความรู้ JavaScript: การได้รับองค์ประกอบและโหนด

[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]

รับองค์ประกอบ

• ผ่าน ID ( getElementById )
• ผ่านแอตทริบิวต์ชื่อ ( getElementsByName )
• ผ่านชื่อแท็ก ( getElementsByTagName )
• ผ่านชื่อคลาส ( getElementsByClassName )
• รับองค์ประกอบผ่านตัวเลือก ( querySelector )
• ผ่านตัวเลือก กลุ่มขององค์ประกอบ ( querySelectorAll )
• วิธีการรับ html ( document.documentElement )
• วิธีการรับเนื้อหา ( document.body )

1. รับโดย ID (getElementById)

// 1 รับโหนดองค์ประกอบ // โดย id (find องค์ประกอบตามรหัส คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ หากมีหลายรหัสจะพบเพียงรหัสแรกเท่านั้น)
    document.getElementById('p1');

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

2. ค้นหาองค์ประกอบตามชื่อคลาส (getElementsByClassName)

// ค้นหาองค์ประกอบตามชื่อคลาส แยกชื่อคลาสหลายรายการด้วยการเว้นวรรคเพื่อรับ HTMLCollection (ชุดขององค์ประกอบที่มีแอตทริบิวต์ความยาว และคุณสามารถเข้าถึงองค์ประกอบภายในผ่านหมายเลขดัชนี )
    var cls = document.getElementsByClassName('ab');
    console.log(cls);

• พารามิเตอร์คือชื่อคลาสขององค์ประกอบ
• ค่าที่ส่งคืนจะเป็นอาร์เรย์ที่เหมือนอาร์เรย์ หากไม่พบ อาร์เรย์ว่างจะถูกส่งกลับ

3. ผ่านแอตทริบิวต์ name (getElementsByName)

// ค้นหาผ่านแอตทริบิวต์ name และส่งคืน NodeList (คอลเลกชันโหนดที่มีแอตทริบิวต์ความยาวที่สามารถ เข้าได้ทางเลขดัชนี)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. ตามชื่อแท็ก (getElementsByTagName)

// ค้นหาองค์ประกอบตามชื่อแท็กและส่งคืน HTMLCollection
    document.getElementsByTagName('p');

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

5. รับองค์ประกอบผ่านตัวเลือก (querySelector)

document.querySelector('.animated')

• เป็นตัวเลือก เช่น: "p. ชื่อคลาส"
• ส่งคืนโหนดเดียว หากมีองค์ประกอบที่ตรงกันหลายรายการ ให้ส่งคืน

6 ตัวแรก รับชุดขององค์ประกอบผ่านตัวเลือก (querySelectorAll)

document.querySelector('.animated')

• ค่าที่ส่งคืนคืออาร์เรย์คลาส

เพื่อรับโหนด

ใน Document Object Model (DOM) ) แต่ละโหนดเป็นวัตถุ โหนด DOM มีคุณลักษณะที่สำคัญสามประการ

: 1. nodeName: ชื่อของโหนด

2. nodeValue: ค่าของโหนด

3. nodeType: ประเภทของโหนด

1. แอตทริบิวต์ nodeName: ชื่อของโหนดซึ่งเป็นแบบอ่านอย่างเดียว .

ของ

• แอตทริบิวต์
• nodeName
ของโหนด
• ข้อความ
• จะเป็น #text เสมอ

. nodeValue Attribute: ค่าของโหนด

• nodeValue
• คือ
• ค่าของแอ็ตท
ริบิวต์

3. nodeType: the type ของโหนดซึ่งเป็นแบบอ่านอย่างเดียว ประเภทโหนดที่ใช้กันทั่วไปต่อไปนี้:

• ประเภทองค์ประกอบ ประเภทโหนด
• องค์ประกอบ 1
• คุณลักษณะ 2
• ข้อความ 3 ช่องว่างยังส่งคืน 3
• ความคิดเห็น 8
• เอกสาร 9

สร้างโหนด:

1. สร้างโหนด: createElement('')

// สร้างองค์ประกอบ มันถูกสร้างขึ้นและไม่ได้เพิ่มลงใน html โดยจะต้องใช้ร่วมกับ appendChild var elem = document.createElement(' พี');
    elem.id = 'ทดสอบ';
    elem.style = 'สี: แดง';
    elem.innerHTML = 'ฉันเป็นโหนดที่สร้างขึ้นใหม่';
    document.body.appendChild(elem);

2. การแทรกโหนด: appendChild ()

• การใช้งานคือ: parent.appendChild(child)
• จะเพิ่มโหนดย่อยที่ ส่วนท้าย ของโหนดหลัก
• หากโหนดย่อยมีอยู่เดิม โหนดดั้งเดิมจะเป็น ลบออก เพิ่มโหนดใหม่ต่อท้าย แต่เหตุการณ์จะยังคงอยู่

var oNewp=document.createElement("p");
      var oText=document.createTextNode("สวัสดีชาวโลก");
      oNewp.appendChild(oText);

2-1. แทรกโหนด: insertBefore()

• การใช้งานคือ parent.insertBefore(newNode,refNode);

var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

ลบโหนด

1 ลบโหนด:

• การใช้งาน RemoveChild คือ: parent.removeChild(child)
• หากคุณลบโหนดลูกที่ไม่ใช่องค์ประกอบหลัก ข้อผิดพลาดจะถูกรายงาน

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Clone node

1. Clone node: parent.cloneNode() false หรือ true

• Clone node (จำเป็นต้องยอมรับพารามิเตอร์เพื่อระบุว่าจะคัดลอกองค์ประกอบหรือไม่)

// Clone node (จำเป็นต้องยอมรับพารามิเตอร์ เพื่อระบุว่าจะคัดลอกองค์ประกอบ) องค์ประกอบ)
    var form = document.getElementById('ทดสอบ');
    var clone = form.cloneNode (จริง);
    โคลน.id = 'test2';
    document.body.appendChild(clone);

แทนที่โหนด

1 แทนที่วิธีโหนด node.replace (ใหม่, เก่า)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

ของกล่องส่วนเอกสาร

• : เมื่อเพิ่มโหนดจำนวนมากลงในเอกสาร มันจะช้ามากหากเพิ่มทีละรายการ ในกรณีนี้ คุณสามารถใช้ส่วนย่อยของเอกสารได้ เพิ่มลงในเอกสารทันที
• ไวยากรณ์: createDocumentFragment
• (

)
    -
        var start = Date.now();
        var str = '', ลี;
        var ul = document.getElementById('ul');
        ส่วน var = document.createDocumentFragment();
        สำหรับ (var i=0; i<10000; i++)
        -
            li = document.createElement('li');
            li.textContent = ''+i+'โหนดย่อยที่ ';
            ส่วนผนวกเด็ก (li);
        -
        ul.appendChild (ส่วน);
        console.log('Time Execution:'+(Date.now()-start)+'milliseconds'); // 63 มิลลิวินาที})();

[คำแนะนำที่เกี่ยวข้อง: วิดีโอสอน JavaScript, ส่วนหน้าของเว็บ]

ข้างต้นคือ จุดความรู้ JavaScript จัดระเบียบรายละเอียดของการรับองค์ประกอบและโหนด สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องในเครือข่ายซอร์สโค้ด!