Question

我正在从头学习javascript。我目前正在尝试掌握DOM。我有一个像这样的HTML页面：

<html>
<head>
    <title>javascript</title>
</head>
<body>
    <h1>Welcome to javascript</h1>

    Visit me <a href="facebook.com">here.</a>

    <p> <img id="image" src="kalam.jpg"></p>

    <script type="text/javascript" src="code.js">
    </script>
</body>
</html>

现在，我想阅读a代码。

var links = document.body.getElementsByTagName("a")[0]; 

console.log(links.href);

工作正常。现在我想读图像。

var imageLink = document.body.getElementById("image");

console.log(imageLink.src);

但是，上面的代码不起作用。

我收到错误：

未捕获的TypeError：document.body.getElementById不是函数。

将其更改为：

var imageLink = document.getElementById("image");

console.log(imageLink.src);

工作正常。

我的问题是关于document.body.getEl...和document.getEl..之间的区别？

document.body只读取正文部分而document.getEl..读取整个文档包括标题等吗？如果是这样，那么上述代码不应该都有效吗？

Answer 1

document.getElementById()从文档中获取具有匹配ID的元素。

document.body.getElementById()不存在。

document.getElementsByTagName()获取与文档中的标记名称匹配的所有元素。

someOtherElement.getElementsByTagName获取与标记名称匹配的所有元素，以及someOtherElement的后代。

由于ID必须在HTML文档中是全局唯一的，因此getElementById方法通常不需要存在于document对象本身以外的任何位置。

Answer 2

getElementById 是文档对象的一个功能（因此它在 document.body 中根本不存在）

getElementsByTagName 是任何dom元素的函数（包括 document.body ）。

Answer 3

使用document.getElementById检索页面上具有指定ID的特定元素。 ID应该对页面上的每个元素都是唯一的。当你使用document.form（或其他）时，你正在过滤＆＃39;你的选择。

Answer 4

我认为如果你是新手，可能值得使用

document.querySelectorAll('a')[0]
document.querySelector('#image')
document.querySelector('.someclass')

只是因为它将tag，id和class都集成在一起。

document.body.getElementById和document.getElementById的区别

4 个答案: