Question

我目前正在尝试使用Javascript访问HTML5中父节点的子节点。我最初尝试直接调用div但是没有工作:(。以下代码是我从Mozilla网站获得的代码：

＆＃13;

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p id="test1">hello word2</p>
        <p >hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
    </script>
</body>
</html>

＆＃13;

代码（如果你运行它）输出一个错误：

Error
    {
      "message": "Uncaught TypeError: parentDOM.getElementById is not a function",
      "filename": "http://stacksnippets.net/js",
      "lineno": 26,
      "colno": 29
    }

我知道脚本的第二行输出代码，但我不知道替换或如何修复代码。目的是使用Javascript访问<p id="test1">hello word2</p>。

我从中获取代码的地方是here。

Answer 1

由于ID是唯一的，因此您必须使用document.getElementById，因为它是唯一具有该功能的DOM元素。所以要test1使用它：

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

document以外的元素具有以下功能：getElementsByTagName，getElementsByClassName，querySelector和querySelectorAll，但不包含getElementById。

具有ID的元素无论其父级是什么都是唯一的。因此，在使用其ID获取该元素之前，必须知道元素的父元素。因此，没有必要将函数getElementById放在所有元素上，仅将它放在document上就可以了。

Answer 2

您引用的代码是抛出错误的脚本示例。您应该参考顶部标题为“语法”：

的示例

element = document.getElementById(id);

因此，要获得对ID为“test1”的元素的引用，只需调用：

document.getElementById("test1")

Answer 3

你可以做的是使用querySelector，它是所有浏览器的原生javascript（但是jquery esque）和supported（直到IE 9）。

var parentDOM = document.querySelector('#parent-id');
var test1 = parentDOM.querySelector('#test1');

Answer 4

由于您将jQuery列为标记 - 这是一个jquery答案 - 它也只使用元素id来定位元素。我是console.logging该元素的文本 - 一旦你拥有了所选元素，你就可以改变文本，样式，添加一个类或者你想做的任何事情。

$(document).ready(function(){
  var test1=$('#test1');
  var test1Text=test1.text();
  console.log(test1Text);
  })

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p id="test1">hello word2</p>
        <p >hello word3</p>
        <p>hello word4</p>
    </div>

</body>
</html>

使用Javascript的document.getElementByID来获取div的子节点

4 个答案: