05.初识DOM~初识事件前（77~96）

Tsugumi
237 阅读20分钟

DOM

1.初识DOM

JavaScript DOM（文档对象模型）是JavaScript语言与HTML和XML文档之间的接口。它提供了一种结构化的方式来访问和操作文档的内容、结构和样式，从而实现动态的交互效果和用户界面。

通过JavaScript DOM，开发者可以使用JavaScript来获取、创建、修改和删除HTML元素，改变元素的样式、属性和内容，以及响应用户的交互事件。这使得开发者可以实现动态更新页面内容、表单验证、动画效果、事件处理等功能。

image.png

2.获取元素

非常规

image.png

常规

getElementById

getElementById 是 JavaScript DOM 中常用的方法之一，用于通过元素的 ID 来获取文档中的特定元素。它的使用方式如下：

var element = document.getElementById('elementId');

在上述代码中，document 是文档对象模型（DOM）的根节点，getElementById 是一个方法，用于获取文档中具有指定 ID 的元素。在括号中传入元素的 ID，然后返回对应的元素对象。

getElementsByClassName（伪数组）

在 JavaScript 中，获取具有特定类名的元素的方法是使用 getElementsByClassName。这个方法返回一个包含所有具有指定类名的元素的 HTMLCollection 对象。

var elements = document.getElementsByClassName('className');

在上面的代码中，document 是文档对象，getElementsByClassName 是用于获取具有指定类名的元素的方法。在括号中传入类名，然后返回具有该类名的元素的集合。

getElementsByTagName

getElementsByTagName() 方法用于在 JavaScript 中检索文档中具有指定标签名称的所有元素。例如，如果您想要检索文档中的所有

元素，可以使用以下代码：

var paragraphs = document.getElementsByTagName('p');

image.png

getElementsByName

getElementsByName() 方法是用于在 JavaScript 中检索具有指定名称的所有元素。这在处理表单元素时非常有用，因为可以按照元素的名称来获取它们。例如，如果您想要检索具有名称为 "username" 的所有元素，可以使用以下代码：

var usernameElements = document.getElementsByName('username');

image.png

这将返回具有名称为 "username" 的所有元素的集合。请注意，这个方法通常用于处理表单元素，而不是一般的文档元素。

querySelector（兼容性）

querySelector 是一个用于在 HTML 文档中选择元素的 JavaScript 方法。它使用 CSS 选择器语法来定位元素，并返回第一个匹配的元素。例如，可以使用以下语法来选择具有特定 ID 的元素：

document.querySelector('#elementId');

或者使用以下语法来选择具有特定类名的元素：

document.querySelector('.className');

这个方法非常有用，因为它允许开发人员使用熟悉的 CSS 选择器语法来选择和操作页面中的元素。

image.png

3.操作元素属性

元素自带（原生）属性

HTML元素中常见的自带属性包括

  1. id：用于给元素指定唯一的标识符。
  2. class：用于为元素指定一个或多个类名，以便与CSS样式表关联。
  3. style：用于为元素指定内联CSS样式。
  4. title：用于为元素提供附加的说明性信息，通常在鼠标悬停时显示为工具提示。
  5. lang：用于指定元素的语言。
  6. dir：用于指定元素的文本方向（从左到右或从右到左）。
  7. tabindex：用于指定元素在Tab键顺序中的位置。

这些属性是HTML元素自带的，可以直接在标签中使用，无需额外定义。

自定义属性

自定义属性是指在HTML元素中添加的非标准属性，用于存储自定义数据或信息。这些属性以 "data-" 开头，后面跟着自定义的属性名称。例如，可以这样定义一个自定义属性：

<div data-customattribute="somevalue">...</div>

在这个例子中，"data-customattribute" 是一个自定义属性，它存储了一个自定义的数值 "somevalue"。这些自定义属性可以通过JavaScript或CSS来访问和操作，为开发人员提供了一种灵活的方式来存储和处理元素相关的数据。例如，可以使用JavaScript的 getAttribute 方法来获取自定义属性的值：

var value = document.querySelector('div').getAttribute('data-customattribute');

需要注意的是，虽然自定义属性在大多数情况下是有效的，但它们可能会与未来的HTML规范发生冲突，因此最好避免使用与未来可能引入的标准属性相同的名称。

操作原生属性

在JavaScript中，可以使用以下方法来操作HTML元素的原生属性：

  1. 获取属性的值：可以使用元素对象的属性来获取其属性的值。例如，要获取一个元素的ID属性，可以这样做：
var elementId = document.getElementById('elementId').id;
  1. 设置属性的值：可以使用元素对象的属性来设置其属性的值。例如，要设置一个元素的类名属性，可以这样做：
document.getElementById('elementId').className = 'newClassName';
  1. 获取和设置自定义属性：可以使用 getAttribute 和 setAttribute 方法来获取和设置元素的自定义属性。例如，要获取一个元素的自定义属性值，可以这样做：
var customAttributeValue = document.getElementById('elementId').getAttribute('data-customattribute');

要设置一个元素的自定义属性值，可以这样做：

document.getElementById('elementId').setAttribute('data-customattribute', 'somevalue');

image.png

这些方法可以帮助您在JavaScript中操作HTML元素的原生属性。

操作自定义属性

data-命名

在 JavaScript 中，你可以给 HTML 元素添加自定义属性，以便在编程中存储和访问额外的信息。当你使用 "data-" 前缀来命名自定义属性时，这些属性将被认为是合法的自定义数据属性，并且符合 HTML5 规范。

例如，你可以给一个 HTML 元素添加一个名为 "data-id" 的自定义属性，如下所示：

<div id="myDiv" data-id="12345">This is a div with a custom data attribute</div>

在 JavaScript 中，你可以通过以下方式访问和操作这个自定义属性：

// 获取自定义属性的值
var idValue = document.getElementById('myDiv').getAttribute('data-id');
console.log(idValue); // 输出：12345

// 设置自定义属性的值
document.getElementById('myDiv').setAttribute('data-id', '54321');

image.png

dataset获取

在 JavaScript 中，可以使用 dataset 属性来访问和操作 HTML 元素的自定义数据属性。自定义数据属性是以 data- 开头的属性，例如 data-id、data-name 等。dataset 属性提供了一种方便的方式来访问这些自定义属性。

例如，如果有一个 HTML 元素如下所示：

<div id="myElement" data-name="John" data-age="25"></div>

你可以使用 dataset 属性来访问这些自定义属性的值：

var element = document.getElementById('myElement');
var name = element.dataset.name; // 获取 data-name 属性的值
var age = element.dataset.age; // 获取 data-age 属性的值

console.log(name); // 输出 "John"
console.log(age); // 输出 "25"

在这个例子中，dataset 属性允许你以一种更简洁的方式来访问自定义属性的值，而无需使用 getAttribute 方法。

你还可以使用 dataset 属性来动态设置自定义属性的值：

element.dataset.age = 30; // 设置 data-age 属性的值为 30

image.png

总之，dataset 属性提供了一种方便的方式来访问和操作 HTML 元素的自定义数据属性，使得在 JavaScript 中处理这些属性变得更加简单和直观。

4.案例-密码可视

image.png


<!DOCTYPE html>
<html>
<head>
  <title>Password Visibility Toggle</title>
</head>
<body>
  <h2>Password Visibility Toggle</h2>
  <!-- 创建一个密码输入框 -->
  <input type="password" id="passwordInput">
  <!-- 创建一个复选框用于切换密码的可见性 -->
  <input type="checkbox" id="toggleCheckbox"> Show Password

  <script>
    // 获取密码输入框和复选框的引用
    var passwordInput = document.getElementById('passwordInput');
    var toggleCheckbox = document.getElementById('toggleCheckbox');

    // 监听复选框的状态变化
    toggleCheckbox.addEventListener('change', function() {
      // 如果复选框被选中
      if (toggleCheckbox.checked) {
        // 显示密码
        passwordInput.type = 'text';
      } else {
        // 否则隐藏密码
        passwordInput.type = 'password';
      }
    });
  </script>
</body>
</html>

5.案例-购物车全选

image.png

<!DOCTYPE html>
<html>
<head>
  <title>Shopping Cart with Select All</title>
</head>
<body>
  <h2>Shopping Cart</h2>
  <!-- 创建一个全选复选框 -->
  <input type="checkbox" id="selectAllCheckbox"> Select All

  <!-- 创建多个商品复选框 -->
  <input type="checkbox" class="productCheckbox"> Product 1
  <input type="checkbox" class="productCheckbox"> Product 2
  <input type="checkbox" class="productCheckbox"> Product 3

  <script>
    // 获取全选复选框和商品复选框的引用
    var selectAllCheckbox = document.getElementById('selectAllCheckbox');
    var productCheckboxes = document.getElementsByClassName('productCheckbox');

    // 监听全选复选框的状态变化
    selectAllCheckbox.addEventListener('change', function() {
      // 遍历所有商品复选框
      for (var i = 0; i < productCheckboxes.length; i++) {
        // 将每个商品复选框的状态设置为与全选复选框相同
        productCheckboxes[i].checked = selectAllCheckbox.checked;
      }
    });

    // 遍历所有商品复选框
    for (var i = 0; i < productCheckboxes.length; i++) {
      // 监听每个商品复选框的状态变化
      productCheckboxes[i].addEventListener('change', function() {
        // 如果所有商品复选框都被选中，则将全选复选框也设置为选中，否则取消选中
        var allChecked = true;
        for (var j = 0; j < productCheckboxes.length; j++) {
          if (!productCheckboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        selectAllCheckbox.checked = allChecked;
      });
    }
  </script>
</body>
</html>

6.操作元素文本内容

innerHTML

innerHTML 是 JavaScript 中用于获取或设置 HTML 元素内容的属性。通过 innerHTML 属性，你可以访问元素的子元素、文本内容以及 HTML 标记。

以下是一些关于 innerHTML 属性的常见用法：

  1. 获取元素的 HTML 内容：
var element = document.getElementById('myElement');
var content = element.innerHTML; // 获取元素的 HTML 内容
console.log(content);
  1. 设置元素的 HTML 内容：
var element = document.getElementById('myElement');
element.innerHTML = '<p>This is a new content</p>'; // 设置元素的新 HTML 内容

需要注意的是，使用 innerHTML 属性来设置元素的 HTML 内容时，原先的内容会被完全替换。如果你只想在现有内容的基础上添加新的内容，可以使用 += 运算符来追加内容，例如：

var element = document.getElementById('myElement');
element.innerHTML += '<p>This is additional content</p>'; // 在现有内容的基础上追加新的 HTML 内容

image.png

然而，需要小心使用 innerHTML 属性，因为它可以导致潜在的安全风险，特别是当将用户提供的内容直接赋给 innerHTML 属性时，可能会引发跨站脚本攻击（XSS）。

innerText

`innerText` 是 JavaScript 中用于获取或设置 HTML 元素文本内容的属性。与 `innerHTML` 属性不同，`innerText` 只会返回元素的纯文本内容，不包括任何 HTML 标记。

以下是一些关于 innerText 属性的常见用法：

  1. 获取元素的文本内容：
var element = document.getElementById('myElement');
var textContent = element.innerText; // 获取元素的文本内容
console.log(textContent);
  1. 设置元素的文本内容：
var element = document.getElementById('myElement');
element.innerText = 'This is a new text content'; // 设置元素的新文本内容

需要注意的是，使用 innerText 属性来设置元素的文本内容时，原先的内容会被完全替换。如果你只想在现有内容的基础上添加新的文本内容，可以使用 += 运算符来追加内容，例如：

var element = document.getElementById('myElement');
element.innerText += 'This is additional text content'; // 在现有内容的基础上追加新的文本内容

image.png

与 innerHTML 属性类似，需要小心使用 innerText 属性，因为它也可能会导致潜在的安全风险，特别是当将用户提供的内容直接赋给 innerText 属性时，可能会引发跨站脚本攻击（XSS）。

value

value 是 JavaScript 中用于获取或设置表单元素的值的属性。它通常用于获取或设置输入框（如文本框、密码框、下拉框等）的值。

以下是一些关于 value 属性的常见用法：

  1. 获取输入框的值：
var inputElement = document.getElementById('myInput');
var value = inputElement.value; // 获取输入框的值
console.log(value);
  1. 设置输入框的值：
var inputElement = document.getElementById('myInput');
inputElement.value = 'New value'; // 设置输入框的新值

value 属性可以用于获取用户输入的内容，也可以用于动态设置输入框的值。它适用于各种类型的表单元素，包括文本框、密码框、单选按钮、复选框、下拉框等。

image.png

需要注意的是，对于单选按钮和复选框，value 属性表示该元素被选中时所提交的值。而对于下拉框，value 属性表示当前选中的选项的值。

7.案例-渲染页面

image.png image.png

8.操作元素样式

行内样式style （可读写）

在JavaScript中，您可以使用以下方法来获取HTML元素的行内样式：

// 通过元素的id获取
var element = document.getElementById('elementId');
var inlineStyle = element.style.cssText;

// 通过元素的类名获取
var elements = document.getElementsByClassName('className');
var inlineStyles = [];
for (var i = 0; i < elements.length; i++) {
  inlineStyles.push(elements[i].style.cssText);
}

// 通过元素的标签名获取
var elementsByTagName = document.getElementsByTagName('tagName');
var inlineStylesByTagName = [];
for (var i = 0; i < elementsByTagName.length; i++) {
  inlineStylesByTagName.push(elementsByTagName[i].style.cssText);
}

上述代码中，我们使用了style属性来获取元素的行内样式。style属性返回一个表示元素的内联样式的对象，您可以通过cssText属性来获取该内联样式的文本表示形式。

image.png

（内部样式，外部样式，行内）getComputedStyle

image.png

// 获取元素
var element = document.getElementById('myElement');

// 获取计算样式
var computedStyle = window.getComputedStyle(element);

// 访问特定样式
var backgroundColor = computedStyle.backgroundColor; // 获取背景颜色
var fontSize = computedStyle.fontSize; // 获取字体大小

这个例子中，getComputedStyle 方法被用来获取 myElement 元素的计算样式。返回的 computedStyle 对象包含了该元素的所有计算样式，您可以通过属性名访问特定的样式

9.操作元素类名

box.className

当使用 box.className 时，您可以通过以下代码示例来访问和修改元素的类名：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="box" class="highlight">This is a box</div>

<script>
  // 获取元素
  var box = document.getElementById('box');

  // 获取类名
  var className = box.className;
  console.log(className);  // 输出: highlight

  // 修改类名
  box.className = 'newClass';
  console.log(box.className);  // 输出: newClass
</script>

</body>
</html>

在这个例子中，我们有一个 div 元素，其 id 为 box，并且具有初始类名 highlight。通过JavaScript，我们可以使用 box.className 来获取和修改元素的类名。在这个例子中，我们首先获取了元素的类名，然后将其修改为 newClass。

classList

当使用 classList 时，您可以通过以下代码示例来访问和修改元素的类列表：

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="box" class="highlight">This is a box</div>

<script>
  // 获取元素
  var box = document.getElementById('box');

  // 获取类列表
  var classes = box.classList;
  console.log(classes);  // 输出: ["highlight"]

  // 添加类
  box.classList.add('newClass');
  console.log(box.className);  // 输出: "highlight newClass"

  // 删除类
  box.classList.remove('highlight');
  console.log(box.className);  // 输出: "newClass"
</script>

</body>
</html>

image.png

在这个例子中，我们有一个 div 元素，其 id 为 box，并且具有初始类名 highlight。通过JavaScript，我们可以使用 classList 对象来获取和修改元素的类列表。在这个例子中，我们首先获取了元素的类列表，然后添加了一个新的类 newClass，接着删除了原有的类 highlight。

10.选项卡

简易

image.png

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Tab</title>
    <style>
        .tab {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  margin-right: 10px;
}
.tab:hover{
    background-color: yellow;
}

.content {
  display: none;
  padding: 10px;
  background-color: #f1f1f1;
}
    </style>
</head>
<body>
    <div id="tabContainer">
        <div class="tab" onclick="changeTab(0)">英雄联盟</div>
        <div class="tab" onclick="changeTab(1)">Dota2</div>
        <div class="tab" onclick="changeTab(2)">崩坏三</div>
        <div class="tab" onclick="changeTab(3)">明日方舟</div>
      </div>
      
      <div id="contentContainer">
        <div class="content">《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。</div>
        <div class="content">《刀塔2》也被称作《DOTA2》，由《DOTA》的地图核心制作者IceFrog（冰蛙）联手美国Valve公司研发的一款游戏，于2013年4月28日开始测试，发布中文名为“刀塔”，是该系列的第二部作品。</div>
        <div class="content">崩坏3 [52] 》是由米哈游科技（上海）有限公司制作发行的一款角色扮演类国产手游，该作于2016年10月14日全平台公测；2020年12月24日，登陆WeGame [1] ；2021年11月4日，游戏正式登陆Steam</div>
        <div class="content">《明日方舟》是由鹰角网络自主开发运营的一款策略向即时战略塔防游戏，于2019年5月1日公测。 [1-3]该游戏适龄级别为12+。</div>
      </div>
     <script>
        function changeTab(index) {
  var tabs = document.getElementsByClassName('tab');
  var contents = document.getElementsByClassName('content');
  
  // 隐藏所有内容
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }
  
  // 显示当前选中的内容
  contents[index].style.display = 'block';
  
  // 移除所有选项卡的选中样式
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
  }
  
  // 添加当前选中的选项卡的选中样式
  tabs[index].classList.add('active');
}

// 默认选择第一个选项卡
changeTab(0);
     </script>      
</body>
</html>

11.DOM节点

介绍

image.png

根节点

image.png

根元素节点

在文档对象模型（DOM）中，根元素节点指的是整个文档结构的最顶层元素节点。在HTML中，根元素节点通常是<html>标签。

以下是一个简单的示例，展示了HTML文档中的根元素节点：

<!DOCTYPE html>
<html>
<head>
  <title>根元素节点示例</title>
</head>
<body>

  <h1>这是一个标题</h1>
  <p>这是一个段落</p>

</body>
</html>

在这个示例中，<html>标签就是根元素节点，它包含了整个HTML文档的结构。

image.png

元素节点

image.png

文本节点

文本节点是文档对象模型（DOM）中的一种节点类型，用于表示HTML或XML文档中的文本内容。文本节点通常包含在元素节点内部，用于呈现元素的文本内容。

以下是一个简单的示例，展示了一个包含文本节点的HTML元素：

<!DOCTYPE html>
<html>
<head>
  <title>文本节点示例</title>
</head>
<body>

  <p>这是一个包含文本节点的段落。</p>

</body>
</html>

image.png 在这个示例中，<p>标签包含了一个文本节点，即“这是一个包含文本节点的段落。

属性节点

在文档对象模型（DOM）中，属性节点是指HTML元素的属性，如id、class、src等。这些属性本身可以被视为节点，称为属性节点。在DOM中，属性节点是元素节点的一部分，用于描述元素的特定属性。

以下是一个简单的示例，展示了一个包含属性节点的HTML元素：

<!DOCTYPE html>
<html>
<head>
  <title>属性节点示例</title>
</head>
<body>

  <img id="myImage" src="example.jpg" alt="示例图片">

</body>
</html>

image.png 在这个示例中，<img>标签包含了几个属性节点，如id、src和alt。

注释节点

在文档对象模型（DOM）中，注释节点表示HTML或XML文档中的注释内容。注释节点是一种特殊的节点类型，用于在文档中添加注释，但不会在页面中显示或影响页面的布局或样式。

以下是一个简单的示例，展示了一个包含注释节点的HTML文档：

<!DOCTYPE html>
<html>
<head>
  <title>注释节点示例</title>
</head>
<body>

  <!-- 这是一个注释节点示例 -->

  <p>这是一个段落</p>

</body>
</html>

image.png 在这个示例中，<!-- 这是一个注释节点示例 --> 就是一个注释节点，它不会在页面中显示，但可以在DOM中被访问。

12.获取节点

childNodes vs children

获取所有节点 vs 所有元素

image.png

firstChild | firstElementChild

firstChild 属性返回指定节点的第一个子节点，无论这个子节点是什么类型的节点（元素节点、文本节点、注释节点等）。

firstElementChild 属性仅返回指定节点的第一个子元素节点。如果第一个子节点不是元素节点，则返回null。

image.png

lastChild | lastElementChild

lastChild 属性返回指定节点的最后一个子节点，无论这个子节点是什么类型的节点（元素节点、文本节点、注释节点等）。

lastElementChild 属性仅返回指定节点的最后一个子元素节点。如果最后一个子节点不是元素节点，则返回null。

image.png

previousSibling | previousElementSibling

previousSibling 属性返回指定节点的前一个兄弟节点，无论这个兄弟节点是什么类型的节点（元素节点、文本节点、注释节点等）。

previousElementSibling 属性仅返回指定节点的前一个兄弟元素节点。如果前一个兄弟节点不是元素节点，则返回null。

image.png

nextSibling | nextElementSibling

nextSibling 属性返回指定节点的下一个兄弟节点，无论这个兄弟节点是什么类型的节点（元素节点、文本节点、注释节点等）。

nextElementSibling 属性仅返回指定节点的下一个兄弟元素节点。如果下一个兄弟节点不是元素节点，则返回null。

image.png

parentNotes | parentElement

parentNode 属性返回指定节点的父节点，无论这个父节点是什么类型的节点（元素节点、文本节点、注释节点等）。 parentElement 属性返回指定节点的父元素节点。如果父节点不是元素节点，则返回null。

image.png

getAttribute

getAttribute 是 JavaScript 中用于获取指定元素的属性值的方法。它可以用于获取元素节点上的任何属性的值，例如id、class、href等。使用getAttribute方法可以通过属性名来获取相应的属性值。

例如，如果有一个元素<div id="myDiv" class="example">，可以使用getAttribute方法来获取id和class属性的值：

var element = document.getElementById("myDiv");
var idValue = element.getAttribute("id"); // 返回 "myDiv"
var classValue = element.getAttribute("class"); // 返回 "example"

image.png

attributes

attributes 和 getAttribute 是 JavaScript 中用于访问元素属性的两种不同方式。

attributes 是一个属性，它返回一个类似数组的对象，包含指定元素的所有属性节点。每个属性节点都是一个包含属性的名称和值的对象。通过attributes可以访问所有属性，包括标准属性和自定义属性。

var element = document.getElementById("myDiv");
var attributeList = element.attributes;

getAttribute 是一个方法，用于获取指定元素的特定属性的值。它需要传入属性的名称作为参数，然后返回对应的属性值。这个方法对于动态获取元素的属性值非常有用，特别是当属性值是动态生成或者通过用户输入或其他方式改变时。

var element = document.getElementById("myDiv");
var idValue = element.getAttribute("id"); // 返回 "myDiv"
var classValue = element.getAttribute("class"); // 返回 "example"

因此，attributes用于访问所有属性节点，而getAttribute用于获取特定属性的值。

image.png

13.节点操作

创建createElement

image.png

插入节点

在 JavaScript 中，可以使用以下方法来插入节点到文档中：

appendChild：

将节点作为最后一个子节点插入到指定父节点中。

var parent = document.getElementById("parent");
var child = document.createElement("p");
child.textContent = "这是一个新的段落";
parent.appendChild(child);

insertBefore：

将节点插入到指定父节点的指定子节点之前。

var parent = document.getElementById("parent");
var child = document.createElement("p");
child.textContent = "这是一个新的段落";
var referenceNode = document.getElementById("referenceNode");
parent.insertBefore(child, referenceNode);

image.png

删除节点

remove

var element = document.getElementById("myElement");
element.parentNode.removeChild(element);

这将从文档中删除具有"id"为"myElement"的元素。

removeChild

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child);

这将从具有"id"为"parent"的元素中移除具有"id"为"child"的子元素。

替换节点

在 JavaScript 中，可以使用 replaceChild 方法来替换节点。以下是一个示例代码：

// 创建一个新的段落元素
var newPara = document.createElement("p");
newPara.textContent = "这是一个新的段落";

// 获取要替换的旧节点
var oldPara = document.getElementById("oldPara");

// 获取旧节点的父节点
var parent = oldPara.parentNode;

// 替换旧节点
parent.replaceChild(newPara, oldPara);

image.png

在这个示例中，我们创建了一个新的段落元素 newPara，并设置了它的文本内容。然后，我们获取了要替换的旧节点 oldPara，以及它的父节点 parent。

克隆节点

在 JavaScript 中，可以使用 cloneNode 方法来克隆节点。以下是一个示例代码：

// 获取要克隆的节点
var originalNode = document.getElementById("original");

// 克隆节点
var clonedNode = originalNode.cloneNode(true);

// 将克隆的节点添加到文档中
document.body.appendChild(clonedNode);

在这个示例中，我们使用 getElementById 方法获取了要克隆的原始节点 originalNode。然后，我们使用 cloneNode 方法来克隆该节点，并将其存储在变量 clonedNode 中。如果将 cloneNode 的参数设置为 true，则会连同节点的所有子节点一起进行克隆。最后，我们将克隆的节点添加到文档的 body 部分中

image.png

14.案例-动态删除

image.png

15.节点属性

image.png

image.png

16.获取元素尺寸

offset（border+padding+content）

image.png

client（padding+content）

image.png

17.获取元素偏移量

offsetleft/top

image.png

clientleft/top

边框厚度

image.png

18.获取可视窗口尺寸

innerwidth/height

  • innerWidth 返回浏览器窗口的视口（viewport）宽度，即浏览器窗口中用于显示网页内容的宽度，包括纵向滚动条（如果有）。
  • innerHeight 返回浏览器窗口的视口（viewport）高度，即浏览器窗口中用于显示网页内容的高度，包括横向滚动条（如果有）。

clientwidth/height

  • clientWidth 返回元素的内部宽度，包括内容区域和内边距，但不包括滚动条和边框。
  • clientHeight 返回元素的内部高度，包括内容区域和内边距，但不包括滚动条和边框。

总

image.png

19.案例-懒加载

以下是一个简单的示例，演示如何使用 JavaScript 实现图片的懒加载：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
  <style>
    .image {
      width: 300px;
      height: 200px;
      margin: 10px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="image" data-src="image1.jpg"></div>
  <div class="image" data-src="image2.jpg"></div>
  <div class="image" data-src="image3.jpg"></div>

  <script>
    const lazyLoad = () => {
      const images = document.querySelectorAll('.image');

      const options = {
        threshold: 0
      };

      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.style.backgroundImage = `url(${img.getAttribute('data-src')})`;
            observer.unobserve(img);
          }
        });
      }, options);

      images.forEach(image => {
        observer.observe(image);
      });
    };

    document.addEventListener('DOMContentLoaded', lazyLoad);
  </script>
</body>
</html>

在这个示例中，我们首先定义了一些带有 data-src 属性的占位图片，这个属性包含了实际图片的 URL。然后，我们使用 Intersection Observer API 来监视这些图片元素，一旦它们进入视口（viewport）中，就会加载实际的图片。

image.png

20.总结

困！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

QQ图片20231111151421.gif

avatar
文章
阅读
粉丝