JavaScript - Api学习 Day1（WebApi、操作DOM对象）

已于 2024-08-19 14:48:06 修改
阅读量735 收藏 3
点赞数 21
分类专栏： HTML+CSS+JS 文章标签： javascript 学习 开发语言
于 2024-08-19 12:13:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74154295/article/details/141173362
版权

应用编程接口 (API) 是编程语言中提供的结构，允许开发者更轻松地创建复杂的功能。、

webapi 是一套 操作网页内容(DOM) 与 浏览器窗口(BOM) 的对象

Js由ECMAScript、DOM、BOM三个部分组成。

文章目录

零、前言

0.1 变量声明

  1. 排除 var：

    • var 是早期的 JavaScript 变量声明方式，但由于其作用域问题（如函数作用域、变量提升）以及在大规模应用中容易导致意外行为，现代开发中通常不再使用。

  2. 优先使用 const：

     建议数组和对象使用 const 来声明

    • const 声明的变量必需初始化赋值且不能再重新赋值，因此在语义上更清晰，表示这个变量的值不会改变。

    • 尽管 const 声明的值不能更改，但对于引用数据类型（如对象、数组等），const 声明的变量存储的是引用的地址，而不是具体的值。这意味着你可以修改引用数据类型的内容，但不能重新赋值为其他引用。

    • 在现代开发中，尤其是在使用如 React 这样的框架时，const 是最常用的声明方式，因为很多状态和常量一经初始化就不会改变。

// 代码01：尝试重新定义const声明的对象，这会导致错误
const obj = { name: "张三" };
obj = { name: "李四" }; // 错误：TypeError: Assignment to constant variable.

// 代码02：在const声明的对象上添加新属性，这是允许的
const obj2 = { name: "张三" };
obj2.uname = "李四"; // 正确：在obj2对象上添加了一个新属性uname

在JavaScript中，对象的属性可以在对象创建后任何时间被添加或修改。这是因为JavaScript的对象是动态的，可以随时扩展或更改其结构。
*
代码01尝试重新定义一个已经声明为const的对象obj。这是不允许的，因为const声明的变量不能被重新赋值。这里的错误是尝试将obj重新赋值为一个新的对象字面量，这违反了const的规则。
*
代码示例则是在已经存在的对象obj上添加一个新的属性uname。这是允许的，因为虽然obj是用const声明的，但我们只是在修改对象的内容，而不是尝试改变obj变量的引用地址。const只保证变量的引用不变，不保证其内容不变。
*
因此，右边的代码是有效的，而左边的代码会导致一个错误。

  1. 在必要时使用 let：

     如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
    • 如果你需要声明一个会被重新赋值的变量，应该使用 let。let 有块级作用域，这样可以避免一些 var 可能带来的问题。
    • 开发时可以先尝试使用 const，如果后续发现变量需要改变，再将其改为 let。

总结建议：

  • 优先使用 const：在确定变量不会被重新赋值的情况下，直接使用 const。
  • 如果需要重新赋值：在发现需要改变变量的值时，将其改为 let。

壹、WebAPI的认识

1.1 作用

操作html和浏览器

DOM（文档对象模型）： 表示 HTML 文档的结构。
BOM（浏览器对象模型）： 处理浏览器相关的对象，使得与浏览器进行交互成为可能。

1.2 什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API，是一种与浏览器、平台、语言无关的接口，是用户可以访问页面其他的组件。

使得Web开发人员，方便的访问站中的数据，脚本，表现层的对象的内容。

我们可以拥有下面这样的节点图
文档树直观的体现了标签与标签之间的关系在这里插入图片描述

1.3 什么是DOM对象

浏览器根据html标签生成的 JS对象（DOM对象），把内容当作对象处理
document是 DOM 里提供的一个对象，网页所有内容都在document里面

DOM（Document Object Model，文档对象模型）对象是一个用于表示和操作HTML或XML文档的编程接口。它将文档表示为一个由节点组成的树形结构，每个节点代表文档中的一个部分，例如元素、属性、文本等。通过DOM，程序可以动态地访问和修改页面内容、结构和样式。

主要概念：

  1. 节点：DOM树的基本组成单位，分为不同类型的节点，如元素节点、文本节点和属性节点。

    • 元素节点：代表HTML或XML文档中的标签（如 <div>、<p>）。
    • 文本节点：代表元素或属性中的文本内容。
    • 属性节点：代表元素的属性（如 class、id）。

  2. DOM树：文档的结构化表示，根节点通常是文档本身，下面是其子节点，形成一个树状结构。

  3. 节点操作：

    • 创建：使用 document.createElement()、document.createTextNode() 等方法创建新节点。
    • 插入：使用 appendChild()、insertBefore() 等方法将新节点插入到DOM树中。
    • 删除：使用 removeChild() 删除节点。
    • 修改：通过修改节点的属性、文本内容或样式来更新页面内容。

  4. 访问和操作：

    • 选择节点：通过 document.getElementById()、document.querySelector() 等方法选择节点。
    • 修改内容：使用 .innerHTML、.textContent 等属性修改节点内容。
    • 修改样式：通过 element.style 修改节点的样式。

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 操作示例</title>
    <style>
        #myElement {
            color: blue;
            font-size: 20px;
        }
        
        #newElement {
            color: green;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="myElement">这是一个示例元素。</div>
</body>

</html>

    <script>
        // 获取ID为'myElement'的元素
        let element = document.getElementById('myElement');

        // 修改文本内容
        element.textContent = '新内容: 这个元素的内容已经被修改了！';

        // 修改元素样式
        element.style.color = 'red'; // 更改字体颜色为红色
        element.style.fontSize = '24px'; // 更改字体大小为24px

        // 创建新的段落元素
        let newElement = document.createElement('p');
        newElement.id = 'newElement'; // 给新元素指定ID
        newElement.textContent = '这是新创建的段落。';

        // 修改新元素的样式
        newElement.style.color = 'green'; // 设置字体颜色为绿色
        newElement.style.fontSize = '16px'; // 设置字体大小为16px

        // 将新元素插入到页面中
        document.body.appendChild(newElement);
    </script>

DOM是与JavaScript交互的桥梁，允许开发者动态更新页面内容，使得Web应用程序可以更具互动性和响应能力。

二、获取DOM对象

2.1 根据CSS选择器获取DOM元素

querySelector 和 querySelectorAll 是两种非常强大的JavaScript方法，用于选择DOM中的元素。它们使用CSS选择器语法，允许你通过复杂的选择器模式找到页面上的元素。

2.1.1 querySelector

  • 功能: querySelector 返回文档中与指定CSS选择器匹配的第一个元素。如果找到了符合条件的元素，它将返回该元素；如果没有找到，则返回 null。

  • 使用场景: 当你只需要找到第一个匹配的元素时，使用 querySelector。

  • 语法:

    var element = document.querySelector("cssSelector");

  • 返回值:

    • querySelector 返回与指定CSS选择器匹配的第一个元素。
    • 如果找到了匹配的元素，返回该 单个元素的引用（Element 对象）。
    • 如果没有找到匹配的元素，返回 null。

  • 示例:

    var element = document.querySelector(".example");
console.log(element); // 如果存在匹配元素，输出该元素；如果没有匹配，输出 null。

  • 示例:

    // 获取页面中第一个类名为 'header' 的元素
var header = document.querySelector(".header");

// 获取页面中第一个 id 为 'main' 的元素
var main = document.querySelector("#main");

// 获取页面中第一个 <p> 元素
var paragraph = document.querySelector("p");

// 获取页面中第一个属性为 'data-role="admin"' 的元素
var adminElement = document.querySelector('[data-role="admin"]');

2.1.2 querySelectorAll

  • 功能: querySelectorAll 返回文档中与指定CSS选择器匹配的所有元素的一个静态 NodeList（类数组对象）。如果找到了符合条件的元素，它将返回一个包含所有匹配元素的 NodeList；如果没有找到，则返回一个空的 NodeList。

  • 使用场景: 当你需要找到所有匹配的元素时，使用 querySelectorAll。

  • 语法:

    var elements = document.querySelectorAll("cssSelector");

  • 返回值:

    • querySelectorAll 返回与指定CSS选择器匹配的所有元素的一个静态 NodeList（类似数组的对象）。
    • 如果找到了匹配的元素，返回一个 NodeList，其中包含了所有匹配的元素。
    • 如果没有找到匹配的元素，返回一个空的 NodeList，即长度为0。

  • 示例:

    var elements = document.querySelectorAll(".example");
console.log(elements); // 输出一个 NodeList 对象，如果没有匹配元素，则输出一个空的 NodeList。

  • 示例:

    // 获取页面中所有类名为 'header' 的元素
var headers = document.querySelectorAll(".header");

// 获取页面中所有 <p> 元素
var paragraphs = document.querySelectorAll("p");

// 获取页面中所有属性为 'data-role="admin"' 的元素
var adminElements = document.querySelectorAll('[data-role="admin"]');

// 遍历所有匹配的元素
headers.forEach(function(header) {
    console.log(header.textContent);
});

2.1.3 区别与相似点

  1. 返回值:
    • querySelector 返回第一个匹配的单个元素。
    • querySelectorAll 返回所有匹配元素的 NodeList，即使只有一个元素匹配，也会返回一个长度为1的 NodeList。

  • Element 对象（querySelector 返回的）：这是一个代表HTML元素的对象，它允许你访问和操作该元素的属性和方法。

  • NodeList 对象（querySelectorAll 返回的）：这是一个类数组对象，包含了文档中所有与选择器匹配的元素。它可以通过索引访问元素，类似数组，可以使用 forEach 或
    for...of 进行遍历，但它不是一个真正的数组（尽管可以通过 Array.from() 方法将其转换为数组）。

  1. 选择器:

    • 二者都使用相同的CSS选择器语法，如类选择器（.class）、ID选择器（#id）、属性选择器（[attribute="value"]）等。

  2. 遍历:

    • querySelectorAll 返回的 NodeList 是静态的，可以使用 forEach、for...of 循环或标准的索引来遍历。
示例对比
// querySelector 示例
var firstDiv = document.querySelector("div");
console.log(firstDiv); // 返回文档中第一个 <div> 元素，或 null（如果不存在）

// querySelectorAll 示例
var allDivs = document.querySelectorAll("div");
console.log(allDivs); // 返回包含所有 <div> 元素的 NodeList，或空的 NodeList（如果没有匹配元素）

// 访问 NodeList 中的元素
if (allDivs.length > 0) {
    console.log(allDivs[0]); // 访问第一个 <div> 元素
}

2.1.4 实际应用

  • querySelector 非常适合用于快速获取页面中的单个元素，例如获取页面中的第一个表单、按钮或图片。
  • querySelectorAll 更适合用于处理多个元素的集合，例如对页面中的所有列表项进行操作，或获取所有符合特定条件的元素。

2.2 其他获取DOM元素方法、要获取DOM对象，可以使用以下几种常见的JavaScript方法：

1. 使用 getElementById

通过元素的 id 属性来获取DOM对象。这是最常用的方法之一，因为 id 是唯一的。

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

2. 使用 getElementsByClassName

通过元素的 class 属性获取DOM对象。这个方法返回的是一个类数组对象（HTMLCollection），即使只有一个元素符合条件。

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

3. 使用 getElementsByTagName

通过元素的标签名获取DOM对象。这个方法也返回一个类数组对象（HTMLCollection）。

var elements = document.getElementsByTagName("tagName");

4. 直接从 document 或 window 对象

一些全局的DOM对象可以直接从 document 或 window 对象中获取，例如 document.body 或 window.document。

var body = document.body;
var head = document.head;

选择的方法取决于你需要获取的元素的特性（如 id、class、tag）以及是否需要获取单个元素或多个元素。

三、操作元素

在JavaScript中，你可以通过多种方式操作DOM元素的内容。这些操作主要包括修改元素的文本内容、HTML内容、属性和样式等。以下是常见的方法：

3.1 操作内容

1. 修改元素的文本内容

  • textContent:

    • 该属性用于获取或设置元素的纯文本内容。它会将元素中的所有文本（包括子元素中的文本）作为一个字符串返回或设置。
    • 示例:
      var element = document.querySelector("#myElement");
// 获取文本内容
var text = element.textContent;
console.log(text);

// 设置文本内容
element.textContent = "This is the new text content.";

  • innerText:

    • 与 textContent 类似，但 innerText 会考虑CSS样式，显示的内容与页面呈现的文本一致，并且会触发重绘（reflow）。
    • 示例:
      var element = document.querySelector("#myElement");
element.innerText = "This is the new innerText content.";

2. 修改元素的HTML内容

  • innerHTML:
    • 该属性用于获取或设置元素的HTML内容。它不仅可以包含文本，还可以包含HTML标签和嵌套元素。
    • 示例:
      var element = document.querySelector("#myElement");
// 获取HTML内容
var htmlContent = element.innerHTML;
console.log(htmlContent);

// 设置HTML内容
element.innerHTML = "<strong>This is bold text</strong> and <em>this is italic text</em>.";

3. 区别

直接选择使用innerHTML

Ø 元素.innerText 属性 只识别文本，不能解析标签
Ø 元素.innerHTML 属性 能识别文本，能够解析标签

innerHTML 和 innerText 是两个常见的 DOM 属性，用于获取或设置 HTML 元素的内容，它们之间有一些关键区别：

  1. 内容类型：

    • innerHTML: 包含 HTML 标签在内的整个元素内容。当你使用 innerHTML 读取或设置内容时，HTML 标签也会被包含在内。例如，<div> 元素中的 <span>、<a> 等标签都将被解析和呈现。
    • innerText: 仅包含元素的纯文本内容，忽略所有 HTML 标签。当你使用 innerText 读取或设置内容时，所有 HTML 标签都会被忽略或被视为文本的一部分。

  2. 性能：

    • innerHTML: 由于需要解析和构建 HTML 内容，因此在处理复杂或大量内容时可能较慢。使用 innerHTML 修改内容会导致页面的重新渲染，特别是当包含大量或复杂的 HTML 结构时。
    • innerText: 只处理文本，因此相对来说速度更快。innerText 在修改文本内容时不会重新解析 HTML 标签，适合处理简单的文本操作。

  3. 安全性：

    • innerHTML: 因为它允许插入 HTML 内容，因此有可能导致 XSS（跨站脚本攻击）。需要特别小心，尤其是在插入用户输入的内容时，必须进行转义或消毒处理。
    • innerText: 不会解析或执行任何 HTML 或脚本，因此较为安全。如果你只需要处理文本内容而不涉及 HTML 结构，使用 innerText 更为安全。

  4. 浏览器行为：

    • innerHTML: 在不同浏览器中表现一致，用于获取和设置元素的 HTML 结构和内容。
    • innerText: 在早期浏览器中（特别是 Internet Explorer），可能表现不一致，但现代浏览器已经解决了大多数兼容性问题。

示例：

<div id="example"><span>Hello</span> World!</div>

  • 使用 innerHTML：

    document.getElementById("example").innerHTML;  // 返回 "<span>Hello</span> World!"

  • 使用 innerText：

    document.getElementById("example").innerText;  // 返回 "Hello World!"

综上所述，innerHTML 更适合用于处理包含 HTML 结构的内容，而 innerText 更适合用于处理纯文本内容。

3.2 操作元素的属性

3.2.1 操作元素的属性

  • getAttribute 和 setAttribute:

    • 使用 getAttribute 获取元素的特定属性值。

      getAttribute(attributeName): 返回元素中指定属性的值。如果属性不存在，则返回 null。

    • 使用 setAttribute 设置元素的特定属性值。
      setAttribute(attributeName, value): 将指定属性设置为新的值。如果属性不存在，则会创建它。

    • 示例:

      var element = document.querySelector("#myElement");

// 获取属性值
var srcValue = element.getAttribute("src");
console.log(srcValue);

// 设置属性值
element.setAttribute("src", "newImage.png");

  • removeAttribute:

    • 该方法用于移除元素的某个属性。
    • 示例:
      var element = document.querySelector("#myElement");
element.removeAttribute("title");

3.2.2 操作元素的样式

  • 直接操作 style 属性:

    • 你可以直接通过 style 属性设置元素的内联样式。
    • 示例:
      var element = document.querySelector("#myElement");
element.style.color = "red"; // 改变文本颜色
element.style.fontSize = "20px"; // 改变字体大小

  • 添加或移除 class:

    • 通过 classList 属性，可以添加、移除、切换CSS类，或检查元素是否包含某个CSS类。
    • 示例:
      var element = document.querySelector("#myElement");

// 添加一个类
element.classList.add("newClass");

// 移除一个类
element.classList.remove("oldClass");

// 切换一个类（如果存在则移除，如果不存在则添加）
element.classList.toggle("toggleClass");

// 检查是否包含某个类
if (element.classList.contains("specificClass")) {
    console.log("Element contains 'specificClass'");
}

3.2.3 自定义属性

自定义属性（Custom Attributes）是指在 HTML 元素上定义的用户自定义属性，通常以 data- 前缀开始。使用自定义属性可以方便地在 HTML 元素上存储与页面或应用程序相关的数据。

1.自定义属性的用法

  1. 定义自定义属性：
    自定义属性通常以 data- 开头，后跟自定义的属性名称。例如，data-user-id、data-role 等。

  2. 获取自定义属性的值：
    可以使用 JavaScript 的 getAttribute 方法来获取自定义属性的值，或者使用 dataset 属性。

  3. 设置自定义属性的值：
    可以使用 setAttribute 方法来设置自定义属性的值，或者通过 dataset 属性直接操作。

2.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Attribute Example</title>
</head>
<body>

<button id="userButton" data-user-id="12345" data-role="admin">User Button</button>

<script>
    // 获取按钮元素
    var button = document.getElementById("userButton");

    // 使用 getAttribute 获取自定义属性
    var userId = button.getAttribute("data-user-id");
    console.log("User ID:", userId); // 输出: User ID: 12345

    // 使用 dataset 获取自定义属性
    var role = button.dataset.role;
    console.log("User Role:", role); // 输出: User Role: admin

    // 设置自定义属性
    button.setAttribute("data-user-id", "67890");
    console.log("New User ID:", button.getAttribute("data-user-id")); // 输出: New User ID: 67890

    // 通过 dataset 设置自定义属性
    button.dataset.role = "editor";
    console.log("New User Role:", button.dataset.role); // 输出: New User Role: editor
</script>

</body>
</html>
3.说明

  1. data- 前缀：

    • 所有自定义属性都应以 data- 开头，这是 HTML5 规范中的要求。这样可以确保自定义属性与标准的 HTML 属性（如 id、class 等）不冲突。

  2. dataset 对象：

    • dataset 是一个特殊的 DOM 属性，它允许你直接访问元素的所有 data- 属性。属性名会自动转换为驼峰命名法，例如 data-user-id 可以通过 element.dataset.userId 访问。

  3. 灵活性：

    • 自定义属性非常适合在 HTML 元素中嵌入与 JavaScript 交互的相关数据，例如用户 ID、状态标识符等。

通过自定义属性，你可以在不影响元素本身行为的情况下，存储和传递额外的数据。这在构建复杂的前端应用时非常有用。

3.3 操作子元素

  • appendChild:

    • 用于在元素的末尾添加一个子元素。
    • 示例:
      var parentElement = document.querySelector("#parent");
var newElement = document.createElement("div");
newElement.textContent = "I am a new child!";
parentElement.appendChild(newElement);

  • removeChild:

    • 用于移除元素中的某个子元素。
    • 示例:
      var parentElement = document.querySelector("#parent");
var childElement = document.querySelector("#child");
parentElement.removeChild(childElement);

  • replaceChild:

    • 用于替换一个子元素。
    • 示例:
      var parentElement = document.querySelector("#parent");
var newElement = document.createElement("div");
newElement.textContent = "I am the replacement!";

var oldElement = document.querySelector("#oldChild");
parentElement.replaceChild(newElement, oldElement);

通过这些方法，你可以灵活地操作DOM中的任何元素，修改其内容、样式和结构。

四、定时器-间歇函数

在 JavaScript 中，间歇函数（Interval Function）是通过 setInterval() 方法实现的。setInterval() 方法会在指定的时间间隔（以毫秒为单位）内反复执行指定的代码或函数，直到使用 clearInterval() 方法手动停止它。

setInterval() 的用法

语法：

setInterval(function, delay, arg1, arg2, ...)
  • function: 要重复执行的函数。
  • delay: 每次执行之间的时间间隔，以毫秒为单位。
  • arg1, arg2, ...: 传递给函数的参数（可选）。

示例代码

以下是一个简单的示例，在控制台中每隔 1 秒（1000 毫秒）打印一次当前时间：

// 定义一个函数，用于显示当前时间
function showTime() {
    let date = new Date();
    let time = date.toLocaleTimeString();
    console.log(time);
}

// 每隔 1 秒执行一次 showTime 函数
let timerId = setInterval(showTime, 1000);

停止间歇函数

要停止 setInterval() 设置的间歇执行，可以使用 clearInterval() 方法。你需要传递 setInterval() 返回的定时器 ID 给 clearInterval()，以终止间歇函数的执行。

// 停止间歇函数
clearInterval(timerId);

完整示例

下面的代码示例展示了如何使用 setInterval() 和 clearInterval()。每隔 1 秒打印一次时间，并在 5 秒后停止打印。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setInterval Example</title>
</head>
<body>

<script>
    // 定义一个函数，用于显示当前时间
    function showTime() {
        let date = new Date();
        let time = date.toLocaleTimeString();
        console.log(time);
    }

    // 每隔 1 秒执行一次 showTime 函数
    let timerId = setInterval(showTime, 1000);

    // 5 秒后停止间歇函数
    setTimeout(function() {
        clearInterval(timerId);
        console.log("Timer stopped.");
    }, 5000);
</script>

</body>
</html>

说明

  • setInterval() 会在页面的整个生命周期中持续运行，直到手动停止或页面被关闭。
  • 使用 clearInterval() 可以避免不必要的资源消耗和潜在的内存泄漏。
  • 可以根据需要调整时间间隔（delay 参数）来控制函数执行的频率。

通过间歇函数，可以实现如轮询、定时更新 UI 等功能。在使用时，注意合理管理定时器，避免造成性能问题。

你会魔法吗✧(≖ ◡ ≖✿)
关注
  • 21
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript-30:Day 30天香草JS挑战
03-12
《JavaScript30：Day 30 天香草JS挑战》是知名Web开发者Wes Bos发起的一项编程训练计划，旨在帮助开发者在30天内通过实践掌握JavaScript的基础和高级技能，不依赖任何库或框架，纯JavaScript编程，也就是所谓的...
js30:wesbose-javascript-30day-挑战
05-22
【标题】"js30:wesbos-javascript-30day-挑战" 是一个由知名前端开发者 Wes Bos 发起的JavaScript学习项目，旨在帮助学员在30天内通过实践掌握JavaScript核心技能。这个挑战涵盖了从基础到进阶的各种JavaScript概念...
JavaScript进阶-WebAPI（DOM节点操作）
ZZP的博客
04-18 380
文章目录二、JavaScript进阶-WebAPIDOM节点操作获取节点增加节点删除节点拓展-时间对象 二、JavaScript进阶-WebAPI DOM节点操作 获取节点 本质: 针对标签本身的增删查 父级: parentNode 子集: children 伪数组 兄弟： 　　nextElementSibling 下一个兄弟 　　previousElementSibling 上一个兄弟 增加节点 方法一： 　　创建新节点 　　　　let result = document.createElem
JavaScript Web API入门day1
2301_77358195的博客
08-03 917
标准属性:标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected。自定义属性：Ø在html5中推出来了专门的data-自定义属性Ø在标签上一律以data-开头Ø在DOM对象上一律以dataset对象方式获取3.定时器-间歇函数3.1 定时器函数介绍目标：能够说出定时器函数在开发中的使用场景，网页之中的倒计时网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发。
javaScript进阶webAPI web前端api进阶DOM、BOM学习笔记day01
hjjshua的博客
06-24 567
js进阶api dom bom 学习笔记api dom bom
Javascript-API-DOM-操作元素对象的属性、文本内容、子元素、样式、事件
qq_39206750的博客
10-21 930
API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 简单理解:API是给程序员提供的一种工具、以便能更轻松的实现想要完成的功能 例如 C语言中有一个函数 fopen()可以打开...
JavaScript - WebAPI - BOM浏览器对象模型
Henry_ID的博客
08-10 160
1.1-BOM与DOM介绍 JavaScript语言由三部分组成 ECMAJavaScript：定义了js的语法规范 Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象 * Dom定义了一套操作HTML文档的API（节点的增删改查） Bom：Browser object model浏览器对象模型 例如：一个浏览器的窗口就是一个window对象 * Bom定义了一套操作浏览器窗口的API Bom主要由五大对象组成：
JavaScript - 基础+WebAPI（笔记）
qq_48937489的博客
05-10 4231
输入输出语法、数据类型、运算符、流程控制（分支语句、循环语句）、数组、对象、函数、DOM、事件监听、常用事件、事件对象、事件流、事件委托、日期对象、节点操作、window对象、正则表达式、本地存储
冲击JavaScript - day05(Web API)
A
11-01 243
一、Web API 介绍 1.1 概述 JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。 一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。 因此这里也可以称为 网页编程或网页特效。 1.2 什么是BOM BOM 是 JavaScript 操作浏览器的接口，全称为“浏览器对象模型”（Browser Obje
4、Web API-DAY4 Dom节点&移动端滑动
m0_51394252的博客
06-24 127
遍历数组， 动态生成tr， 里面填写对应td数据， 并追加给 tbody。(2). 点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式。(3). 注意书写的位置，应该放到新增数据的前面， 阻止默认行为的后面。(2). 创建新的对象，里面存储 表单获取过来的数据，格式如右图。②： 点击录入，根据相关数据，生成对象，追加到数组里面。④： 点击删除按钮，删除的是对应数组里面的数据。
JavaScript Web API入门day2
2301_77358195的博客
08-05 873
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件 ，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。语法：事件监听三要素：Ø。
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
learn-react-day-by-day:每天学习reactJs
04-30
《每天学习ReactJs》是一个全面深入学习React.js的教程，旨在帮助开发者逐步掌握这个流行的JavaScript库。React由Facebook开发并维护，是构建用户界面的利器，尤其在构建单页应用（SPA）和动态Web应用程序中表现出色...
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 331
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 343
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 990
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1152
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你会魔法吗✧(≖ ◡ ≖✿)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值