在html中script应该放到那块，才不会影响dom操作?

最新推荐文章于 2024-09-22 11:17:00 发布

勇敢牛牛，向前冲

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量163

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/adghjkghjkl/article/details/114953883

版权

script应该放到那块，才不会影响dom操作?

今天在写一个有关dom的操作是函数时，当时打桩，发现返回来的是空值。当时我还以为dom的操作语句打错了，最后经过查找资料，我才发现是script引入的地方不对

错误的示范

// An highlighted block
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    var ul = document.getElementById("do");
    console.log(ul);
  </script>
  <body>
    <div id="do">
      <ul>
        <li>w</li>
        <li>e</li>
        <li>4</li>
      </ul>
    </div>
  </body>
</html>

结果
在这里插入图片描述

经过资料查询后的代码

// An highlighted block
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="do">
      <ul>
        <li>w</li>
        <li>e</li>
        <li>4</li>
      </ul>
    </div>
    <script>
      var ul = document.getElementById("do");
      console.log(ul);
      var lis = ul.getElementsByTagName("li");
      console.log(lis);
    </script>
  </body>
</html>

结果
在这里插入图片描述
经过修改，现在就可以进行dom间的操作，大家可以对比，其实代码没有变，只是script引入的位置发生了变化。

javascript代码应该放在那块

通常情况下，其实javaScript代码可以放在HTML文档的任何地方。但随这不同的地方，会对javascript代码的正常执行有一定影响。

一般放在之间

由于HTML文档是由浏览器从上到下依次载入的，将javascript代码放在标签之间，可以避免javascript代码操作HTML元素时，HTML元素还未载入而报错，因此需要将这段代码写到HTML元素后面例如：

// An highlighted block
 <body>
    <div id="do"></div>
    <script>
      var ul = document.getElementById("do");
      console.log(ul);
    </script>
  </body>