Question

可能重复：
Access DIV element from JavaScript

我有一个HTML代码：

<div id="headerlist" >
<h3> Enrollment Efficiency</h3>
</div>

我必须访问元素注册效率

我正在尝试：

var headerlist = document.getElementsById('headerlist');
alert("the value of headerlist is "+ headerlist.firstChild);

但它不起作用。

Answer 1

只是一个错字。它是getElementById()（没有复数s）。

var headerlist = document.getElementById('headerlist');

id在整个文档中应该是唯一的，因此这个函数只能返回一个元素。如果可以匹配多个元素，例如getElementsByName()，则会有多个s。

编辑

如@Cerbrus所述：firstChild属性，只指向第一个子元素，而不指向其内容。

在此发表评论：

示例中的firstChild只是一个空白文本节点。如果您希望下一个非空白节点使用firstElementChild（supported in most modern browswers）。
要显示内容，请使用innerHTML或textContent之类的内容。

Answer 2

函数getElementByid是单数，而不是复数。

Answer 3

与其他人一样，请从s - ＆gt;中删除getElementsById getElementById。

此外，firstChild将返回分隔div和h3的textNode。试试这个：

function getFirstChild(element) {
    do { 
        element = element.firstChild;
    } while (element && element.firstChild!== 1);
    return element;
}
// Usage: getFirstChild(headerlist);

导致：

var headerlist = document.getElementById('headerlist');
console.log("the value of headerlist is ", getFirstChild(headerlist).innerHTML);

Answer 4

可能您想要访问内部HTML元素的数据。所以这是你的代码如何实现它

<强> CHECK HERE

您可以通过以下方式访问父元素的所有子元素。

<!DOCTYPE html>
<html>
<body>
<div id="amu">
<div id="a"> aa </div>
<h1>aaaa </h1>
<h3> bbbb </h3>
</div>

<div onclick="check()"> click Me </div>
</body>
<script>
function check() {
var childNodeArray = document.getElementById('amu').getElementsByTagName('*');
alert(childNodeArray.length);
for (i=0; i < childNodeArray.length; i++)
alert(childNodeArray[i].innerHTML);
}
</script>
</html>

Answer 5

在jQuery中使用此代码（javascript中的库）

alert($("#headerlist").eq(0).text());

DEMO

如何使用javascript访问div中的元素

5 个答案: