ตรวจสอบว่าไม่มี div ด้วยจาวาสคริปต์


92

การตรวจสอบว่ามี div นั้นค่อนข้างง่ายหรือไม่

if(document.getif(document.getElementById('if')){

}

แต่ฉันจะตรวจสอบได้อย่างไรว่า div ที่มี id ที่ระบุไม่มีอยู่

คำตอบ:


152
var myElem = document.getElementById('myElementId');
if (myElem === null) alert('does not exist!');

1
ขอบคุณมาก. ฉันใช้ AngularJS และ Bootstrap modal windows ด้วยเหตุผลบางอย่าง JQuery ไม่พบองค์ประกอบในหน้าต่างโมดอล Vanilla JS ทำงานได้ดี
krex

75
if (!document.getElementById("given-id")) {
//It does not exist
}

คำสั่งdocument.getElementById("given-id")จะส่งคืนnullหากองค์ประกอบที่มีgiven-idไม่มีอยู่และnullมีความหมายที่ไม่ถูกต้องซึ่งแปลเป็นเท็จเมื่อประเมินในคำสั่ง if ( ค่าเท็จอื่น ๆ )


4
สวัสดี Esailija ฉันคิดว่าคุณน่าจะเป็นคำตอบที่ดีที่สุดถ้าคุณเพิ่มรายละเอียดว่าทำไม "!" ทำได้ดี. บางทีอาจบอกว่ามันส่งคืนค่าว่างซึ่งเป็นเท็จ +1 จากฉัน
Alex KeySmith

4
ผู้คนสามารถ google ว่า "!" หมายถึงในจาวาสคริปต์หรือในภาษาอื่น ๆ ไม่ใช่วิทยาศาสตร์จรวด
CommandZ

7
@CommandZ: ทำไมต้องบังคับให้คนใช้ Google ในเมื่อคำอธิบายแบบอินไลน์ง่ายๆจะเร็วกว่า นอกจากนี้ฉันเชื่อว่าสิ่งที่อเล็กซ์ได้รับคือการnullประเมินfalseซึ่งไม่ใช่ความรู้ทั่วไป (C # เป็นภาษาที่nullไม่เท่ากับเท็จ)
Doug S

1
@DougS nullไม่เท่ากับfalseแม้กระทั่งในการเปรียบเทียบความเท่าเทียมแบบบีบบังคับ - การเรียกร้องให้ToBoolean(null)ส่งคืนfalse
Esailija

10

ลองรับองค์ประกอบด้วย ID และตรวจสอบว่าค่าที่ส่งคืนเป็นโมฆะ:

document.getElementById('some_nonexistent_id') === null

หากคุณใช้ jQuery คุณสามารถทำได้:

$('#some_nonexistent_id').length === 0

2
มีเหตุผลที่คุณไม่สามารถทำได้!document.getElementById('foo')หรือไม่?
Snuffleupagus

@ElatedOwl อาจเกิดขึ้นได้ที่คุณสามารถดำเนินการกับอินพุตจำนวนมากและคุณต้องการตรวจสอบว่ามีอยู่หรือไม่ มันจะไม่มีจุดหมายสำหรับdocument.getElementById()ตอนนั้น
ดานอน

10

ตรวจสอบทั้งรหัส JavaScript และ JQuery ของฉัน:

JavaScript:

if (!document.getElementById('MyElementId')){
    alert('Does not exist!');
}

jQuery:

if (!$("#MyElementId").length){
    alert('Does not exist!');
}


1

ที่ใช้ได้กับ:

 var element = document.getElementById('myElem');
 if (typeof (element) != undefined && typeof (element) != null && typeof (element) != 'undefined') {
     console.log('element exists');
 }
 else{
     console.log('element NOT exists');
 }

1

มีทางออกที่ดีกว่านี้ คุณไม่จำเป็นต้องตรวจสอบว่าองค์ประกอบส่งคืนnullหรือไม่ คุณสามารถทำได้ง่ายๆ:

if (document.getElementById('elementId')) {
  console.log('exists')
}

รหัสนั้นจะเข้าสู่existsคอนโซลก็ต่อเมื่อองค์ประกอบนั้นมีอยู่จริงใน DOM


0

ฉันทำด้านล่างและตรวจสอบว่าidมีอยู่และเรียกใช้ฟังก์ชันหากมีอยู่

var divIDVar = $('#divID').length;
if (divIDVar === 0){ 
    console.log('No DIV Exist'); 
} else{  
    FNCsomefunction(); 
}   

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.