StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
14028960
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
14
CommunityOwnedDate
2012-12-25T08:26:26.553
CreationDate
2012-12-25T08:26:26.553
FavoriteCount
0
LastActivityDate
2017-03-13T23:46:27.663
LastEditDate
2017-03-13T23:46:27.663
LastEditorUserId
218196
OwnerUserId
218196
ParentId
14028959
PostTypeId
2
Score
122
ViewCount
0
LastEditorDisplayName
text
Body
Short and simple: Because the elements you are looking for do not exist in the document (yet). <hr> For the remainder of this answer I will use <code>getElementById</code> as example, but the same applies to <a href="https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName" rel="noreferrer"><code>getElementsByTagName</code></a>, <a href="https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector" rel="noreferrer"><code>querySelector</code></a> and any other DOM method that selects elements. Possible Reasons There are two reasons why an element might not exist: <ol> <li>An element with the passed ID really does not exist in the document. You should double check that the ID you pass to <code>getElementById</code> really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!). Incidentally, in the <a href="http://caniuse.com/queryselector" rel="noreferrer">majority of contemporary browsers</a>, which implement <code>querySelector()</code> and <code>querySelectorAll()</code> methods, CSS-style notation is used to retrieve an element by its <code>id</code>, for example: <code>document.querySelector('#elementID')</code>, as opposed to the method by which an element is retrieved by its <code>id</code> under <code>document.getElementById('elementID')</code>; in the first the <code>#</code> character is essential, in the second it would lead to the element not being retrieved.</li> <li>The element does not exist at the moment you call <code>getElementById</code>.</li> </ol> The latter case is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail. Consider the following example: <pre><code><script> var element = document.getElementById('my_element'); </script> <div id="my_element"></div> </code></pre> The <code>div</code> appears after the <code>script</code>. At the moment the script is executed, the element does not exist yet and <code>getElementById</code> will return <code>null</code>. jQuery The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist. An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system: <pre><code><script src="//somecdn.somewhere.com/jquery.min.js"></script> </code></pre> this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http:// It has the unfortunate side effect of attempting and failing to load <code>file://somecdn.somewhere.com...</code> <hr> Solutions Before you make a call to <code>getElementById</code> (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded. This can be ensured by simply putting your JavaScript after the corresponding DOM element <pre><code><div id="my_element"></div> <script> var element = document.getElementById('my_element'); </script> </code></pre> in which case you can also put the code just before the closing body tag (<code></body></code>) (all DOM elements will be available at the time the script is executed). Other solutions include listening to the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.onload" rel="noreferrer"><code>load</code> [MDN]</a> or <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/DOMContentLoaded_%28event%29" rel="noreferrer"><code>DOMContentLoaded</code> [MDN]</a> events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers. Example: <pre><code>window.onload = function() { // process DOM elements here }; // or // does not work IE 8 and below document.addEventListener('DOMContentLoaded', function() { // process DOM elements here }); </code></pre> Please see the <a href="http://www.quirksmode.org/js/introevents.html" rel="noreferrer">articles at quirksmode.org</a> for more information regarding event handling and browser differences. jQuery First make sure that jQuery is loaded properly. <a href="http://www.netmagazine.com/tutorials/javascript-debugging-beginners" rel="noreferrer">Use the browser's developer tools</a> to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the <code>http:</code> or <code>https:</code> scheme at the beginning, adjust the path, etc.) Listening to the <code>load</code>/<code>DOMContentLoaded</code> events is exactly what jQuery is doing with <a href="http://api.jquery.com/ready/" rel="noreferrer"><code>.ready()</code> [docs]</a>. All your jQuery code that affects DOM element should be inside that event handler. In fact, the <a href="http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery" rel="noreferrer">jQuery tutorial</a> explicitly states: <blockquote> As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready. To do this, we register a ready event for the document. <pre><code>$(document).ready(function() { // do stuff when DOM is ready }); </code></pre> </blockquote> Alternatively you can also use the shorthand syntax: <pre><code>$(function() { // do stuff when DOM is ready }); </code></pre> Both are equivalent.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POWhy does jQuery or a DOM method such as getElementById not find the element?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USFelix Kling
UserOwnerUserId
1. USFelix Kling
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.