JavaScript数据交互学习（3）

又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，用document表示

节点：网页中的所有内容，在文档树中都是节点，用node表示

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，用element表示

（3）DOM元素的获取

用ID获取

语法：document.getElementById()

作用：根据ID获取元素

括号中获取的参数是id值，返回为元素对象或者null

举例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="test">原来的文字</p>
</body>
</html>
<script>
  // 通过 ID 获取元素并修改
  document.getElementById("test").innerHTML = "修改了原来的文字";
</script>
效果：

可以看到p标签从“原来的文字”通过定位ID被修改成了这个结果，下面几个用法的效果都差不多就过快一点

用标签名获取

语法：document.getElementsByTagName()

作用：根据标签名获取元素

括号中获取的参数是标签名，返回为元素对象集合

举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>原来的文字</p>
</body>
</html>
<script>
    // 通过标签名获取元素并修改
    document.getElementsByTagName("p")[0].innerHTML = "修改了原来的文字";
</script>
注意这里需要定位到标签位置的对应下标才行，获取的是动态集合

H5新增方式

语法：

document.getElementsByClassName() —— 根据类名返回元素对象集合

document.querySelector() —— 根据选择器返回第一个元素对象

document.querySelectorAll() —— 根据指定选择器返回元素

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="demo">原来的文字1</p>
    <p class="demo">原来的文字2</p>
    <p id="box">原来的文字3</p>
</body>
</html>

<script>
    // 1. getElementsByClassName - 根据类名获取集合
    document.getElementsByClassName("demo")[0].innerHTML = "类名获取成功";

    // 2. querySelector - 根据选择器获取第一个元素
    document.querySelector("#box").innerHTML = "querySelector获取成功";

    // 3. querySelectorAll - 根据选择器获取所有元素集合
    document.querySelectorAll(".demo")[1].innerHTML = "querySelectorAll获取成功";
</script>

复制代码使用即可看到效果，主要是学习获取的代码

特殊元素的获取

语法：

document.body —— 返回body元素对象

document.documentElement —— 返回html元素对象

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    原来的背景色
</body>
</html>

<script>
    // 1. 获取 body 元素并修改背景色
    document.body.style.backgroundColor = "lightblue";

    // 2. 获取 html 元素并修改字体大小
    document.documentElement.style.fontSize = "100px";
</script>

二、事件

（1）事件的概述

事件是被JavaScript侦测到的行为

比如说通过一个点击按钮取产生一个事件然后去执行某些操作

（2）事件三要素

事件源：触发事件的元素

事件类型：比如click点击事件

事件处理程序：事件触发后要执行的代码

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button id="btn">唐伯⻁</button>
  <script>
    // 点击⼀个按钮，弹出对话框
    // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
    //(1) 事件源 事件被触发的对象 谁 按钮
    var btn = document.getElementById('btn');
    //(2) 事件类型 如何触发 什么事件 ⽐如⿏标点击(onclick) 还是⿏标经过 还是键盘按下
    //(3) 事件处理程序 通过⼀个函数赋值的⽅式 完成
    btn.onclick = function() {
    alert('点秋⾹');
    }
  </script>
</body>
</html>

执行事件的步骤：点击button，获取事件源（定位到元素），绑定事件，添加事件处理（函数）

（3）常见的鼠标事件

这个只能死记住，而且比较常用

鼠标事件触发条件

onclick 鼠标点击左键触发

onmouseover 鼠标经过触发

onmouseout 鼠标离开触发

onfocus 获得鼠标焦点触发

onblur 失去鼠标焦点触发

onmousemove 鼠标移动触发

onmouseup 鼠标弹起触发

onmousedown 鼠标按下触发

鼠标事件	触发条件
`onclick`	鼠标点击左键触发
`onmouseover`	鼠标经过触发
`onmouseout`	鼠标离开触发
`onfocus`	获得鼠标焦点触发
`onblur`	失去鼠标焦点触发
`onmousemove`	鼠标移动触发
`onmouseup`	鼠标弹起触发
`onmousedown`	鼠标按下触发

三、操作元素

（1）获取元素内容

语法：

element.innerText —— 从起始位置到终止位置的内容都会获取

element.innerHTML —— 跟Text不同的是，它会保留html标签和空格以及换行
<!DOCTYPE html>
<html>
<body>

<div id="a"></div>
<div id="b"></div>

<script>
// innerText：标签当文字
document.getElementById("a").innerText = "<b>我是文本</b>";

// innerHTML：标签生效
document.getElementById("b").innerHTML = "<b>我是文本</b>";
</script>

</body>
</html>
效果：

很明显能看出区别

（2）常用元素的属性操作

src、href

id、alt、title

获取属性值：元素对象.属性名

举例：

<!DOCTYPE html>
<html>
<body>
    <!-- 定义带属性的元素 -->
    <img id="pic" src="old.jpg" alt="旧图片" title="这是旧图片">
    <a id="link" href="https://old.com" title="旧链接">点我跳转</a>

    <script>
        // 获取元素
        const img = document.getElementById("pic");
        const a = document.getElementById("link");

        // 1. 获取属性值（元素对象.属性名）
        console.log("图片src:", img.src);
        console.log("图片alt:", img.alt);
        console.log("图片title:", img.title);
        console.log("图片id:", img.id);
        console.log("链接href:", a.href);
        console.log("链接title:", a.title);
        console.log("链接id:", a.id);

        // 2. 修改属性值
        img.src = "new.jpg";
        img.alt = "新图片";
        img.title = "这是新图片";
        a.href = "https://new.com";
        a.title = "新链接";
    </script>
</body>
</html>

（3）表单元素的属性操作

语法：

value —— 获取 / 设置表单里的文字内容（输入框、密码框、文本域）
checked —— 单选框 / 复选框 是否选中（true / false）
disabled —— 是否禁用表单（true /false）
selected —— 下拉框选项 是否选中（true / false）

<!DOCTYPE html>
<html>
<body>

用户名：<input type="text" id="user" value="默认名字"><br><br>
密码：<input type="password" id="pwd"><br><br>
同意协议：<input type="checkbox" id="agree"><br><br>
性别男：<input type="radio" name="sex" id="boy"><br><br>
城市：
<select id="city">
  <option>北京</option>
  <option>上海</option>
</select>
<br><br>
<button id="btn">点我操作表单</button>

<script>
  // 获取元素
  const user = document.getElementById("user");
  const pwd = document.getElementById("pwd");
  const agree = document.getElementById("agree");
  const boy = document.getElementById("boy");
  const city = document.getElementById("city");
  const btn = document.getElementById("btn");

  btn.onclick = function(){
    // 1. value 设置输入框内容
    user.value = "我是新名字";
    pwd.value = "123456";

    // 2. checked 选中复选框/单选框
    agree.checked = true;
    boy.checked = true;

    // 3. disabled 禁用
    user.disabled = true;

    // 4. selected 下拉框选中
    city.options[1].selected = true;
  }
</script>

</body>
</html>

（4）样式属性操作

语法：

element.style —— 行内样式操作

element.className —— 类名样式操作

举例：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义一个类名样式 */
    .box-style {
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>
</head>
<body>
  <div id="demo" style="width:100px;height:100px;background:red;"></div>

  <script>
    const box = document.getElementById('demo');

    // 1. element.style：直接修改行内样式（优先级最高）
    box.style.backgroundColor = 'blue'; // 背景变蓝

    // 2. element.className：通过类名修改样式（适合批量样式）
    // box.className = 'box-style'; // 会覆盖原来的所有样式
  </script>
</body>
</html>

四、BOM

（1）BOM的概念

浏览器对象模型，提供了一个独立于内容而是去和浏览器窗口进行交互的对象，其核心对象是window，缺乏标准

（2）BOM和DOM

BOM比DOM更大，它 包含DOM

对比项 DOM（文档对象模型） BOM（浏览器对象模型）

全称文档对象模型浏览器对象模型

概念把「文档」当做一个「对象」来看待把「浏览器」当做一个「对象」来看待

顶级对象 document window

主要学习内容操作页面元素浏览器窗口交互的对象

标准 W3C 标准规范浏览器厂商自定义，兼容性较差

对比项	DOM（文档对象模型）	BOM（浏览器对象模型）
全称	文档对象模型	浏览器对象模型
概念	把「文档」当做一个「对象」来看待	把「浏览器」当做一个「对象」来看待
顶级对象	`document`	`window`
主要学习内容	操作页面元素	浏览器窗口交互的对象
标准	W3C 标准规范	浏览器厂商自定义，兼容性较差

（3）window对象和常见事件

window对象

是浏览器的顶级对象，是JS访问浏览器窗口的一个接口；

作为一个全局对象，定义在全局作用域中的变量、函数都会变成它的属性和方法

调用时可以省略window

页面加载事件

window.load

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>window.onload 示例</title>
  <script>
    // JS 写在元素上方也不会报错，因为等页面完全加载才执行
    window.onload = function() {
      document.getElementById("box").innerText = "页面所有资源加载完成（含图片、CSS）";
    };
  </script>
</head>
<body>
  <div id="box">等待加载...</div>
</body>
</html>

DOMContentLoaded

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DOMContentLoaded 示例</title>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById("box").innerText = "DOM 结构加载完成（无需等待图片/CSS）";
    });
  </script>
</head>
<body>
  <div id="box">等待加载...</div>
</body>
</html>

事件	触发时机	适用场景
`window.onload`	等所有资源（图片、CSS、脚本）都加载完才触发	需要操作图片尺寸等依赖外部资源的场景
`DOMContentLoaded`	等DOM 树构建完成就触发，不等待图片 / CSS	只需操作页面元素、想让 JS 尽快执行的场景

调整窗口大小事件

onresize

（4）定时器

setTimeout() —— 炸弹定时器（带延迟）

setInterval() —— 闹钟定时器（间隔秒数）

clearTimeout() 、clearInterval() —— 停止定时器

举例：

<!DOCTYPE html>
<html>
<body>
  <p id="demo1">setTimeout 演示：等待中...</p>
  <p id="demo2">setInterval 演示：0</p>
  <button onclick="stopTimeout()">取消 setTimeout</button>
  <button onclick="stopInterval()">取消 setInterval</button>

  <script>
    // 1. setTimeout：延迟执行一次
    const t1 = setTimeout(() => {
      document.getElementById("demo1").innerText = "3秒后执行了 setTimeout";
    }, 3000);

    // 2. setInterval：每隔1秒执行一次
    let count = 0;
    const t2 = setInterval(() => {
      count++;
      document.getElementById("demo2").innerText = "setInterval 计数：" + count;
    }, 1000);

    // 3. clearTimeout：取消 setTimeout
    function stopTimeout() {
      clearTimeout(t1);
      document.getElementById("demo1").innerText = "setTimeout 已被取消";
    }

    // 4. clearInterval：取消 setInterval
    function stopInterval() {
      clearInterval(t2);
      document.getElementById("demo2").innerText = "setInterval 已被取消，最终计数：" + count;
    }
  </script>
</body>
</html>

两个停止定时器就是用于取消调用的两个定时器

（5）this的指向

this有三种指向：

全局作用域、普通函数、定时器里的 this，都指向 window

作为对象的方法调用时，this 指向调用它的那个对象（这里是 obj）

用 new 调用构造函数时，this 指向刚创建出来的新实例
<!DOCTYPE html>
<html>
<body>
<script>
// 1. 全局作用域 / 普通函数 / 定时器中的 this → 指向 window
console.log("全局this:", this); // window

function fn() {
  console.log("普通函数this:", this); // window
}
fn();

setTimeout(function() {
  console.log("定时器this:", this); // window
}, 100);


// 2. 方法调用：谁调用，this 指向谁
const obj = {
  name: "对象里的方法",
  say: function() {
    console.log("方法调用this:", this); // obj对象本身
    console.log("this.name:", this.name);
  }
};
obj.say();


// 3. 构造函数：this 指向新创建的实例
function Person(name) {
  this.name = name;
  console.log("构造函数this:", this); // 新创建的实例
}
const p = new Person("小明");
console.log("实例的name:", p.name); // 小明
</script>
</body>
</html>
this 的指向在函数定义时不确定，只有执行时才确定，核心规则是：谁调用它，它就指向谁

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

因果推理第四层盲区：为什么关联≠因果

AtomGit开源社区

CrewAI实战：多智能体协作开发完整指南

── 2. 定义任务链 ── task_prd = Task(description = """用户需求：做一个个人记账 Web 应用。功能要求：1. 记录收入/支出（金额、分类、备注、日期）2. 查看月度收支汇总3. 分类统计饼图请输出一份技术需求文档，包含：- 数据模型设计- API 接口定义- 前端页面结构- 技术栈选型。