JavaScript - DOM

最新推荐文章于 2023-03-07 09:35:59 发布
最新推荐文章于 2023-03-07 09:35:59 发布
阅读量626 收藏 2
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/S_numb/article/details/103885867
版权

这篇文章参考内容分为两部分：

  1. 西部开源-秦疆老师；
  2. https://www.w3school.com.cn/h.asp；

文章目录

1. HTML DOM

1.1 简介

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

1. HTML DOM（文档对象模型）

当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 模型被结构化为对象树：
在这里插入图片描述通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

2. 什么是 DOM ？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

  • Core DOM - 所有文档类型的标准模型
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

3. 什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

  • 作为对象的 HTML 元素
  • 所有 HTML 元素的属性
  • 访问所有 HTML 元素的方法
  • 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

1.2 方法

HTML DOM 方法是能够（在 HTML 元素上）执行的动作；

HTML DOM 属性是能够设置或改变的 HTML 元素的值；

1. DOM 编程界面

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法。

属性是能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是能够完成的动作（比如添加或删除 HTML 元素）。

2. getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

getElementById 方法使用 id="**" 来查找元素。

3. innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

4. 实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>初识 DOM</title>
    <style>
        div{
            width: 400px;
            background: pink;
            border: 1px solid red;
        }
        h2{
            text-align: center;
        }
    </style>
</head>

<body>

<div>
    <h2>初识 DOM 属性和方法</h2>
    <hr/>
    <p>将使用 DOM 的getElementById 方法找到被标注的 id <br/>
        以及使用innerHTML 属性设置元素内容</p>
    <hr/>
    <p id="demo"></p>
</div>

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

</html>

结果：
在这里插入图片描述

1.3 文档

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

1. DTML DOM Document 对象

文档对象代表网页；

如果希望访问 HTML 页面中的任何元素，那么需要从访问 document 对象开始；

2. 查找 HTML 元素

方法描述
document.getElementById(id)通过元素 id 来查找元素
document.getElementsByTagName(name)通过标签名来查找元素
document.getElementsByClassName(name)通过类名来查找元素

3. 改变 HTML 元素

方法描述
element.innerHTML = new html content改变元素的 inner HTML
element.attribute = new value改变 HTML 元素的属性值
element.setAttribute(attribute, value)改变 HTML 元素的属性值
element.style.property = new style改变 HTML 元素的样式

4. 添加和删除元素

方法描述
document.createElement(element)创建 HTML 元素
document.removeChild(element)删除 HTML 元素
document.appendChild(element)添加 HTML 元素
document.replaceChild(element)替换 HTML 元素
document.write(text)写入 HTML 输出流

5. 添加时间处理程序

方法描述
document.getElementById(id).onclick = function(){code}向 onclick 事件添加事件处理程序

6. 查找 HTML 对象

属性描述DOM
document.anchors返回拥有 name 属性的所有 <a> 元素。1
document.applets返回所有 <applet>元素（HTML5 不建议使用）1
document.baseURI返回文档的绝对基准 URI3
document.body返回 <body> 元素1
document.cookie返回文档的 cookie1
document.doctype返回文档的 doctype3
document.documentElement返回 <html> 元素3
document.documentMode返回浏览器使用的模式3
document.documentURI返回文档的 URI3
document.domain返回文档服务器的域名1
document.domConfig废弃。返回 DOM 配置3
document.embeds返回所有 <embed>元素3
document.forms返回所有 <form> 元素1
document.head返回 <head> 元素3
document.images返回所有 <img> 元素1
document.implementation返回 DOM 实现3
document.inputEncoding返回文档的编码（字符集）3
document.lastModified返回文档更新的日期和时间3
document.links返回拥有 href 属性的所有 <area> 和 <a> 元素1
document.readyState返回文档的（加载）状态3
document.referrer返回引用的 URI（链接文档）1
document.scripts返回所有 <script> 元素3
document.strictErrorChecking返回是否强制执行错误检查3
document.title返回 <title> 元素1
document.URL返回文档的完整 URL1

1.4 元素

1. 查找 HTML 元素

通常，通过 JavaScript，来操作 HTML 元素。

为了达成此目的，首先需要找到这些元素，具体方法如下：

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

2. 通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。

var myElement = document.getElementById("demo");

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

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

3. 通过标签名查找 HTML 元素

本例查找所有的 <p> 元素：

var x = document.getElementsByTagName("p");

本例查找 id=“main” 的元素，然后查找 “main” 中所有 <p> 元素：

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

4. 通过类名查找 HTML 元素

如果需要找到拥有相同类名的所有 HTML 元素，使用getElementsByClassName()。

本例返回包含 class=“demo” 的所有元素的列表：

var x = document.getElementsByClassName("demo");

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

5. 通过 CSS 选择器查找 HTML 元素

如果需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回 class=“demo” 的所有 <p> 元素列表：

var x = document.querySelectorAll("p.demo");

querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。

6. 通过 HTML 对象自选择器查找 HTML 对象

本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值：

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

1.5 改变 HTML

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

1. 改变 HTML 输出流

JavaScript 能够创建动态 HTML 内容：

Tue Jan 07 2020 21:31:53 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：

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

千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

2. 改变 HTML 内容

修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

如需修改 HTML 元素的内容，请使用此语法：

document.getElementById(id).innerHTML = new text;

修改 <p> 元素的内容：

<p id="demo">Hello World!</p>

<script>
document.getElementById("demo").innerHTML = "hello Java!";
</script>

3. 改变属性的值

如需修改 HTML 属性的值，请使用如下语法：

document.getElementById(id).attribute = new value;

本例修改了 <img> 元素的 src 属性的值：

<img id="myImage" src="动态.gif">

<script>
document.getElementById("myImage").src = "fly.jpg";
</script>

1.6 改变 CSS

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

1. 改变 HTML 样式

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

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

下面的例子更改了 <p> 元素的样式：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

2. 使用事件

HTML DOM 允许在事件发生时执行代码。

当“某些事情”在 HTML 元素上发生时，浏览器会生成事件：

  • 点击某个元素时
  • 页面加载时
  • 输入字段被更改时

用户点击按钮时，更改 id=“demo” 的 HTML 元素的样式：

<h1 id="id1">我的标题 1</h1>

<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
点击我！
</button>

1.7 DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

1. 对事件做出反应

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页加载后
  • 当图像加载后
  • 当鼠标移至元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户敲击按键时

实例1：用户点击按钮，会改变其内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM点击事件</title>
    <style>
        div{
            width: 400px;
            border: 1px solid red;
            background: pink;
        }
        h1{
            text-align: center;
        }
        button:hover{
            color: greenyellow;
        }
    </style>
</head>

<body>
<div>
    <h1>DOM 点击事件</h1>
    <p>点击下列按钮，会替换下一个段落的 Hello World，出现“Hello JavaScript”</p>
    <p id="demo">Hello World</p>
    <button onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript'">Try</button>
</div>

</body>

</html>

结果：
在这里插入图片描述2. HTML 事件属性

如需向 HTML 元素分配事件，能够使用事件属性。

实例：向 button 元素分配 onclick 事件（与上个例子相同，不过就是将点击事件提出来成为一个函数）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM点击事件</title>
    <style>
        div{
            width: 400px;
            border: 1px solid red;
            background: pink;
        }
        h1{
            text-align: center;
        }
        button:hover{
            background: greenyellow;
        }
    </style>
</head>

<body>
<div>
    <h1>DOM 点击事件</h1>
    <p>点击下列按钮，会替换下一个段落的 Hello World，出现“Hello JavaScript”</p>
    <p id="demo">Hello World</p>
    <button onclick="onClickButton('demo')">Try</button>
</div>

<script>
    function onClickButton(id) {
        document.getElementById('id').innerHTML = 'Hello JavaScript'
    }
</script>

</body>

</html>

结果：
在这里插入图片描述
3. 使用 HTML DOM 分配事件

HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件：

实例：为 button 元素指定 onclick 事件：

<button id="myBtn">Try</button>
<p id="demo"></p>

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

在上例中，名为 displayDate 的函数被分配到 id=“myBtn” 的 HTML 元素。

当点击按钮时将执行函数。

4. onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

摘录：https://www.jianshu.com/p/6fc9cea6daa2

注：cookie 就是一小段文本信息；打个比方，我们去银行办理储蓄业务，第一次给你办了张银行卡，里面存放了身份证、密码、手机等个人信息。当你下次来这类银行的时候，银行机器能识别你的卡，从而直接办理业务。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>onload 事件</title>

</head>

<body onload="checkCookies()">
<p id ="demo"></p>

<script>
    function checkCookies() {
        var text = "";
        if(navigator.cookieEnabled == true){
            text = "Cookie 已启用";
        }else {
            text = "Cookie 未启用"
        }
        document.getElementById('demo').innerText = text;
    }
</script>
</body>

</html>

5. onchange 事件

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>onchange 事件</title>
    <style>
    div{
        width: 400px;
        border: 1px solid red;
        background: pink;
    }
    </style>
</head>

<body>
<div>
    请输入您的名字：
    <input type="text" id="text1" onchange="changeUpper()">
    <p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
</div>

<script>
    function changeUpper() {
      var x =  document.getElementById('text1');
      x.value = x.value.toUpperCase();
    }
</script>
</body>

</html>

结果：
在这里插入图片描述6. onmouseover 和 onmouseout 事件

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        div{
            background: pink;
            width: 400px;
            height: 247px;
            text-align: center;
            line-height: 247px;
        }
    </style>
</head>

<body>

<div onmouseout="mouseOut(this)" onmouseover="mouseOver(this)"></div>

<script>
    function mouseOut(obj) {
        obj.innerHTML = "Please move the mouse up";
    }

    function mouseOver(obj) {
        obj.innerHTML = "Hello JavaScript";
    }
</script>

</body>

</html>

7. onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

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

实例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>onmousedown 和 onmouseup 事件</title>
    <style>
        div{
            width: 400px;
            height: 247px;
            text-align: center;
            line-height: 247px;
        }
    </style>

</head>

<body>
<div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" ></div>

<script>
    function mouseDown(obj) {
        obj.style.backgroundColor = blue;
        obj.innerHTML = "松开鼠标";
    }

    function mouseUp(obj) {
        obj.style.backgroundColor = pink;
        obj.innerHTML = "点击鼠标";
    }
</script>
</body>

</html>

实例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function lightOn() {
            document.getElementById('myImg').src = "img/亮.jpg";
        }
        function lightOff() {
            document.getElementById('myImg').src = "img/灭.jpg";
        }
    </script>
</head>
<img id="myImg" onmousedown="lightOn()" onmouseup="lightOff()"   src="img/灭.jpg" >
<body>

</body>

</html>

结果：
在这里插入图片描述

1.8 DOM 事件监听程序

addEventListener() 方法

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

能向一个元素添加多个事件处理程序。

能向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

能向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

通过使用 removeEventListener() 方法轻松地删除事件监听器。

1. 语法

element.addEventListener(event, function, useCapture);
  • 第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
  • 第二个参数是当事件发生时我们需要调用的函数。
  • 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

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

2. 向元素添加事件处理程序

当用户点击某个元素时提示 “Hello World!”：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>监听事件</title>
</head>

<body>
<div>
    <h1>JavaScript addEventListener()</h1>
    <p>此例使用 addEventListener() 方法在用户单击按钮时执行函数。</p>
    <button id="demo01">Try</button>
</div>

<script>
    //内部函数
    // document.getElementById('demo01').addEventListener("click", function () {
    //     alert("Hello World");
    // });


    //外部函数
    document.getElementById('demo01').addEventListener("click", myFunction)

    function  myFunction() {
        alert("Hello World");
    }

</script>

</body>

</html>

结果：
在这里插入图片描述3. 向相同元素添加多个事件处理程序

addEventListener() 方法允许向相同元素添加多个事件，同时不覆盖已有事件：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加监听事件2</title>
</head>

<body>
<div>
    <h1> JavaScript addEventListener()</h1>
    <p>此例使用 addEventListener() 方法在同一按钮上添加许多事件。</p>
    <button id="myBtn">Try</button>
    <p id="demo"></p>
</div>

<script>
    var x = document.getElementById('myBtn');
    x.addEventListener("mouseover", myFunction);
    x.addEventListener("click", mySecondFunction);
    x.addEventListener("mouseout", myThirdFunction);

    function myFunction() {
        document.getElementById("demo").innerHTML += "Moused over!<br>";
    }

    function mySecondFunction() {
        document.getElementById("demo").innerHTML += "Clicked!<br>";
    }

    function myThirdFunction() {
        document.getElementById("demo").innerHTML += "Moused out!<br>";
    }
</script>
</body>

</html>

结果：
在这里插入图片描述4. 向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

添加当用户调整窗口大小时触发的事件监听器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <h1>JavaScript addEventListener()</h1>
    <p>此例在 window 对象上使用 addEventListener() 方法。</p>
    <p>尝试调整此浏览器窗口的大小以触发“resize”事件处理程序。</p>
    <p id="demo"></p>
</div>

<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = Math.random();
    });
</script>
</body>
</html>

结果：
在这里插入图片描述5. 传递参数

当传递参数值时，以参数形式使用调用指定函数的“匿名函数”：

如本章节第二小节，向元素添加事件处理程序中的内部函数；

6. 事件冒泡和事件捕获

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。

假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播；

如果该值设置为 true，则事件使用捕获传播。

7. removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: pink;
            border: 1px solid pink;
            padding: 50px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>

<div id="myDIV">
    <h1>JavaScript removeEventListener()</h1>
    <p>这个 div 元素有一个 onmousemove 事件处理程序，每次在这个橙色字段中移动鼠标时都会显示一个随机数。</p>
    <p>单击按钮以删除 div 的事件处理程序。</p>
    <button onclick="removeHandler()" id="myBtn">删除</button>
</div>
<p id="demo"></p>

<script>
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    }
</script>

</body>
</html>

结果：
在这里插入图片描述

1.9 DOM 导航

通过 HTML DOM，可以使用节点关系来导航节点树。

1. DOM 节点

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

  • 整个文档是文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 所有注释是注释节点
    在这里插入图片描述

有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。

能够创建新节点，还可以修改和删除所有节点。

1. 节点关系

节点树中的节点彼此之间有一定的等级关系。

  • 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
  • 在节点树中，顶端节点被称为根（根节点）。
  • 每个节点都有父节点，除了根（根节点没有父节点）。
  • 节点能够拥有一定数量的子
  • 同胞（兄弟或姐妹）指的是拥有相同父的节点。
<html>

   <head>
       <title>DOM 教程</title>
   </head>

  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>

</html>

从以上的 HTML 中您能读到以下信息：

  • <html> 是根节点
  • <html> 没有父
  • <html> 是 <head> 和 <body> 的父
  • <head> 是 <html> 的第一个子
  • <body> 是 <html> 的最后一个子

同时：

  • <head> 有一个子：<title>
  • <title> 有一个子（文本节点）：“DOM 教程”
  • <body> 有两个子：<h1> 和 <p>
  • <h1> 有一个子：“DOM 第一课”
  • <p> 有一个子：“Hello world!”
  • <h1> 和 <p> 是同胞

2. 在节点之间导航

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

3. 子节点和节点值

DOM 处理中的一种常见错误是认为元素节点中包含文本。

元素节点 <title> 不包含文本。

它包含了值为 “DOM 教程” 的文本节点。

<title id="demo">DOM 教程</title>

文本节点的值能够通过节点的 innerHTML 属性进行访问：

var myTitle = document.getElementById("demo").innerHTML;

4. DOM 根节点

有两个特殊属性允许访问完整文档：

  • document.body - 文档的 body
  • document.documentElement - 完整文档

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>

<body>
<div>
    <h1>两个特殊属性允许访问完整文档</h1>
    <p>document.body - 文档的 body</p>
    <p>document.documentElement - 完整文档</p>
    <button id="testButton">Try</button>
</div>

<script>
    var x = document.getElementById('testButton');
    x.addEventListener("click", bodyFunction);
    x.addEventListener("click", documentElementFunction);

    function bodyFunction() {
        alert(document.body.innerHTML);
    }
    function documentElementFunction() {
      alert(document.documentElement.innerHTML);
    }

</script>

</body>

</html>

5. nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName是只读的
  • 元素节点的 nodeName等同于标签名
  • 属性节点的 nodeName是属性名称
  • 文本节点的 nodeName总是 #text
  • 文档节点的 nodeName总是 #document

实例：

<div>
<h1 id="id01">DOM 导航</h1>
<p id="id02">Hello!</p>
</div>
<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
</script>

<!--H1-->

注释：nodeName 总是包含 HTML 元素的大写标签名。

6. nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue是 undefined
  • 文本节点的 nodeValue是文本文本
  • 属性节点的 nodeValue是属性值

7. nodeType 属性

nodeType 属性返回节点的类型。

nodeType是只读的。

最重要的 nodeType 属性是：

节点类型例子
ELEMENT_NODE1<h1 class="heading">W3School</h1>
ATTRIBUTE_NODE2class = “heading” （弃用）
TEXT_NODE3W3School
COMMENT_NODE8<!-- 这是注释 -->
DOCUMENT_NODE9HTML 文档本身（<html> 的父）
DOCUMENT_TYPE_NODE10<!Doctype html>

Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。

实例：

<div>
<h1 id="id01">DOM 导航</h1>
<p id="id02">Hello!</p>
</div>
<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

<!--1-->

1.10 DOM 节点

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

1. 创建新的 HTML 元素（节点）

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

实例1： appendChild() 方法，向最后添加新的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
//创建一个新的 p 元素
var para = document.createElement("p");
//如需向 p 元素添加文本，则必须首先创建文本节点。这段代码创建了一个文本节点：    
var node = document.createTextNode("这是新文本。");
//然后需要向 p 元素追加这个文本节点：
para.appendChild(node);
//查找一个已有的块元素：
var element = document.getElementById("div1");
//向这个已有的块元素追加新元素：
element.appendChild(para);
</script>

结果：
在这里插入图片描述

实例2：insertBefore() 方法，添加的新元素，位于最前方

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

结果：
在这里插入图片描述

2. 删除已有的 HTML 元素

如需删除某个 HTML 元素，需要知晓该元素的父：

<!--
这个 HTML 文档包含了一个带有两个子节点（两个 <p> 元素）的 <div> 元素：
-->
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
//查找 id="div1" 的元素：
var parent = document.getElementById("div1");
//查找 id="p1" 的 <p> 元素：
var child = document.getElementById("p1");
//从父删除子：
parent.removeChild(child);
</script>

能够在不引用父的情况下删除某个元素是极好的。

但是很遗憾。DOM 需要同时了解需要删除的元素及其父。

这是一种常见的解决方法：

找到你想要删除的子，并利用其 parentNode 属性找到父：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

3. 替换 HTML 元素

如需替换元素的，请使用 replaceChild() 方法：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

1.11 DOM 集合

1. HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

下面的代码选取文档中的所有 <p> 元素：

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。

如需访问第二个 <p> 元素，可以这样写：

y = x[1];

注：索引从 0 开始。

2. HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
<p id="p3"></p>
</div>

<script>
//创建所有 <p> 元素的集合
var myCollection = document.getElementsByTagName("p");
//显示集合的长度
document.getElementById("p3").innerHTML = myCollection.length; 
</script>

length 属性在遍历集合中元素时是有用的：

<div>
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p>单击按钮可更改所有 p 元素的颜色。</p>
<button onclick="myFunction()">试一试</button>
</div>

<script>
function myFunction() {
  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

3. HTMLCollection 并非数组

HTMLCollection 也许看起来像数组，但并非数组。

能够遍历列表并通过数字引用元素（就像数组那样）。

不过，无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push()或join()。

1.12 DOM 节点列表

1. NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合）。

NodeList 对象与 HTMLCollection 对象几乎相同。

如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

下面的代码选取文档中的所有 <p>节点：

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可通过索引号进行访问。

如需访问第二个 <p> 节点：

y = myNodeList[1];

注：索引从 0 开始。

2. NodeList 长度

length 属性定义节点列表中的节点数：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
<p id="p3"></p>
</div>

<script>
//创建所有 <p> 元素的列表
var myNodelist = document.querySelectorAll("p");
//显示该列表的长度
document.getElementById("p3").innerHTML = myNodelist.length;
</script>

length 属性在您希望遍历节点列表中的节点时很有用：

<div>
<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p>单击按钮可更改所有 p 元素的颜色。</p>
<button onclick="myFunction()">试一试</button>
</div>

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

3. HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

遍历节点列表并像数组那样引用其节点。

不过，无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。

S_numb
关注
专栏目录
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5310
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
监听 html dom 变化,如何监听页面 DOM 变动并高效响应
weixin_42244905的博客
06-07 1133
比来在做 chrome 插件开辟，既然是插件那就不免纰谬现有页面做一些控制，比如事宜监听、调剂构造、对 DOM 元素的增删改查等等。个中有一个需求比较有意思，便整顿一基层便把涉及到的常识点复习一遍。大年夜 DOM 更改事宜监据说起起首假设大年夜家已经知道 JavaScript 中事宜的产生阶段(捕获-射中-冒泡)，附上一张图带过这个内容，我们直接进入寻找解决办法的过程。Graphical rep...
HTML DOM 事件监听器
03-07 2371
DOM事件流同时支持两种事件模型：捕获型事件和冒泡型事件，捕获型事件首先发生。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： 元素的点击事件先触发 ，然后再触发 元素的点击事件。通过JavaScript，我们可以给页面的某些元素添加事件的监听器，当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： 元素的点击事件先触发，然后会触发 元素的点击事件。
html鼠标移除事件监听,Javascript：DOM事件（监听鼠标点击/释放，鼠标悬停/离开等）...
weixin_42328834的博客
06-04 1695
使用Javascript可以对HTML页面上的各种事件进行监听，如鼠标点击/释放，鼠标悬停/离开，等等。效果图： 代码：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Javascript 事件body {background-color:#eeeeee}div.greenBtn{color:white;back...
document.getElementById("myBtn").onclick=function(){displayDate()};解析
大傻冒@你的博客
07-14 1万+
首先我们先来看看下面的三个例子，然后我们将这三个例子进行比较（看仔细哦！）&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt;body&am
Javascript-DOM
03-26
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准的编程接口，用于HTML和...在`Javascript-DOM-main`这个项目中，可能包含了练习代码和示例，可以帮助你更好地理解和应用DOM相关知识。
javaScript-dom
03-17
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它允许我们通过编程方式与HTML、XML或SVG等文档...在项目"javaScript-dom-master"中，可能包含了一些示例代码或教程，用于实践和学习这些DOM操作。
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
JavaScript-DOM实战案例
最新发布
09-18
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
JavaScript-DOM
03-09
在JavaScript中，我们可以利用DOM API来创建、修改、遍历和操作网页内容。 DOM的核心在于其提供了访问和操作页面上元素的方法。例如，`document.getElementById`用于根据ID获取元素，`document.querySelector`和`...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
js事件监听：addEventListener() 与 移除事件：removeEventListener()
热门推荐
日暮斜阳
09-20 1万+
说事件绑定得先说事件流 事件流 冒泡型事件流： 事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】 捕获型事件流： 事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 来个例子看一下吧！ <!DOCTYPE h...
理解Node类型——不应被忽视的 nodeType、nodeName、nodeValue
zwkkkk1的博客
05-07 1万+
Node 类型   DOM1级定义了 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在 JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。   这篇讲讲 Node 类型常会被忽视的三个属性...
JavaScript----章节一
weixin_45686974的博客
02-05 310
1、什么是 JavaScript 1.1、概述 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 一个合格的后端人员，必须要精通 JavaScript 1.2、历史 https://blog.csdn.net/kese7952/art...
跟着狂神学JavaScript
qq_40649503的博客
11-12 994
跟着狂神学JavaScript
html 删除事件,HTML DOM removeEventListener() 方法
weixin_39982580的博客
06-05 600
HTML DOM removeEventListener() 方法element.removeEventListener()方法将删除已与element.addEventListener()方法关联的事件处理程序。注意：要删除事件处理程序，用addEventListener()方法指定的函数必须是外部的“命名”函数，如下面的示例(myFunc)。匿名函数，例如“ element .removeEv...
js DOM 事件 事件监听
海胆的博客
06-11 791
事件 属性 此事件发生在何时… onchange 域的内容被改变 onresize 窗口或框架被重新调整大小 属性 此事件发生在何时… onfocus 元素获得焦点 onblur 元素失去焦点 onselect 文本被选中 属性 此事件发生在何时… onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 onmousedown 鼠标按钮被按下 onmouse
JavaScript - BOM
S_numb的博客
01-09 709
这篇文章参考内容分为两部分： 西部开源-秦疆老师； https://www.w3school.com.cn/h.asp； 文章目录BOM1.1 JS Window1.2 JS Screen1.3 JS Location1.4 JS History1.5 JS Navigator1.6 JS 弹出框1.7 JS Timing1.8 JS Cookies BOM JavaScript Wi...
react-router-dom
08-02
```javascript import React from "react"; import { withRouter } from "react-router-dom"; class ScrollToTop extends React.Component { componentDidUpdate(prevProps) { if (this.props.location.pathname ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值