JavaScript - Api学习 Day1(WebApi、操作DOM对象)

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

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

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

文章目录

  • 零、前言
    • 0.1 变量声明
  • 壹、WebAPI的认识
    • 1.1 作用
    • 1.2 什么是DOM
    • 1.3 什么是DOM对象
      • 主要概念:
      • 示例代码:
  • 二、获取DOM对象
    • 2.1 根据CSS选择器获取DOM元素
      • 2.1.1 `querySelector`
      • 2.1.2 `querySelectorAll`
      • 2.1.3 区别与相似点
        • 示例对比
      • 2.1.4 实际应用
    • 2.2 其他获取DOM元素方法、要获取DOM对象,可以使用以下几种常见的JavaScript方法:
      • 1. 使用 `getElementById`
      • 2. 使用 `getElementsByClassName`
      • 3. 使用 `getElementsByTagName`
      • 4. 直接从 `document` 或 `window` 对象
  • 三、操作元素
    • 3.1 操作内容
      • 1. 修改元素的文本内容
      • 2. 修改元素的HTML内容
      • 3. 区别
    • 3.2 操作元素的属性
      • 3.2.1 操作元素的属性
      • 3.2.2 操作元素的样式
      • 3.2.3 自定义属性
        • 1.自定义属性的用法
        • 2.示例代码
        • 3.说明
    • 3.3 操作子元素
  • 四、定时器-间歇函数
      • `setInterval()` 的用法
      • 示例代码
      • 停止间歇函数
      • 完整示例
      • 说明

零、前言

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
    
    • 如果你需要声明一个会被重新赋值的变量,应该使用 letlet 有块级作用域,这样可以避免一些 var 可能带来的问题。
    • 开发时可以先尝试使用 const,如果后续发现变量需要改变,再将其改为 let

总结建议:

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

壹、WebAPI的认识

1.1 作用

操作html和浏览器

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

1.2 什么是DOM

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

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

我们可以拥有下面这样的节点图
文档树直观的体现了标签与标签之间的关系JavaScript - Api学习 Day1(WebApi、操作DOM对象)_第1张图片

1.3 什么是DOM对象

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

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

主要概念:

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

    • 元素节点:代表HTML或XML文档中的标签(如

      )。

    • 文本节点:代表元素或属性中的文本内容。
    • 属性节点:代表元素的属性(如 classid)。
  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元素

querySelectorquerySelectorAll 是两种非常强大的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");
    
    // 获取页面中第一个 

    元素 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");
    
    // 获取页面中所有 

    元素 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 是静态的,可以使用 forEachfor...of 循环或标准的索引来遍历。
示例对比
// querySelector 示例
var firstDiv = document.querySelector("div");
console.log(firstDiv); // 返回文档中第一个 
元素,或 null(如果不存在) // querySelectorAll 示例 var allDivs = document.querySelectorAll("div"); console.log(allDivs); // 返回包含所有
元素的 NodeList,或空的 NodeList(如果没有匹配元素) // 访问 NodeList 中的元素 if (allDivs.length > 0) { console.log(allDivs[0]); // 访问第一个
元素 }

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. 直接从 documentwindow 对象

一些全局的DOM对象可以直接从 documentwindow 对象中获取,例如 document.bodywindow.document

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

选择的方法取决于你需要获取的元素的特性(如 idclasstag)以及是否需要获取单个元素或多个元素。

三、操作元素

在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 = "This is bold text and this is italic text.";
      

3. 区别

直接选择使用innerHTML

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

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

  1. 内容类型

  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>Hellospan> World!div>
  • 使用 innerHTML

    document.getElementById("example").innerHTML;  // 返回 "Hello World!"
    
  • 使用 innerText

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

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

3.2 操作元素的属性

3.2.1 操作元素的属性

  • getAttributesetAttribute:

    • 使用 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-iddata-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 Exampletitle>
head>
<body>

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

<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 属性(如 idclass 等)不冲突。
  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 Exampletitle>
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 等功能。在使用时,注意合理管理定时器,避免造成性能问题。

你可能感兴趣的:(HTML+CSS+JS,javascript,学习,开发语言)