Lấy phần tử bên trong phần tử theo lớp và ID - JavaScript

Question

Được rồi, tôi đã từng sử dụng JavaScript trước đây, nhưng điều hữu ích nhất mà tôi đã viết là trình chuyển đổi kiểu CSS. Vì vậy, tôi hơi mới với điều này. Giả sử tôi có mã HTML như sau:

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

Làm cách nào để thay đổi "Hello world!" để "Tạm biệt thế giới!" ? Tôi biết cách document.getElementByClass và document.getElementById làm việc, nhưng tôi muốn cụ thể hơn. Xin lỗi nếu điều này đã được hỏi lúc trước.

Answer 1

Vâng, trước tiên bạn cần phải chọn các phần tử có hàm như getElementById.

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

getElementById chỉ trả về một nút, nhưng getElementsByClassName trả về danh sách nút. Vì chỉ có một phần tử với tên lớp đó (theo như tôi có thể biết), bạn chỉ có thể lấy cái đầu tiên (đó là cái mà [0] dùng cho — nó giống như một mảng).

Sau đó, bạn có thể thay đổi html bằng .innerHTML.

targetDiv.innerHTML = "Goodbye world!"; 

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

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

Answer 2

Bạn có thể làm điều đó như thế này:

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

hoặc, nếu bạn muốn làm điều đó với với kiểm tra lỗi ít hơn và ngắn gọn hơn, nó có thể được thực hiện trong một dòng như thế này:

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

Giải thích:

1. Bạn nhận phần tử với id="foo".
2. Sau đó, bạn tìm thấy các đối tượng được chứa trong đối tượng đó có class="bar".
3. Điều đó trả về một danh sách nút giống như mảng, vì vậy bạn tham chiếu mục đầu tiên trong nút đó
4. Bạn có thể đặt innerHTML của mục đó để thay đổi nội dung của nó.

Cẩn thận: một số trình duyệt cũ không hỗ trợ getElementsByClassName (ví dụ: phiên bản cũ hơn của IE). Chức năng đó có thể được shimmed vào vị trí nếu thiếu.

---

Đây là nơi tôi khuyên bạn nên sử dụng thư viện có hỗ trợ bộ chọn CSS3 tích hợp hơn là lo lắng về khả năng tương thích của trình duyệt (cho phép người khác làm tất cả công việc). Nếu bạn muốn chỉ là một thư viện để làm điều đó, thì Sizzle sẽ làm việc tuyệt vời. Trong sizzle, điều này sẽ được thực hiện như thế này:

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

---

jQuery có thư viện sizzle built-in và trong jQuery, đây sẽ là:

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

Answer 3

Nếu đây cần phải làm việc trong IE 7 hoặc giảm bạn cần phải nhớ rằng getElementsByClassName không tồn tại trong tất cả các trình duyệt. Bởi vì điều này bạn có thể tạo getElementsByClassName của riêng bạn hoặc bạn có thể thử điều này.

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!"; 
    } 
} 

Answer 4

Bạn không nên sử dụng document.getElementById vì công việc của mình chỉ cho các điều khiển phía khách hàng mà id là cố định. Bạn nên sử dụng jquery thay vì như ví dụ dưới đây.

<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> 

sử dụng này: ""

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

// do not forget to add script tags as above 

nếu bạn muốn bất kỳ chỉnh sửa loại bỏ bất kỳ hoạt động sau đó chỉ cần thêm phía sau và làm các hoạt động

Answer 5

chức năng đệ quy:

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); 
     } 
    } 
} 

Answer 6

Cách dễ nhất để làm như vậy là:

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

hoặc có thể đọc được tốt hơn:

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