Javascript 中的 Console.log() 或 getDocumentbyID？

Question

这个初学者级别的 Javascript 练习，我找到了 2 个可能的解决方案（见下面的代码）：

1. 控制台.log();
2. document.getElementById("valueID").innerHTML = 变量名；

在控制台 (F12) 或通过 DOM 打印解决方案有什么区别？ 我知道console.log(); 严格用于内部测试（针对开发人员）。 但是我什么时候应该使用“document.getElementByID”，是用于 DOM 操作吗？ 就性能而言，这两者之间还有其他区别吗？

谢谢。 这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Introduction</title>
</head>

<body>
   <h1>Introduction</h1>
   <p id="Name"></p>
   <p id="Surname"></p>
   <p id="Age"></p>

   <script>
       let name = prompt("Introduce your name: ");
       let surname = prompt("Introduce your surname: ");
       let age = prompt("Introduce your age: ");
       //TO PRINT OUT IN CONSOLE
       console.log(name + " " + surname + " " + age);

       document.getElementById("Name").innerHTML = name;
       document.getElementById("Surname").innerHTML = surname;
       document.getElementById("Age").innerHTML = age;
   </script>
</body>
</html>

Answer 1

如果我想检查某些东西是否正常工作，我会使用console.log 。 有时我的 function 正在工作，但到 DOM 的转换不起作用。

如果我使用getElementById ，我将看不到我的 function 是否正常工作，或者我的 DOM 操作是否正常工作。

希望这会有所帮助，我只是一个初学者:)

Answer 2

如您所说的 Console.log 用于开发，检查我们变量的值，但它对 DOM（页面）没有影响。

document.getElementById 将直接更改 DOM，它允许您更改您决定的实际页面和元素的值。

希望对你有帮助：）

Answer 3

console.log()是一个 function 写入一条消息以登录调试控制台，例如 Webkit 或 Firebug。 在浏览器中，您不会在屏幕上看到任何内容。 它将消息记录到调试控制台。 这不是 jQuery 功能，而是用于调试目的的功能。 例如，当发生某些事情时，您可以将某些内容记录到控制台。

document.getElementById()方法返回具有指定值的 ID 属性的元素。 而innerHTML会更改所提及ID 的特定元素的值。

document.getElementById()修改 DOM ，但console.log()不读取/写入/修改/更新 DOM