正文

掌握JavaScript DOM操作与BOM对象，实战案例教你轻松实现网页交互效果

/0 浏览量
0331

JavaScript 是网页开发中不可或缺的一门语言，它允许我们与网页进行交互，创造出丰富的用户体验。在 JavaScript 中，DOM（文档对象模型）和BOM（浏览器对象模型）是两个核心概念。本文将详细介绍 DOM 和 BOM 的操作方法，并通过实战案例，帮助你轻松实现网页交互效果。

一、DOM 操作基础

DOM 是用来表示和操作 HTML 文档的 API。通过 DOM，我们可以访问和修改网页上的元素，如文本、图片、链接等。

1.1 获取元素

要操作 DOM，首先需要获取元素。以下是一些常用的获取元素的方法：

  • getElementById(): 通过 ID 获取元素。
  • getElementsByClassName(): 通过类名获取元素。
  • getElementsByTagName(): 通过标签名获取元素。
  • querySelector(): 通过 CSS 选择器获取元素。
  • querySelectorAll(): 通过 CSS 选择器获取所有匹配的元素。

1.2 元素属性操作

元素属性包括元素的 ID、类名、文本内容、值等。以下是一些常用的属性操作方法：

  • innerHTML: 获取或设置元素的内容（包括 HTML 标签）。
  • innerText: 获取或设置元素的文本内容。
  • value: 获取或设置表单元素的值。
  • className: 获取或设置元素的类名。

1.3 元素样式操作

我们可以通过 JavaScript 修改元素的样式，如下所示：

  • style: 获取或设置元素的样式。

二、BOM 操作基础

BOM 是一组用于处理浏览器窗口和文档的 API。它包括以下对象：

  • window: 代表浏览器窗口。
  • document: 代表整个 HTML 文档。
  • navigator: 包含有关浏览器的信息。
  • screen: 包含有关屏幕的信息。
  • location: 包含有关当前 URL 的信息。

2.1 窗口操作

  • open(): 打开一个新的浏览器窗口。
  • close(): 关闭当前窗口。
  • alert(): 弹出一个警告框。
  • confirm(): 弹出一个确认框。
  • prompt(): 弹出一个输入框。

2.2 文档操作

  • document.write(): 在文档中写入内容。
  • document.title: 获取或设置文档的标题。
  • document.location: 获取或设置当前 URL。

三、实战案例：制作一个简单的计算器

以下是一个简单的计算器示例，它演示了如何使用 DOM 和 BOM 实现网页交互效果。

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
</head>
<body>
    <input type="text" id="display" disabled>
    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button onclick="setOperation('+')">+</button>
    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button onclick="setOperation('-')">-</button>
    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button onclick="setOperation('*')">*</button>
    <button onclick="calculate()">=</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="setOperation('/')">/</button>
</body>
<script>
    let currentInput = '';
    let operation = null;

    function appendNumber(number) {
        currentInput += number;
        updateDisplay();
    }

    function setOperation(op) {
        if (currentInput === '') return;
        if (operation !== null) {
            calculate();
        }
        operation = op;
        currentInput = '';
    }

    function calculate() {
        let result;
        const prev = parseFloat(currentInput);
        if (isNaN(prev)) return;
        switch (operation) {
            case '+':
                result = prev + parseFloat(document.getElementById('display').innerText);
                break;
            case '-':
                result = prev - parseFloat(document.getElementById('display').innerText);
                break;
            case '*':
                result = prev * parseFloat(document.getElementById('display').innerText);
                break;
            case '/':
                result = prev / parseFloat(document.getElementById('display').innerText);
                break;
            default:
                return;
        }
        currentInput = result.toString();
        operation = null;
        updateDisplay();
    }

    function clearDisplay() {
        currentInput = '';
        operation = null;
        document.getElementById('display').innerText = '0';
    }

    function updateDisplay() {
        document.getElementById('display').innerText = currentInput;
    }
</script>
</html>

在这个例子中，我们创建了一个简单的计算器，用户可以通过点击按钮输入数字和运算符。当用户点击等号按钮时，计算器会计算结果并显示在屏幕上。

四、总结

通过本文的学习，你掌握了 JavaScript DOM 和 BOM 的基本操作方法，并通过实战案例实现了网页交互效果。希望这些知识能帮助你更好地掌握 JavaScript，为你的网页开发之路添砖加瓦。

-- 展开阅读全文 --