Skip to content

DOM 对象和内置对象

1. 与用户交互

window 对象的方法中，有一些专门用于处理输入与输出信息，从而实现页面与用户的交互的。

1.1 alert()

向用户弹出一个模态对话框，只有一些信息和一个“OK”按钮。

  • 模态（model）：脚本暂时停止运行，暂停页面与用户的交互，直到用户关闭对话框。
  • alert() 没有返回值

1.2 confirm()

向用户弹出一个模态对话框，显示信息。与 alert() 不同， confirm() 提供选择，有“OK”和“Cancel”两个按钮。

  • 单击“OK”返回布尔值“真”；
  • 单击“Cancel”返回布尔值“假”。

1.3 prompt()

打开模态对话框，允许用户输入信息。

  • 对话框和调用方式与 confirm() 相同
  • prompt() 有第二个可选参数，表示默认输入内容，避免用户直接单击“OK”不输入
  • 返回值：
    • 输入信息并单击“OK”或按回车 -- 返回用户输入的字符串；
    • 无输入直接单击“OK”或按回车 -- 返回设置的默认输入或空字符串；
    • 直接关闭，单击“Cancel”或按 Esc：返回 null。

JavaScript 在某些情况下使用 null 表示空值。作为数值使用时代表 0，作为字符串时表示空字符串 “”，作为布尔值时表示 false。

2. 根据 id 选择元素

获取 HTML 页面里具有某特定 ID 的元素，把相应元素的 ID 作为参数来调用 document 对象的 getElementById() 方法，就会返回特定 ID 的页面元素所对应的 DOM 对象。

e.g.

<div id="div1">...</div>
<script>let myDiv = document.getElementById("div1");</script>
  • 页面元素的 ID 属性要求时唯一的。

innerHTML 属性

innerHTML 属性能够获取或设置位于对象起始和结束标签内的 HTML 代码或文本。

  • 获取内容：读取某个容器里的所有 HTML 结构。
  • 设置内容：将一段新的 HTML 字符串“注入”到元素中，浏览器会自动将其解析并渲染为真实的 DOM 节点。

e.g.

<div id="status">今天天气 <b>晴朗</b></div>

const content = document.getElementById("status").innerHTML;
console.log(content); // 输出: "今天天气 <b>晴朗</b>"

document.getElementById("status").innerHTML = "内容已更新！";

插入 HTML 结构：

const list = document.getElementById("myList");
list.innerHTML = "<li>第一项</li><li>第二项</li>";
// 浏览器会自动把这两个字符串转成真正的 <li> 标签

  • 安全风险 (XSS)：使用 innerHTML 插入由用户提供的数据时，如果用户输入了 <script>恶意代码</script> 并被直接放入 innerHTML，可能会导致跨站脚本攻击 (XSS)。

  • 使用 innerHTML = ... 会清空元素内原有的所有内容及其绑定的事件处理器。

3. 访问浏览器历史记录

浏览器历史记录用 window.history 对象来表示，是访问过的 URL 列表。history 对象的方法能操作浏览器会话历史堆栈，但不能直接操作这些 URL。

  • 属性： history 对象只有一个属性，即长度，表示用户访问过是页面的数量。 alert("You've visited " + history.length + " web pages in this browser session");

  • 3个方法：

    • forward() 和 back() 方法相当于单击浏览器的“前进”和“后退”按钮，得到历史列表里下一个或上一个页面。
    • go()
      • 一个正或负的整数作为参数，跳到历史记录列表里的相对位置。
      • 接收字符串作为参数，找到历史记录列表里最近的匹配的 URL。（许多浏览器不再支持或受限）

4. 使用 location 对象

location 对象包含当前加载页面的 URL 信息。

页面 URL 组成：[协议]//[主机名]:[端口]/[路径][搜索][hash]

属性名 描述 示例
href 完整 URL：获取或设置整个地址。 https://www.example.com:8080/path/index.html?id=123#test
protocol 协议：URL 的协议部分，包括冒号。 https:
host 主机：域名（或 IP 地址）加上端口号。 www.example.com:8080
hostname 主机名：仅包含域名或 IP 地址，不含端口。 www.example.com
port 端口号：URL 中的端口部分。如果 URL 中省略，则为空字符串。 8080
pathname 路径名：URL 中的路径部分，通常以 / 开头。 /path/index.html
search 查询字符串：URL 中从 ? 开始的部分，包含参数。 ?id=123
hash 锚点/哈希：URL 中从 # 开始的部分，常用于页面内部定位。 #test
origin 源：包含协议、域名和端口（只读）。 https://www.example.com:8080

4.1 使用 location 对象导航

  1. 直接设置对象的 href 属性： location.href = 'https://www.newpage.com'; - 使用这种方法，原始页面还保留在浏览器历史记录里。如果要直接替换当前页面，把当前页面从历史记录列表里删除，使用 location 对象的 replace() 方法

  2. location.replace('http://www.newpage.com');

  3. 注意要包含协议头才会识别为绝对地址，以 / 开头为根路径相对地址，会替换当前域名后面的内容；不以协议头或 / 开头为当前目录相对地址，会直接替换当前路径后的内容。

4.2 刷新页面

reload() 方法，相当于单击“刷新”按钮或按F5。

  • 没有参数时，浏览器会加载缓存的内容。为确保从服务器获得页面数据，可以添加参数 true。 location.reload(true);

5. 浏览器信息： navigator 对象

navigator 对象包含浏览器程序本身的数据。

常用属性：

属性名 说明 示例
userAgent 用户代理字符串：最常用的属性，包含浏览器名称、版本和操作系统信息。 Mozilla/5.0 (Windows NT 10.0; ...)
language 系统语言：返回浏览器界面设定的语言。 zh-CN
onLine 联网状态：返回布尔值，判断设备当前是否连接到互联网。 true / false
platform 运行平台：浏览器所在的操作系统平台（虽然在现代浏览器中由于隐私逐渐被废弃）。 Win32
cookieEnabled Cookie 权限：判断用户是否在浏览器中禁用了 Cookie。 true
在现代 Web 开发（ES6+）中，许多强大的新功能都挂载在 navigator 对象下：

  • navigator.geolocation：获取用户的地理位置。

  • navigator.mediaDevices：访问摄像头和麦克风。

  • navigator.clipboard：操作剪贴板内容。

6. 日期和时间

DOM 里没有现成的 Date 对象，要自己创建。

6.1 创建 Date 对象

使用 new 关键字来实例化一个日期对象。

获取当前日期和时间

根据用户计算机的系统时钟创建一个对象。

const now = new Date();
// now 变量现在存储了当前的年、月、日、时、分、秒

创建指定日期和时间

通过传入参数来定义一个特定的时间点。

  • 字符串形式：new Date("2026-01-31") 或 new Date("January 31, 2026 06:00:00")。

  • 数值参数形式：new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)。

    • 位置靠后的参数是可选的，任何未明确指定的参数值将用0替代。

    • 月份是从 0 开始计算的（0 代表 1 月，11 代表 12 月）。

      • 源自 C 语言的历史遗留设计。 开发者在处理显示逻辑时，通常需要编写简单的函数进行转换： const month = now.getMonth() + 1;

6.2 获取数据 (Getter 方法)

一旦创建了对象，你可以利用它提供的方法提取具体的数据片段：

获取目标 方法名 返回值范围
年份 getFullYear() 四位数字年份 (如 2026)
月份 getMonth() 0 - 11 (需手动 +1 匹配人类习惯)
日期 getDate() 1 - 31
星期 getDay() 0 (周日) - 6 (周六)
小时 getHours() 0 - 23
分钟 getMinutes() 0 - 59
秒数 getSeconds() 0 - 59
毫秒 getTime() 自 1970-01-01 起的毫秒数 (时间戳)

  • toDateString()：以易读的英文格式返回日期部分（如 "Sat Jan 31 2026"）。

  • toTimeString()：返回时间部分及详细的时区信息。

6.3 设置和编辑数据 (Setter 方法)

如果你需要修改一个已存在的 Date 对象，可以使用对应的 set 方法。

  • 修改年份：dateObj.setFullYear(2027);

  • 修改月份：dateObj.setMonth(5);（将日期改为 6 月）。

  • 修改日期：dateObj.setDate(15);

  • 联动修改：如果设置 setDate(32)，会自动进位到下个月的第一天。

7. 利用 Math 对象简化运算

不同于 Date 对象，Math 对象已经存在可以直接使用。

7.1 数值取整与修约

主要用于处理小数。

方法 描述 记忆口诀 示例 (3.6) 示例 (-3.6)
Math.round(x) 四舍五入 标准取整 4 -4
Math.floor(x) 向下取整 (往小取) 地板 (Floor) 3 -4
Math.ceil(x) 向上取整 (往大取) 天花板 (Ceiling) 4 -3
Math.trunc(x) 仅保留整数部分 截断 (Truncate) 3 -3

7.2 极值与绝对值

用于比较数值或处理负数。

  • Math.max(x, y, ...): 返回参数中的最大值。

  • Math.min(x, y, ...): 返回参数中的最小值。

  • Math.abs(x): 返回绝对值（忽略负号）。

console.log(Math.max(10, 5, 100)); // 100
console.log(Math.min(10, 5, 100)); // 5
console.log(Math.abs(-50));        // 50 (常用于计算两点间距离)

7.3 随机数生成

  • Math.random(): 返回一个 0 (包含) 到 1 (不包含) 之间的伪随机浮点数。

    • 区间表示：[0, 1)

7.4 数学运算

  • Math.pow(base, exponent): 幂运算。Math.pow(2, 3) 等于 \(2^3 = 8\)。

    • 现代写法： 可以使用 ES6 的 ** 运算符，如 2 ** 3。

  • Math.sqrt(x): 平方根。Math.sqrt(9) 等于 3。

7.5 数学常数

很多数学常数都以 Math 的属性的方式出现。

属性 (Property) 数学符号 描述 (Description)
Math.PI \(\pi\) 圆周率
Math.E \(e\) 自然对数的底数
Math.SQRT2 \(\sqrt{2}\) 2 的平方根
Math.SQRT1_2 \(\sqrt{\frac{1}{2}}\) 1/2 的平方根
Math.LN2 \(\ln(2)\) 2 的自然对数
Math.LN10 \(\ln(10)\) 10 的自然对数
Math.LOG2E \(\log_2(e)\) 以 2 为底 e 的对数
Math.LOG10E \(\log_{10}(e)\) 以 10 为底 e 的对数

7.6 关键字 with

任何对象都可以使用关键字 with，只是 Math 对象容易示范。

with 以对象作为参数，代码块中调用的方法会与作为参数的对象实现关联。如：

with(Math){
    const myRand = random();
    const biggest = max(3,4,5);
    const height = round(76.35);
}