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

Question

我在页面加载时访问我的元素时遇到了问题。

我已将代码简化为此，但没有运气！

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

JS：

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

我尝试过不同的JSFiddle选项，例如onload，ondomready，没有换行头，没有换身...... 我也试过在jQuery中写这个：

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

我在JS和jQuery之间如此混乱。这令人讨厌。

Answer 1

正如我在评论中所说，你错过了jQuery版本中最重要的$：

选择器的基本测试：

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

但你真的需要从jQuery中连接你的按钮代码：

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

并为您的按钮指定一个ID：

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

注意：$(function(){ YOUR CODE HERE });是$(document).ready(function(){ YOUR CODE HERE });

的快捷方式

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

*如果您要使用jQuery ，我建议忘记getElementById存在：）*

更新

由于您感兴趣的项目已有ID，因此您可以简化为：

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

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

关于JavaScript版本的说明：

Javascript不像jQuery那样将方法链接在一起。 document.getElementById("NavigationButtons").getElementById("pagenum")永远不会奏效。 getElementById仅存在于文档中，因此在第一次调用返回的DOM元素上尝试再次调用它将产生错误。

由于您的最终目标元素具有ID，您可以这样做：

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

根据以下评论添加：

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;

如果您想要合理的声音方法来访问属性，请坚持使用jQuery。如果你必须在页面上使用任何 jQuery，你也可以使用jQuery 全部（因为代码通常比RAW中的代码更可读和更短） JavaScript）

Answer 2

如果您想访问ID为#pagenum的元素，可以按如下方式直接访问：

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

或使用jQuery

$('#pagenum')

Answer 3

如果你使用jquery，你需要做的很简单：

<强> HTML：

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

<强> Jquery的：

function abi(event){

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

}

FIDDLE DEMO

但我建议你这样写jquery事件：

<强> HTML：

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

<强> JQUERY：

$(document).ready(function(){

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

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

    });

});

Answer 4

您可以使用以下jQuery usind .find()：

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

您可以使用后代（如下所示），但发现速度比它快。

带后代选择器的jQuery：

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

使用find和descendent选择器的结果：Link