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

Accessing and manipulating child elements in DOM by JS/jQuery

本文关键字：DOM 元素 操作 JS jQuery 访问 通过      更新时间：2023-09-26

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

我已经简化了我的代码，但没有运气!

<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之间搞混了。这越来越烦人了。

正如我在评论中所说的，你错过了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中更容易阅读和更短)

如果你想访问id为#pagenum的元素，你可以直接这样做:

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

或jQuery

$('#pagenum')

您可以使用以下jQuery使用.find():

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

您可以使用后代(如下所示)，但find比它更快。

jQuery:

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

查找和派生选择器的结果:Link

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

HTML: 

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

function abi(event){
$("#NavigationButtons p#pagenum").text()
}
<<p> 小提琴演示/strong>

但是我建议你这样写jquery事件:

HTML: 

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

$(document).ready(function(){
    $("#btnAbi").click(function(){ 
   $("#NavigationButtons p#pagenum").text();
    });
});
相关文章：