javascript - 通过 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)