JavaScript学习笔记（十）：JS HTML DOM

文阿花

于 2024-07-26 10:55:18 发布

阅读量88

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/wz_1992/article/details/140497489

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、DOM 简介

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
JavaScript HTML DOM

2、JavaScript - HTML DOM 方法

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

document.getElementById("demo").innerHTML = "Hello World!";

getElementById 是方法，而 innerHTML 是属性。

JavaScript - HTML DOM 方法

3、JavaScript HTML DOM 文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

3.1 HTML DOM Document 对象

文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
在这里插入图片描述

4、JavaScript HTML DOM 元素

查找和访问 HTML 页面中的 HTML 元素。

4.1 查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素

（1）通过 id 查找 HTML 元素：

如果未找到元素，myElement 将包含 null。

 <body>
    <p id="demo"></p>

    <script>
      var myElement = document.getElementById("demo");
      myElement.innerHTML = "Hello";
    </script>
  </body>

（2.1）通过标签名查找 HTML 元素：

 <body>
    <p>Hello World</p>
    <p>Hello China</p>
    <p id="demo"></p>

    <script>
      var x = document.getElementsByTagName("p");
      document.getElementById("demo").innerHTML =
        "本页面中第一个p元素的内容是：" + x[0].innerHTML;
    </script>
  </body>

输出：
Hello World

Hello China

本页面中第一个p元素的内容是：Hello World

（2.2）通过标签名查找 HTML 元素：查找id为main的块儿中的第一个p元素内容：

<body>
    <div id="main">
      <p>Hello World</p>
      <p>Hello China</p>
      <p id="demo"></p>
    </div>

    <script>
      var x = document.getElementById("main");
      var y = x.getElementsByTagName("p");
      document.getElementById("demo").innerHTML =
        "“main”中的第一段（索引 0）是：" + y[0].innerHTML;
    </script>
  </body>

输出：
Hello World

Hello China

“main”中的第一段（索引 0）是：Hello World

（3）通过类名查找 HTML 元素：

通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。

 <body>
    <div id="main">
      <p class="p01">Hello World</p>
      <p class="p02">Hello China</p>
      <p id="demo"></p>
    </div>

    <script>
      var x = document.getElementsByClassName("p01");
      document.getElementById("demo").innerHTML =
        "class ='p01' 的第一段（索引 0）" + x[0].innerHTML;
    </script>
  </body>

输出：
Hello World

Hello China

class =‘p01’ 的第一段（索引 0）Hello World

（4）通过 CSS 选择器查找 HTML 元素：

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。

 <body>
    <div id="main">
      <p class="p01">Hello World</p>
      <p class="p01">Hello China</p>
      <p id="demo"></p>
    </div>

    <script>
      var x = document.querySelectorAll("p.p01");
      document.getElementById("demo").innerHTML =
        "class ='p01' 的第一段（索引 0）" + x[0].innerHTML;
    </script>
  </body>

输出：
Hello World

Hello China

class =‘p01’ 的第一段（索引 0）Hello World

（5）通过 HTML 对象选择器查找 HTML 对象：本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值：

 <body>
    <form id="form1" action="*">
      姓：<input type="text" name="firstName" value="文" /><br /><br />
      名：<input type="text" name="lastName" value="阿花" /> <br />
      <br />
      <input type="submit" value="提交" />
    </form>

    <p>单击试一试，打印表单中的数据</p>
    <button onclick="myFunction()">试一试</button>
    <p id="demo"></p>

    <script>
      function myFunction() {
        var x = document.forms["form1"];
        var text = "";
        for (var i = 0; i < x.length; i++) {
          text += x.elements[i].value + "<br>";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>

输出：
文
阿花
提交

5、JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

5.1 改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流（千万不要在文档加载后使用 document.write()。这么做会覆盖文档。）：

<body>
    <script>
      document.write(Date());
    </script>
  </body>

输出：Thu Jul 25 2024 09:41:43 GMT+0800 (中国标准时间)

5.2 改变 HTML 内容

   document.getElementById("demo").innerHTML = "哈哈哈";

5.3 改变属性的值

语法：

document.getElementById(id).attribute = new value

  <body>
    <img src="imgs/bill.png" alt="" id="demo" />
    <script>
      document.getElementById("demo").src = "imgs/flower.png";
    </script>
  </body>

6、JavaScript 表单

6.1JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 完成。

 <body>
    <h1>表单验证</h1>
    <form
      action="html_jump_page.html"
      name="myForm"
      method="post"
      onsubmit=" return myFunction()"
    >
      Name:
      <input type="text" name="fname" />
      <input type="submit" value="submit" />
    </form>

    <script>
      function myFunction() {
        let x = document.forms["myForm"]["fname"].value;
        if (x == "") {
          alert("请输入内容");
          return false;
        }
      }
    </script>
  </body>

在这里插入图片描述

6.2 JavaScript 可以验证数字输入

<body>
    <h1>表单验证</h1>
    <input id="inputdemo" />
    <button type="button" onclick="myFunction()">提交</button>

    <p id="demo"></p>
    <script>
      function myFunction() {
        let x = document.getElementById("inputdemo").value;
        if (isNaN(x) || x < 1 || x > 10) {
          alert("请输入数字");
        } else {
          document.getElementById("demo").innerHTML = x;
        }
      }
    </script>
  </body>

6.3 自动 HTML 表单验证

  <body>
    <form action="html_jump_page.html" method="post">
      <input type="text" name="fname" required />
      <input type="submit" value="提交" />
    </form>
    <p>如果您点击提交，而不填写文本字段，浏览器将显示错误消息。</p>
  </body>

在这里插入图片描述

6.4 数据验证

数据验证是确保用户输入干净、正确和有用的过程。
典型的验证任务是：
用户是否填写了所有必填字段？
用户是否输入了有效日期？
用户是否在数字字段中输入了文本？
大多数情况下，数据验证的目的是确保用户输入正确。
验证可以通过许多不同的方法定义，并以许多不同的方式部署。
服务器端验证由 Web 服务器在输入发送到服务器后执行。
在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。

6.5 HTML 约束验证

HTML5 引入了一种新的 HTML 验证概念，称为约束验证。
HTML 约束验证基于：

约束验证 HTML input 属性
约束验证 CSS 伪选择器
约束验证 DOM 属性和方法

约束验证 HTML input 属性:

在这里插入图片描述

约束验证 CSS 伪选择器:

在这里插入图片描述

7、JavaScript HTML DOM - 改变 CSS

JavaScript HTML DOM - 改变 CSS

HTML DOM 允许 JavaScript 更改 HTML 元素的样式。

7.1 改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

 <body>
    <p id="p01">第一个p</p>
    <p id="p02">第二个p</p>

    <script>
      document.getElementById("p01").style.color = "blue";
      document.getElementById("p02").style.fontFamily = "Arial";
    </script>
  </body>

输出：
在这里插入图片描述

8、 JavaScript HTML DOM 动画

JavaScript HTML DOM 动画

所有动画都应该与容器元素关联:

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
      }
      #animation {
        width: 50px;
        height: 50px;
        position: absolute;
        background: red;
      }
    </style>
  </head>
  <body>
    <button onclick="move()">单击我开始动画</button>
    <div id="container">
      <div id="animation"></div>
    </div>

    <script>
      function move() {
        var x = document.getElementById("animation");
        var pos = 0;
        var id = setInterval(frame, 5);
        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos++;
            x.style.top = pos + "px";
            x.style.left = pos + "px";
          }
        }
      }
    </script>
  </body>
</html>

9、JavaScript HTML DOM 事件

JavaScript HTML DOM 事件

<body>
    <h1 onclick="changetText(this)">点击修改文本</h1>

    <button id="mybtn">试一试获取当前时间</button>
    <p id="demo"></p>

    <script>
      function changetText(id) {
        id.innerHTML = "谢谢";
      }

      document.getElementById("mybtn").onclick = displayDate;
      function displayDate() {
        document.getElementById("demo").innerHTML = Date();
      }
    </script>
  </body>

9.1 onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

9.2 onchange 事件

onchange 事件经常与输入字段验证结合使用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      function myFunction() {
        var x = document.getElementById("ftext");
        x.value = x.value.toUpperCase();
      }
    </script>
  </head>
  <body>
    <input type="text" id="ftext" onchange="myFunction()" />
    <p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
  </body>
</html>

9.3 onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      function mOver(id) {
        id.innerHTML = "鼠标放置";
      }

      function mOut(id) {
        id.innerHTML = "鼠标离开";
      }
    </script>
  </head>
  <body>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)">请把鼠标移上来</div>
  </body>
</html>

9.4 onmousedown, onmouseup 以及 onclick 事件

JavaScript HTML DOM 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

10、JavaScript HTML DOM 事件监听程序

JavaScript HTML DOM 事件监听程序

10.1 addEventListener() 方法

addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
语法:

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

示例：添加当用户点击按钮时触发的事件监听器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="myBtn">试一试</button>
    <p id="demo"></p>

    <script>
      document.getElementById("myBtn").addEventListener("click", displayDate);

      function displayDate() {
        document.getElementById("demo").innerHTML = Date();
      }
    </script>
  </body>
</html>

11、JavaScript HTML DOM 导航

JavaScript HTML DOM 导航

12、JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）

12.1 创建新 HTML 元素（节点）: `appendChild()`

如需向 HTML DOM 添加新元素，您必须首先创建这个元素（元素节点），然后将其追加到已有元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <script>
    //这段代码创建了一个新的 <p> 元素：
      var newp = document.createElement("p");
      //如需向 <p> 元素添加文本，则必须首先创建文本节点。这段代码创建了一个文本节点：
      var node = document.createTextNode("这是一段文字03");
      //然后您需要向 <p> 元素追加这个文本节点：
      newp.appendChild(node);
      //最后您需要向已有元素追加这个新元素。
      document.getElementById("container").appendChild(newp);
    </script>
  </body>
</html>

输出：
在这里插入图片描述

11.2 创建新 HTML 元素 - `insertBefore()`

前面例子中的 appendChild() 方法，追加新元素作为父的最后一个子。

除此之外您还可以使用 insertBefore() 方法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <script>
      var newp = document.createElement("p");
      var node = document.createTextNode("这是一段文字03");
      newp.appendChild(node);

      var element = document.getElementById("container");
      var child = document.getElementById("p01");

      element.insertBefore(newp, child);
    </script>
  </body>
</html>

输出：
在这里插入图片描述

11.3 删除已有 HTML 元素： `remove()`

如需删除 HTML 元素，请使用 remove() 方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <script>
      document.getElementById("p01").remove();
    </script>
  </body>
</html>

输出：
在这里插入图片描述

11.4 删除子节点： `removeChild()`

注意：remove() 方法在旧浏览器中不起作用，请参阅下面的例子，了解如何改用 removeChild()。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <script>
      var parent = document.getElementById("container");
      var child = document.getElementById("p01");
      parent.removeChild(child);
    </script>
  </body>
</html>

输出：
这是一段文字02

11.5 替换 HTML 元素： `replaceChild()`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <script>
      var parent = document.getElementById("container");
      var child = document.getElementById("p01");

      //新建p
      var newP = document.createElement("p");
      var node = document.createTextNode("这是一段文字03");
      newP.appendChild(node);

      //使用新建的p替换老的p
      parent.replaceChild(newP, child);
    </script>
  </body>
</html>

输出：

这是一段文字03

这是一段文字02

12、JavaScript HTML DOM 集合

12.1 HTMLCollection 对象：`getElementsByTagName()`

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象是类数组的 HTML 元素列表（集合）。
HTMLCollection 并非数组！
您能够遍历列表并通过数字引用元素（就像数组那样）。
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

示例：下面的代码选取文档中的所有

元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <p id="demo"></p>

    <script>
      var myCollection = document.getElementsByTagName("p");
      var text = "";
      for (var i = 0; i < myCollection.length; i++) {
        text +=
          "第" + i + "个p元素的内容为" + myCollection[i].innerHTML + "<br>";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

输出：
这是一段文字01

这是一段文字02

第0个p元素的内容为这是一段文字01
第1个p元素的内容为这是一段文字02
第2个p元素的内容为

13、JavaScript HTML DOM 节点列表

13.1 HTML DOM NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

示例一：下面的代码选取文档中的所有

节点：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <p id="demo"></p>

    <script>
      var myNoteList = document.querySelectorAll("p");
      var text = "";
      for (var i = 0; i < myNoteList.length; i++) {
        text += "第" + i + "个p元素的内容为" + myNoteList[i].innerHTML + "<br>";
      }
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

输出：
这是一段文字01

这是一段文字02

第0个p元素的内容为这是一段文字01
第1个p元素的内容为这是一段文字02
第2个p元素的内容为

示例二：改变节点列表中所有

元素的背景色：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p id="p01">这是一段文字01</p>
      <p id="p02">这是一段文字02</p>
    </div>

    <button onclick="myFunction()">试一试</button>

    <script>
      function myFunction() {
        var myNoteList = document.querySelectorAll("p");
        var text = "";
        for (var i = 0; i < myNoteList.length; i++) {
          myNoteList[i].style.color = "red";
        }
      }
    </script>
  </body>
</html>

文阿花

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（十）：JS HTML DOM

1、DOM 简介通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。JavaScript HTML DOM2、JavaScript - HTML DOM 方法HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。HTML DOM 属性是您能够设置或改变的 HTML 元素的值。document.getElementById("demo").innerHTML = "Hello World!";getElementById 是方法
复制链接

扫一扫