DOM1 Javascript not working

DOM1 Javascript not working

本文关键字：working not Javascript DOM1      更新时间：2023-09-26

我可能做错了，我先学习了Jquery和简单的东西。参加javascript课程学习DOM0;

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
     function addBorder(){
          for var i=0; i<document.getElementsByTagName('img').length; i++) {
               document.getElementsByTagName('img')[i].style.border="3px solid red");
          }
     }
</script>
<script type="text/javascript">
     window.onload=addBorder;
</script>
</head>
<body>
<img src="image1.jpg" />
<img src="image2.jpg" />
</body>
</html>

快速输入，如果有错字忽略。没有错误，也没有活动。

尝试了所有不同的方法，DOM0文档。图像…window = function(){…

总是什么都没有。得到的基本思想，图像加载后的脚本，如果放置在主体它的工作很好。但是为什么它不能工作在window.onload=??

您的源代码中有一个错字，正如Ryan指出的那样(您需要在var和i之间加一个空格)

虽然这是一个初级课程，但你可能想从一开始就养成好习惯。一般来说，应该尽可能少地查看DOM。每次调用document.getElementsByTagName('img')时，函数都会转到DOM 。因为它是在for循环中，所以可能是一个批次。当然，在您的示例中只有两个img标记，但请考虑将此脚本应用于实际页面。

触摸DOM一次并将结果缓存到变量中通常是一个好主意，如下所示:

function addBorder() {
      var images = document.getElementsByTagName('img');
      for (var i=0; i < images.length; i++) {
           images[i].style.border = "3px solid red";
      }
}

这样，您只访问DOM一次，然后使用变量images(它的作用域为您的函数)。

此外，您可以(应该)将它们放在HTML文档中的相同script标记中(因为它们是内联脚本)。因为你只调用一个函数，而且是在window上调用它。Onload，您可以简化它并将其封装在一个立即调用的函数表达式中(进一步阅读)，如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
    (function () {
          var images = document.getElementsByTagName('img');
          for (var i=0; i < images.length; i++) {
               images[i].style.border = "3px solid red";
          }
    })();
</script>
</head>
<body>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
</body>
</html>

当我正确地修正了代码的语法后，我就看到了图像上的红色边框:

 function addBorder() {
      for (var i=0; i < document.getElementsByTagName('img').length; i++) {
           document.getElementsByTagName('img')[i].style.border = "3px solid red";
      }
 }
相关文章：