How to check whether document.getElementById gives empty result?

Question

When searching for one or more dom elements using document.getElementById, a single dom element is returned with typeof(node) -> "object".

If no dom element is found for the query, a null object is returned which also gives typeof(node) -> "object".

caseOne = document.getElementById('contentSub')
   -> <div id="contentSub">
typeof(caseOne)
   -> "object"

caseTwo= document.getElementById('qwert')
   -> null
typeof(caseTwo)
   -> "object"

How to check whether a call to document.getElementById has been successful, in the sense that a dom element has been returned that may be further processed?

score 3 · Answer 1 · answered Aug 23 '17 at 08:57

3

Well to check if the returned object isn't undefined, simply use !caseOne:

var caseOne = document.getElementById('contentSub')
if(!caseOne){
    //It's undefined
}

answered Aug 23 '17 at 08:57

cнŝdk

31,391
7
56
78

Oghli · Answer 2 · 2017-08-23T11:17:55.043

1

You can achieve that by simple evaluation condition for the returned element object of method document.getElementById:

if(document.getElementById('contentSub') != null){
     console.log("element exists");
}
else {
     console.log("element doesn't exist");
}

edited Aug 23 '17 at 11:17

answered Aug 23 '17 at 10:05

Oghli

2,200
1
15
37

score 0 · Answer 3 · answered Aug 23 '17 at 08:50

0

To check whether a the returned value has something in it, you can create your own method like isEmpty().

function isEmpty(value){
    return value === null || typeof(value) === 'undefined' || value === ''
}

This method checks all cases.

answered Aug 23 '17 at 08:50

SBylemans

1,764
13
28

How to check whether document.getElementById gives empty result?

3 Answers3