JavaWeb-OM分享-附带代码案例以及注解

最新推荐文章于 2024-10-08 12:21:22 发布

冷眼热眸

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量110

点赞数 2

分类专栏： JAVA语言文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Wang_ning__/article/details/133897605

版权

JAVA语言专栏收录该内容

36 篇文章 0 订阅

订阅专栏

概念：DOM（Document Object Model） 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

用处：以上就是DOM的相关简介内容，那么我们学习DOM技术有什么用呢？主要作用如下：

1. 改变 HTML 元素的内容

2. 改变 HTML 元素的样式（CSS）

3. 对 HTML DOM 事件作出反应

4. 添加和删除 HTML 元素

以下就是相关的代码解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-对象测试</title>
</head>
<body>
  <div style="font-size: 30px; text-align: center" id="tb1">课程表</div>
  <table width="800px" border="1" cellspacing="0" align="center">
    <tr align="center" class="data">
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
    </tr>
    <tr align="center" class="data">
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>002</td>
      <td>李四</td>
      <td>90</td>
      <td>很优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>003</td>
      <td>王五</td>
      <td>80</td>
      <td>很不错</td>
    </tr>
    <tr align="center" class="data">
      <td>004</td>
      <td>赵六</td>
      <td>70</td>
      <td>一般</td>
    </tr>
  </table>
  <br>
  <div style="text-align: center">
    <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
    <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
    <input id="b3" type="button" value="删除最后一个" onclick="fn3()">
  </div>
</body>
  <script>
    // 改变表单的标题内容
    function fn1() {
      document.getElementById("tb1").innerText="学员成绩表";
    }
    // 改变表单的标题颜色
    function fn2() {
      document.getElementById("tb1").style="font-size: 30px; text-align: center; color: red";
    }
    // 删除最后一项数据
    function fn3() {
      var trs = document.getElementsByClassName("data");
      trs[trs.length-1].remove();
    }
  </script>
</html>