使用JavaScript编写HTML

2023-11-18

使用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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用JavaScript编写HTML 的相关文章

随机推荐

  • LVGL V8学习之键盘按键样式重绘(二)

    这一篇继续研究一下基于btnmatrix的键盘按键重绘 是对上一篇LVGL V8学习之键盘按键样式重绘 一 的代码的优化 还是通过codeblock来模拟代码的运行 代码如下 按键矩阵的事件回调函数 static void btnmatri
  • vue后台管理系统—— 模糊查询和列表分页展示

    1 效果显示 通过输入作品名称或者开始时间或者结束时间来显示数据列表 这里的三项选择可以输入其一 也可以都输入 2 分页代码 用的是element组件 包括表格 上面的搜索 div class personalident top div
  • pycharm scrapy 爬取“文章”(文章阅读网)

    import scrapy import re from urllib import parse from scrapy http import Request from Article spider Article spider item
  • nvm使用大全nvm如何动态切换node版本

    注意 nvm use node版本时 要使用管理员权限打开cmd输入命令 否则报错 常用命令 nvm ls 列出所有已安装的 node 版本 nvm list 列出所有已安装的 node 版本 nvm list available 显示所有
  • java基础:日志框架

    文章目录 一 日志技术的概述 二 日志技术体系 三 Logback日志框架 四 Logback快速入门 五 Logback 配置详解 5 1 输出位置 格式设置 5 2 对日志不同内容是否输出的控制 一 日志技术的概述 程序中的日志可以用来
  • Linux 数据库备份与恢复

    1 备份数据主要使用dump命令 格式为 mysqldump u db user p db passwd db name gt backup dir db name time sql p 和 db passwd之间没有空格 不然 db pa
  • 加解密和签名验签简述

    文章目录 一 数字加密算法 1 对称加密 2 非对称加密 3 对称加密和非对称加密的区别 二 使用keytool生成证书 1 创建证书 2 查看密钥库 2 1 keytool list 命令 2 2 keytool list v 命令 3
  • Transformer:Attention is All You Need

    Transformer论文逐段精读 论文精读 https www bilibili com video BV1pu411o7BE share source copy web vd source 30e93e9c70e5a43ae75d429
  • 分析 ExitCode 定位 Pod 异常退出原因

    使用kubectl describe pod
  • vue 表单校验不通过时拦截提交表单

    上代码
  • JSP 弹出框 子页面给父页面回传参数

    做一个jsp的页面 然后又弹出一个对话框 并且把输入框的值返回到文本中 具体代码如下 1 父页面 写道
  • 引入纯 ESM 模块化的第三方包

    CSDN中文章不一定能及时更新 欢迎点击前往我的博客查看最新版本 许盛的博客 背景 今天要做个 CLI 工具 一路调研学习加实践都比较顺利 但是在引入 globby 这个库时 就开始报错了 Users xusheng workspace t
  • 2023华为OD机试真题【二元组个数/哈希表】

    题目描述 给定两个数组a b 若a i b j 则称 i j 为一个二元组 求在给定的两个数组中 二元组的个数 输入描述 第一行输入 m 第二行输入m个数 表示第一个数组 第三行输入 n 第四行输入n个数 表示第二个数组 输出描述 二元组个
  • mysql cstmt_MySQL

    创建一个以JDBC连接数据库的程序 包含7个步骤 1 加载JDBC驱动程序 在连接数据库之前 首先要加载想要连接的数据库的驱动到JVM Java虚拟机 这通过java lang Class类的静态方法forName String class
  • 《上海市居住证》签注和积分确认流程指南

    上海市居住证 签注和积分确认流程指南 一 办理条件 员工已经自行至社区事务受理服务中心办理 上海市居住证 签注 由于上海市居住地所属的社区事务中心非常多 具体申请相关流程指南及材料办理清单最好事先和居住地所属的社区事务中心确认 办理 上海市
  • SSL_CTX结构体

    定义在ssl h头文件中 struct ssl ctx st SSL METHOD method unsigned long options unsigned long mode STACK OF SSL CIPHER cipher lis
  • E-R图(Entity Relationship Diagram)实体关系模型

    E R图也称实体 联系图 Entity Relationship Diagram实体关系模型 提供了表示实体类型 属性和联系的方法 用来描述现实世界的概念模型 它是描述现实世界关系概念模型的有效方法 是表示概念关系模型的一种方式 用 矩形框
  • 为什么要用缓冲流

    一开始学习处理流会疑问为什么速度会加快呢 好比一个10KB的文件 使用最基本的字节流读写 只要读一次10KB到内存 存一次10KB到目标文件就行了 但是使用缓冲不是要读1次10KB到缓冲 再从缓冲写一次10KB到CPU 再从CPU写10KB
  • No matching distribution found for tensorflow 解决方法

    2020 8最新版本为TF2 3 安装时容易出现的问题是各软件程序版本不统一的问题 GPU版本对应表如下图所示 图片来源于Tensorflow 官网 分割线 分割线
  • 使用JavaScript编写HTML

    使用JavaScript编写HTML 1 什么是JavaScript JavaScript是一种脚本语言 通过Dom定义表示和修改文档所需的对象和这些对象的行为和属性以及这些对象之间的关系从而操作HTML文档 比如添加 移除 改变或重排页面