[javascript] 한 요소가 다른 요소에 포함되어 있는지 Javascript를 확인하는 방법

방금 ‘광산’을 공유해야했습니다.

개념적으로 Asaph의 대답 과 동일하지만 (동일한 브라우저 간 호환성, 심지어 IE6에서도 이점이 있음) 크기가 훨씬 작거나 크기가 자주 필요하지 않을 때 유용합니다.

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

.. 또는 한 줄짜리 문자 ( 64 문자 만 !) :

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

그리고 여기에 jsfiddle .

사용법 :
childOf(child, parent) 부울true| false.

설명 :
while while 조건이로 평가되는 한 평가합니다true. (AND) 연산자 반환이 부울 참 / 거짓을 된 후 왼쪽과 오른쪽을 평가할 만 한다면 좌측이 사실 ( ) .
&&left-hand && right-hand

(의 &&) 의 왼쪽 은 다음과 같습니다 (c=c.parentNode).
먼저 parentNodeof c를 할당 c한 다음 AND 연산자가 결과 c를 부울로 평가합니다 .
이후 parentNode반환 null부모 왼쪽이없는 경우 null로 변환되어 false더 이상 부모가 없을 때 잠시 루프가 제대로 중지됩니다.

(의 &&) 의 오른쪽 은 다음과 같습니다 c!==p. 비교 연산자 ‘이다 하지 정확히 동일한’. 따라서 자녀의 부모가 부모 (지정한)가 아니면로 평가 되지만 자녀의 부모 가 부모이면 평가됩니다 .
그래서 경우 FALSE로는, 그 조작 복귀 그동안 조건과 같은 동안 루프는 정지한다. (몸통이 필요없고 닫는 세미콜론이 필요합니다.)
!==truefalse
c!==p&&false;

따라서 while 루프가 끝날 때 부모를 찾았을 때 c노드가 아니고 노드가 아닌 (루프가 일치하지 않고 끝까지 갔을 때)nullnull

따라서 단순히 우리 return와 (노드 대신, 부울 값 환산) 사실 : return !!c;다음 !( NOT오퍼레이터)은 부울 값 (반전 true된다 false반대로). 해당 값을 반전시키기 전에 (노드 또는 널)을 부울
!c로 변환 c합니다. 따라서 초 !( !!c)를 추가하면 이 false가 다시 true !!로 변환됩니다. 따라서 double 은 종종 ‘무언가로 변환’하는 데 사용됩니다.

추가 :
기능의 몸 / 페이로드는 너무 작아서,이 경우에 따라 하나가 (이 자주 사용하고 코드에 한 번만 표시되지 않은 경우 등) 수있는 기능 (포장)를 생략하고 바로 동안 루프를 사용하는 경우에도 :

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
}

대신에:

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
}

답변

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

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

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

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

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

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