Cách kiểm tra Javascript nếu một yếu tố được chứa trong một yếu tố khác

Làm cách nào để kiểm tra xem một phần tử DOM có phải là phần tử con của phần tử DOM khác không? Có bất kỳ phương pháp được xây dựng cho điều này? Ví dụ: một cái gì đó như:

if (element1.hasDescendant(element2)) 

hoặc là

if (element2.hasParent(element1)) 

Nếu không thì làm sao có ý tưởng này? Nó cũng cần phải là trình duyệt chéo. Tôi cũng nên đề cập rằng đứa trẻ có thể được lồng nhiều cấp dưới cha mẹ.

Cập nhật: Bây giờ có một cách bản địa để đạt được điều này. Node.contains(). Đề cập trong bình luận và dưới đây câu trả lời là tốt.

Câu trả lời cũ:

Sử dụng parentNodetài sản nên làm việc. Nó cũng khá an toàn từ quan điểm đa trình duyệt. Nếu mối quan hệ được biết là sâu một cấp, bạn có thể kiểm tra nó đơn giản:

if (element2.parentNode == element1) { ... }

Nếu đứa trẻ có thể được lồng vào nhau một cách tùy tiện bên trong cha mẹ, bạn có thể sử dụng một chức năng tương tự như sau để kiểm tra mối quan hệ:

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

Bạn nên sử dụng Node.contains, vì giờ đây nó là tiêu chuẩn và có sẵn trong tất cả các trình duyệt.

https://developer.mozilla.org/en-US/docs/Web/API/Node.contains

Tôi chỉ phải chia sẻ 'của tôi'.

Mặc dù về mặt khái niệm giống như câu trả lời của Asaph (được hưởng lợi từ cùng khả năng tương thích trình duyệt chéo, thậm chí IE6), nó nhỏ hơn rất nhiều và có ích khi kích thước ở mức cao và / hoặc khi không cần thiết thường xuyên.

function childOf(/*child node*/c, /*parent node*/p){ //returns boolean
  while((c=c.parentNode)&&c!==p); 
  return !!c; 
}

.. hoặc là một lớp lót ( chỉ 64 ký tự !):

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

và jsfiddle ở đây .

Cách sử dụng:
childOf(child, parent) trả về booleantrue| false.

Giải thích:
while đánh giá miễn là điều kiện while đánh giátrue.
Các&&(AND) khai thác lợi nhuận boolean true / false này sau khi đánh giá tình hình bên trái tay và phía bên tay phải, nhưng chỉ nếu phía bên trái tay là sự thật ( left-hand && right-hand) .

Phía bên trái (của &&) là : (c=c.parentNode).
Đây đầu tiên sẽ giao parentNodecủa cđể crồi AND điều hành sẽ đánh giá kết quả cnhư một boolean.
Vì parentNodetrả về nullnếu không còn cha mẹ và nullđược chuyển đổi thành false, vòng lặp while sẽ dừng chính xác khi không còn cha mẹ nữa.

Phía bên tay phải (của &&) là : c!==p.
Các !==toán tử so sánh là ' không chính xác bằng'. Vì vậy, nếu cha mẹ của đứa trẻ không phải là cha mẹ (bạn đã chỉ định) thì nó ước tính true, nhưng nếu cha mẹ của đứa trẻ là cha mẹ thì nó sẽ đánh giá false.
Vì vậy, nếu c!==p đánh giá thành false, thì &&toán tử trả về falsekhi điều kiện while và vòng lặp while dừng lại. (Lưu ý không cần thiết trong một thời gian và đóng cửa; dấu chấm phẩy là bắt buộc.)

Vì vậy, khi vòng lặp while kết thúc, clà một nút (không phải null) khi nó tìm thấy cha mẹ HOẶC nó lànull (khi vòng lặp chạy đến hết mà không tìm thấy kết quả khớp).

Vì vậy chúng tôi chỉ đơn giản returnlà thực tế (quy đổi như giá trị boolean, thay vì nút) với: return !!c;: các !( NOTnhà điều hành) sẽ đảo ngược một giá trị boolean ( truetrở thành falsevà ngược lại).
!cchuyển đổi c(nút hoặc null) thành boolean trước khi nó có thể đảo ngược giá trị đó. Vì vậy, thêm một giây !( !!c) chuyển đổi sai này lại là true (đó là lý do tại sao một đôi !!thường được dùng để 'chuyển đổi bất cứ điều gì để boolean').

Bổ sung:
Phần thân / tải trọng của hàm nhỏ đến mức, tùy theo trường hợp (như khi nó không được sử dụng thường xuyên và chỉ xuất hiện một lần trong mã), người ta thậm chí có thể bỏ qua hàm (gói) và chỉ sử dụng vòng lặp while:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

c=a; while((c=c.parentNode)&&c!==b); //c=!!c;

if(!!c){ //`if(c)` if `c=!!c;` was used after while-loop above
    //do stuff
}

thay vì:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

c=childOf(a, b);    

if(c){ 
    //do stuff
}

Một giải pháp khác không được đề cập:

Ví dụ ở đây

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it's a child
}

Không quan trọng là phần tử có phải là con trực tiếp hay không, nó sẽ hoạt động ở mọi độ sâu.

Ngoài ra, sử dụng .contains()phương pháp :

Ví dụ ở đây

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it's a child
}

Hãy xem Node # soDocumentP vị trí .

function isDescendant(ancestor,descendant){
    return ancestor.compareDocumentPosition(descendant) & 
        Node.DOCUMENT_POSITION_CONTAINS;
}

function isAncestor(descendant,ancestor){
    return descendant.compareDocumentPosition(ancestor) & 
        Node.DOCUMENT_POSITION_CONTAINED_BY;
}

Các mối quan hệ khác bao gồm DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDINGvàDOCUMENT_POSITION_FOLLOWING .

Không được hỗ trợ trong IE <= 8.

Bạn có thể dùng phương thức chứa

var result = parent.contains(child);

hoặc bạn có thể thử sử dụng so sánhDocumentP vị trí ()

var result = nodeA.compareDocumentPosition(nodeB);

Cái cuối cùng mạnh hơn: kết quả là trả về bitmask.

Tôi đã bắt gặp một đoạn mã tuyệt vời để kiểm tra xem một phần tử có phải là phần tử con của phần tử khác hay không. Tôi phải sử dụng điều này bởi vì IE không hỗ trợ .containsphương thức phần tử. Hy vọng điều này sẽ giúp những người khác là tốt.

Dưới đây là chức năng:

function isChildOf(childObject, containerObject) {
  var returnValue = false;
  var currentObject;

  if (typeof containerObject === 'string') {
    containerObject = document.getElementById(containerObject);
  }
  if (typeof childObject === 'string') {
    childObject = document.getElementById(childObject);
  }

  currentObject = childObject.parentNode;

  while (currentObject !== undefined) {
    if (currentObject === document.body) {
      break;
    }

    if (currentObject.id == containerObject.id) {
      returnValue = true;
      break;
    }

    // Move up the hierarchy
    currentObject = currentObject.parentNode;
  }

  return returnValue;
}

Hãy thử cái này:

x = document.getElementById("td35");
if (x.childElementCount > 0) {
    x = document.getElementById("LastRow");
    x.style.display = "block";
}
else {
    x = document.getElementById("LastRow");
    x.style.display = "none";
}

Gần đây tôi đã bắt gặp chức năng này có thể làm:

Node.compareDocumentP vị trí ()