通过JS / jQuery访问和操纵DOM中的子元素

Question

I've got a problem in accessing my elements upon page loading.

I have simplified my code down to this but to no luck!

<div id="NavigationButtons">
  <p id="pagenum">
    10
  </p>
</div>

JS:

function abi(){
  var page = document.getElementById("NavigationButtons").getElementById("pagenum");
}

I've tried different JSFiddle options like onload , ondomready , no wrap head, no wrap body... I've also tried to write this in jQuery:

var p = ('#NavigationButtons > p#pagenum').text();

I am so mixed up between JS and jQuery.This is getting annoying.

Answer 1

As I was saying in my comment, you are missing the all-important $ on your jQuery version:

Basic test of selector:

$(function(){
    var p = $('#NavigationButtons > p#pagenum').text();
    alert(text);
});

but you really need to hook up your button code from jQuery too:

$(function(){
    $('#abi').click(function() {
            var p = $('#NavigationButtons > p#pagenum').text();
            alert(p);
        });
});

and give your button an id:

<input id="abi" type="button"/>`

note: $(function(){ YOUR CODE HERE }); is a shortcut for $(document).ready(function(){ YOUR CODE HERE });

http://jsfiddle.net/TrueBlueAussie/wK2FM/3/

*If you are going to use jQuery at all I would recommend forgetting that getElementById exists :)*

Update:

As your item of interest already has an id you can simplify to:

$(function(){
    $('#abi').click(function() {
            var p = $('#pagenum').text();
            alert(p);
        });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/wK2FM/4/

Notes about JavaScript version:

Javascript does not chain methods together the way jQuery does. document.getElementById("NavigationButtons").getElementById("pagenum") will never work. getElementById only exists on document, so trying to then call it again, on the DOM element returned from the first call, will give an error.

As your final target element has an id you could just do:

var page = document.getElementById("pagenum");

Additions based on comment below:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/wK2FM/5/

 // Does not work as text is not a property of a DIV element
 var page=document.getElementById("pagenum").text;   

 // This one actually works as innerHTML IS a property of a DIV (and of all HTML elements)
 var page=document.getElementById("pagenum").innerHTML; 

 // Does not work as value is not a property of a DIV element
 var page=document.getElementById("pagenum").value;

if you want sensible sounding methods to access properties, stick with jQuery. If you have to use any jQuery on a page, you might as well do it all with jQuery (as the code will be generally more readable and shorter than the same in RAW JavaScript)

Answer 2

If you want to access an element with id #pagenum you can do so directly as follows:

 var page = document.getElementById("pagenum");

or using jQuery

$('#pagenum')

Answer 3

if you are using jquery you need to do very simply like this:

HTML:

<input type="button" onclick="abi(this)"/>

Jquery:

function abi(event){

$("#NavigationButtons p#pagenum").text()

}

FIDDLE DEMO

But i will suggest you to write jquery event this way:

HTML:

<input type="button" id="btnAbi"/>

JQUERY:

$(document).ready(function(){

    $("#btnAbi").click(function(){ 

   $("#NavigationButtons p#pagenum").text();

    });

});

Answer 4

You can use following jQuery usind .find() :

function abi(){
var page = $("#NavigationButtons").find("#pagenum").text();
}

You can use descendent (like below), but find is faster than it.

jQuery with descendent selector :

function abi(){
    var page = $("#NavigationButtons #pagenum").text();
}

Result with find and descendent selector : Link