使用JavaScript编写HTML

吃一口奶黄包

已于 2022-11-12 21:40:17 修改

阅读量2.9k

点赞数

文章标签： javascript html 前端

于 2022-11-12 21:36:29 首次发布

本文链接：https://blog.csdn.net/weixin_73261958/article/details/127824018

版权

使用JavaScript编写HTML

1.什么是JavaScript？

JavaScript是一种脚本语言，通过Dom定义表示和修改文档所需的对象和这些对象的行为和属性以及这些对象之间的关系从而操作HTML文档，比如添加、移除、改变或重排页面上的项目，使得自己能与网页交互。

2.为什么要使用JavaScript编写HTML？

（1）使用DOM时,所有的文档信息都存于内存中,遍历简单,增强了易用性。
（2）可将js文件与html文件分离，使得html文档结构更加清晰，内容不繁琐

3.如何用JavaScript编写HTML?

编写方式

（1）在HTML直接插入JS代码
在这里插入图片描述

（2）调用JS文件
在这里插入图片描述

编写方法

利用Dom使JavaScript获得对HTML文档中所有元素进行访问的入口。

在这里插入图片描述
以上是Dom获得入口的常见方法，下面举两个例子
（1）获得body的子元素数量

  <body>
    <script type="text/javascript">
      function countBodyChildren() {
        let element = document.getElementsByTagName("body")[0];
        console.log(element.childNodes.length);
      }
    </script>
  </body>

（2）实现鼠标悬停时，文本为黑体字

  <body>
    <script type="text/javascript">
      function highlightRows() {
        let rows = document.getElementsByTagName("tr");
        for (let i = 0; i < rows.length; i++) {
          rows[i].onmouseover = function () {
            this.style.fontweight = "bold";
          };
          rows[i].onmouseout = function () {
            this.style.fontweight = "normal";
          };
        }
      }
    </script>
  </body>