วิธีการตรวจสอบใน Javascript หากองค์ประกอบหนึ่งอยู่ในองค์ประกอบอื่น

ฉันจะตรวจสอบได้อย่างไรว่าองค์ประกอบหนึ่งของ DOM เป็นองค์ประกอบย่อยขององค์ประกอบอื่นของ DOM หรือไม่ มีวิธีการในตัวสำหรับสิ่งนี้หรือไม่? ตัวอย่างเช่น:

if (element1.hasDescendant(element2)) 

หรือ

if (element2.hasParent(element1)) 

ถ้าไม่เช่นนั้นความคิดวิธีการทำเช่นนี้? นอกจากนี้ยังต้องมีเบราว์เซอร์ข้าม ฉันควรพูดถึงด้วยว่าเด็กสามารถซ้อนกันหลายระดับด้านล่างผู้ปกครอง

อัปเดต:ตอนนี้มีวิธีการดั้งเดิมเพื่อให้บรรลุเป้าหมายนี้ Node.contains(). พูดถึงในความคิดเห็นและคำตอบด้านล่างเช่นกัน

คำตอบเก่า:

การใช้parentNodeคุณสมบัติควรใช้งานได้ มันค่อนข้างปลอดภัยจากมุมมองข้ามเบราว์เซอร์ หากความสัมพันธ์เป็นที่รู้จักกันในระดับหนึ่งลึกคุณสามารถตรวจสอบได้เพียง:

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

หากเด็กสามารถซ้อนกันโดยพลการภายในผู้ปกครองคุณสามารถใช้ฟังก์ชั่นที่คล้ายกับรายการต่อไปนี้เพื่อทดสอบความสัมพันธ์:

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

คุณควรใช้Node.containsเนื่องจากตอนนี้มันเป็นแบบมาตรฐานและพร้อมใช้งานในเบราว์เซอร์ทั้งหมด

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

ฉันแค่ต้องแบ่งปัน 'ของฉัน'

แม้ว่าแนวความคิดจะเหมือนกับคำตอบของ 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 (และ) ผู้ประกอบการผลตอบแทนนี้บูล / เท็จจริงหลังจากการประเมินด้านซ้ายมือและด้านขวามือ แต่ถ้าด้านซ้ายมือเป็นความจริง ( ) true
&&left-hand && right-hand

ด้านซ้ายมือ (ของ&&) (c=c.parentNode)เป็น:
การดำเนินการนี้จะกำหนดค่าparentNodeของcถึงcและจากนั้นตัวดำเนินการ AND จะประเมินผลลัพธ์cเป็นบูลีน
เนื่องจากparentNodeส่งคืนnullหากไม่มีพาเรนต์เหลือnullอยู่และถูกแปลงไปfalseเป็น while-loop จะหยุดอย่างถูกต้องเมื่อไม่มีพาเรนต์อีกต่อไป

ด้านขวามือ (ของ&&) c!==pเป็น:
ตัว!==ดำเนินการเปรียบเทียบคือ ' ไม่เท่ากับทั้งหมด' ดังนั้นหากผู้ปกครองของเด็กที่ไม่ได้เป็นผู้ปกครอง (คุณระบุ) จะประเมินไปtrueแต่ถ้าพ่อแม่ของเด็กเป็นfalseผู้ใหญ่แล้วก็ประเมิน
ดังนั้นหาก c!==pประเมินเป็นเท็จตัว&&ดำเนินการจะคืนค่าfalseเป็น while-condition และ while-loop หยุดทำงาน (โปรดทราบว่าไม่จำเป็นต้องใช้สักครู่ขณะหนึ่งและ;ต้องใช้เครื่องหมายอัฒภาคปิด)

ดังนั้นเมื่อ while-loop สิ้นสุดลงcเป็นทั้งโหนด (ไม่ใช่null) เมื่อพบ parent หรือเป็นnull(เมื่อวนรอบผ่านไปยังจุดสิ้นสุดโดยไม่ต้องค้นหาคู่)

ดังนั้นเราก็returnว่าจริง (แปลงเป็นค่าบูลีนแทนของโหนด) ด้วย: return !!c;ที่: !( NOTผู้ดำเนินการ) ตีความค่าบูลีน ( trueกลายเป็นfalseและในทางกลับกัน)
!cแปลงc(โหนดหรือ null) เป็นบูลีนก่อนที่จะสามารถกลับค่านั้น ดังนั้นการเพิ่มวินาที!( !!c) จะแปลงค่าเท็จกลับเป็นจริง (ซึ่งเป็นสาเหตุว่าทำไมค่า 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
}

มันไม่สำคัญว่าองค์ประกอบนั้นจะเป็นลูกโดยตรงหรือไม่ก็ตาม

อีกทางเลือกหนึ่งโดยใช้.contains()วิธีการ :

ตัวอย่างที่นี่

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

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

ลองดูที่โหนด # compareDocumentPosition

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

ความสัมพันธ์อื่น ๆ ได้แก่DOCUMENT_POSITION_DISCONNECTED, และDOCUMENT_POSITION_PRECEDINGDOCUMENT_POSITION_FOLLOWING

ไม่รองรับใน IE <= 8

คุณสามารถใช้วิธีการที่มี

var result = parent.contains(child);

หรือคุณสามารถลองใช้comparDocumentPosition ()

var result = nodeA.compareDocumentPosition(nodeB);

อันสุดท้ายมีพลังมากขึ้น: มันคืน bitmask ตามผลลัพธ์

ฉันพบรหัสที่ยอดเยี่ยมเพื่อตรวจสอบว่าองค์ประกอบนั้นเป็นลูกขององค์ประกอบอื่นหรือไม่ ฉันต้องใช้สิ่งนี้เพราะ IE ไม่รองรับ.containsวิธีองค์ประกอบ หวังว่านี่จะช่วยผู้อื่นเช่นกัน

ด้านล่างเป็นฟังก์ชั่น:

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

ลองอันนี้:

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

ฉันเพิ่งเจอฟังก์ชันนี้ซึ่งอาจทำ:

Node.compareDocumentPosition ()