使用Javascript的document.getElementByID來獲取div的子節點

Question

我目前正在嘗試使用Javascript訪問HTML5中父節點的子節點。 我試過最初指示直接調用div但是沒有用:(。下面的代碼是我從Mozilla網站獲得的代碼：

 <!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>

代碼（如果你運行它）輸出一個錯誤：

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> 。

我從這里開始代碼的地方。

Answer 1

由於ID是唯一的，因此您必須使用document.getElementById因為它是唯一具有該功能的DOM元素。 所以為了讓test1使用這個：

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

除document之外的元素具有以下函數： getElementsByTagName ， getElementsByClassName ， querySelector和querySelectorAll但不包含getElementById 。

具有ID的元素無論其父級是什么都是唯一的。 因此，在使用其ID獲取該元素之前知道元素的父級是必要的。 因此，沒有必要將函數getElementById放在所有元素上，只將它放在document才會生效。

Answer 2

您引用的代碼是拋出錯誤的腳本示例。 您應該參考頂部標題為“Syntax”的示例：

element = document.getElementById(id);

因此，要獲取對ID為“test1”的元素的引用，只需調用：

document.getElementById("test1")

Answer 3

你可以做的是使用querySelector，它是原生的javascript（但是jquery esque）並且得到所有瀏覽器的支持（直到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 個解決方案

解決方案1
1 2017-01-27 22:24:26

解決方案2
1 2017-01-27 22:28:27

解決方案3
1 2017-01-27 22:31:55

解決方案4
0 2017-01-27 22:27:06

使用Javascript的document.getElementByID來獲取div的子節點

問題描述

4 個解決方案

解決方案1 1 2017-01-27 22:24:26

解決方案2 1 2017-01-27 22:28:27

解決方案3 1 2017-01-27 22:31:55

解決方案4 0 2017-01-27 22:27:06

解決方案1
1 2017-01-27 22:24:26

解決方案2
1 2017-01-27 22:28:27

解決方案3
1 2017-01-27 22:31:55

解決方案4
0 2017-01-27 22:27:06