Phương thức HTML DOM contains()

Phương thức HTML DOM contains() được dùng để tìm xem một nút có phải là hậu duệ của nút được chỉ định hay không. Một hậu duệ có thể là con trực tiếp của nút, cháu, và thậm chí là chắt. Nó trả về boolean true cho biết nút thực sự là hậu duệ của nút được chỉ định và false nếu nó không phải là hậu duệ của nút cho trước.

Cú pháp

Cú pháp sau đây dùng cho phương thức HTML DOM contains():

node.contains(givenNode)

Ở đây, givenNode là giá trị tham số bắt buộc chỉ định xem givenNode có được chứa bởi nút hay không.

Ví dụ

Hãy xem một ví dụ cho phương thức HTML DOM contains():

<!DOCTYPE html> <html> <head> <style> #DIV1{ border: 2px solid blue; width:160px; } </style> </head> <body> <div id="DIV1"> <p>Tôi sống ở <attr id="At" title="Hợp chúng quốc Hoa Kỳ">Mỹ</attr></p> </div> <p>Nhấn nút bên dưới để tìm ra nếu phần tử attr là hậu duệ của phần tử div hay không</p> <button type="button" onclick="divDesc()">CHỨA</button> <p id="Sample"></p> <script> function divDesc() { var attr = document.getElementById("At"); var div = document.getElementById("DIV1").contains(attr); if(div==true) document.getElementById("Sample").innerHTML = "Phần tử span là hậu duệ của phần tử div."; else document.getElementById("Sample").innerHTML = "Phần tử span không phải là hậu duệ của phần tử div."; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút HẬU DUỆ:

Trong ví dụ trên:

Chúng ta đã tạo một phần tử <div> với id "DIV1" có một phần tử <p> và bên trong phần tử <p> là phần tử <attr>. Một viền được áp dụng cho "DIV1" và chiều rộng của nó đã được chỉ định bằng kiểu dáng CSS:

#DIV1{ border: 2px solid blue; width:160px; } <div id="DIV1"> <p>Tôi sống ở <attr id="At" title="Hợp chúng quốc Hoa Kỳ">Mỹ</attr></p> </div>

Chúng ta đã tạo nút CHỨA thực thi phương thức divDesc() khi được nhấp bởi người dùng:

<button type="button" onclick="divDesc()">CHỨA</button>

Phương thức divDesc() lấy phần tử <attr> bằng phương thức getElementById() của đối tượng document và gán nó cho biến attr. Sau đó nó sử dụng phương thức contains của phần tử <div> và truyền phần tử <attr> làm tham số cho nó.

Vì phần tử <div> chứa phần tử <attr>, tức là phần tử <attr> là hậu duệ của phần tử <div>, nó trả về true. Sử dụng câu lệnh điều kiện, chúng ta hiển thị văn bản thích hợp bằng thuộc tính innerHTML trong đoạn văn với id "Sample":

function divDesc() { var attr = document.getElementById("At"); var div = document.getElementById("DIV1").contains(attr); if(div==true) document.getElementById("Sample").innerHTML = "Phần tử span là hậu duệ của phần tử div."; else document.getElementById("Sample").innerHTML = "Phần tử span không phải là hậu duệ của phần tử div."; }