Question

我正在学习Javascript，我发现输出代码的首选方法是document.getElementById ...而Document.write只能用于测试......

这是输出任何脚本的最佳方式吗？代码究竟做了什么？我写了下面的代码，我不确定＆＃34; demo＆＃34;发挥作用，为什么有必要......

<html>
    <head>
        <script>

            function addNumbers(arr){
                 var i, answer =0;

                 for(i=0; i<arr.length; i++){
                     answer += arr[i];

                 }
                 return answer;
            }

        </script>
    </head>

    <body>

        <h4> Function addNumbers: </h4>

        <p id="demo"></p>

        <script> 

            var myArray = [1,2,3,4,5,6,7,8,9];
            document.getElementById("demo").innerHTML = addNumbers(myArray); 

        </script>

    </body>
</html>

Answer 1

演示是指带有id＆＃34; demo＆＃34;的段落。您使用ID（在HTML页面中必须是唯一的）来识别和使用javascript中的html标记。

document.write确实不再经常使用了。原因有多种。由于网上有详细说明，请查看these answers或此article。

如果添加一些缺少的标记，例如</head>，<body>和<script>，并且控制台日志正在发生，那么您的代码可以正常运行。在下面的片段中运行。

作为一个侧标，现在更好的做法是在结束</body>标记之前完成您的javascript内容并在页面底部加载。因为加载DOM后会发生任何加载。

＆＃13;

function addNumbers(arr) {
  var i, answer = 0;

  for (i = 0; i < arr.length; i++) {
    answer += arr[i];

  }
  return answer;
}

var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

document.getElementById("demo").innerHTML = addNumbers(myArray);

console.log(addNumbers(myArray))

＆＃13;

<html>

<head>

</head>

<body>

  <h4> Function addNumbers: </h4>

  <p id="demo">This is a paragraph that can be identified using the id attribute.</p>

</body>

</html>

＆＃13;

Answer 2

后退一步，前进两步：

document.write是一组三个函数之一

document.open()打开一个文档，用于从头开始编写，删除现有文档内容（如果有）。
document.write( string)将字符串插入到用于构建网页的字符流中。
document.close()关闭要写入的文档。任何进一步的写入都将重新打开文档并清除过程中的现有内容。

现在考虑

在页面输入流的末尾，文档会自动关闭。
文档使用＆＃34;文档对象模型＆＃34; （＆＃34; DOM＆＃34;）可以在脚本中访问和操作。
document.open/write/close在DOM标准化并可供使用之前发起。

所以document.write在现代网络编程中几乎没用。如果在页面加载完成后使用，它会擦除页面。它几乎完全局限于尚未学习DOM存在的学生的教程，偶尔也会以编程方式编写用window.open打开的子窗口的内容。

页面中的所有HTML元素都作为DOM中的HTMLelement节点存在。这些可以通过调用document.getElementById或document.querySelector等方法来访问，并作为JavaScript对象值返回。 HTMLElements根据标记类型而不同，但如果它们表示HTML容器元素，则具有innerHTML和textContent等属性，当使用脚本中的文本字符串更新时，更改呈现页面的内容。 / p>

在回答你的问题时，＆＃34;演示＆＃34;是HTMLParagraphElement的id值，其中id值用于访问DOM中的特定元素 - id值在页面HTMLElements中应该是唯一的。

通过使用document.getElementById查询DOM获得（段落）元素对象。随后更改元素innerHTML内容会导致使用新内容重新呈现文档，更新页面显示。

Answer 3

您的代码运行正常。请在下面查看。我在这里看不到任何问题。如果你想在带有demo id的元素内的页面上显示结果，那么就可以正常工作了。如果要在控制台中打印值，则console.log是执行此操作的正确方法。为此，只需在代码中声明此数组console.log(addNumbers(myArray))后将函数传递给var myArray = [1,2,3,4,5,6,7,8,9];。

<html>
    <head>
        <script>

            function addNumbers(arr){
                 var i, answer =0;

                 for(i=0; i<arr.length; i++){
                     answer += arr[i];

                 }
                 return answer;
            }

        </script>
    </head>

    <body>

        <h4> Function addNumbers: </h4>

        <p id="demo"></p>

        <script> 

            var myArray = [1,2,3,4,5,6,7,8,9];
            document.getElementById("demo").innerHTML = addNumbers(myArray); 

        </script>

    </body>
</html>

输出Javascript的最佳方式？

3 个答案: