รับองค์ประกอบภายในองค์ประกอบตามคลาสและ ID - JavaScript

เอาล่ะฉันเคยขลุกอยู่กับ JavaScript มาก่อน แต่สิ่งที่มีประโยชน์ที่สุดที่ฉันเขียนคือ CSS style-switcher ดังนั้นฉันค่อนข้างใหม่สำหรับเรื่องนี้ สมมติว่าฉันมีโค้ด HTML ดังนี้:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

ฉันจะเปลี่ยนHello world!เป็นGoodbye world!อย่างไร

ฉันรู้วิธีdocument.getElementsByClassNameและdocument.getElementByIdการทำงาน แต่ฉันต้องการที่จะได้รับเฉพาะเจาะจงมากขึ้น ขออภัยหากมีการถามก่อนหน้านี้

getElementByIdดีแรกคุณจะต้องเลือกองค์ประกอบที่มีฟังก์ชั่นเช่น

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementByIdส่งคืนเพียงโหนดเดียว แต่getElementsByClassNameส่งคืนรายการโหนด เนื่องจากมีเพียงองค์ประกอบเดียวที่มีชื่อคลาสนั้น (เท่าที่ฉันบอกได้) คุณจึงสามารถหาได้รายการแรก (นั่นคือสิ่งที่[0]มีไว้สำหรับ - มันเหมือนกับอาร์เรย์)

จากนั้นคุณสามารถเปลี่ยน html ด้วย.textContent.

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

คุณสามารถทำได้ดังนี้:

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

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

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

ในคำอธิบาย:

1. id="foo"คุณจะได้รับองค์ประกอบด้วย
2. class="bar"แล้วคุณจะพบวัตถุที่มีอยู่ภายในวัตถุที่มี
3. ที่ส่งคืน nodeList ที่เหมือนอาร์เรย์ดังนั้นคุณจึงอ้างอิงรายการแรกใน nodeList นั้น
4. จากนั้นคุณสามารถตั้งค่าinnerHTMLของรายการนั้นเพื่อเปลี่ยนเนื้อหาได้

ข้อควรระวัง: เบราว์เซอร์รุ่นเก่าบางตัวไม่รองรับgetElementsByClassName(เช่น IE เวอร์ชันเก่า) ฟังก์ชั่นนั้นสามารถเปลี่ยนตำแหน่งได้หากขาดหายไป

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

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery มีไลบรารี Sizzle ในตัวและใน jQuery สิ่งนี้จะเป็น:

$("#foo .bar").html("Goodbye world!");

หากจำเป็นต้องทำงานใน IE 7 หรือต่ำกว่าคุณต้องจำไว้ว่า getElementsByClassName ไม่มีอยู่ในทุกเบราว์เซอร์ ด้วยเหตุนี้คุณจึงสามารถสร้าง getElementsByClassName ของคุณเองหรือลองทำเช่นนี้

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}

ฟังก์ชันเรียกซ้ำ:

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}

วิธีที่ง่ายที่สุดคือ:

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

หรืออ่านได้ดีกว่า:

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}

คุณไม่ควรใช้document.getElementByIDเนื่องจากใช้งานได้เฉพาะกับตัวควบคุมฝั่งไคลเอ็นต์ที่แก้ไขรหัส คุณควรใช้ jquery แทนดังตัวอย่างด้านล่าง

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

ใช้สิ่งนี้:

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

หากคุณต้องการลบแก้ไขการดำเนินการใด ๆ ให้เพิ่ม "." เบื้องหลังและดำเนินการ