JavaScript浏览器对象与DOM操作

浏览器对象与DOM操作

浏览器对象

浏览器对象提供了访问和操作浏览器窗口和文档的能力。其中，window对象表示浏览器窗口，document对象表示当前加载的网页文档。

// 弹出窗口
window.alert("Hello, World!");

// 获取元素
var element = document.getElementById("myElement");

DOM操作

DOM（Document Object Model）是用于表示和操作HTML文档的树形结构。可以使用JavaScript来访问和修改DOM元素。

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作</title>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>
    <button id="myButton">点击我</button>

    <script>
        // 修改元素内容
        var paragraph = document.getElementById("myParagraph");
        paragraph.innerHTML = "这是修改后的内容。";

        // 添加事件监听
        var button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            paragraph.style.color = "red";
        });
    </script>
</body>
</html>

创建和添加元素

可以使用JavaScript来创建新的DOM元素并将其添加到文档中。

var newParagraph = document.createElement("p");
newParagraph.textContent = "这是新的段落。";

var parentElement = document.getElementById("parent");
parentElement.appendChild(newParagraph);

在这个章节中，你学习了浏览器对象、DOM操作和如何使用JavaScript来访问、修改和创建DOM元素。下面是一个示例代码，演示了如何通过点击按钮改变段落的颜色并动态地添加新的段落：

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>
    <button id="myButton">点击我</button>
    <div id="parent"></div>

    <script>
        var paragraph = document.getElementById("myParagraph");
        var button = document.getElementById("myButton");
        var parentElement = document.getElementById("parent");

        button.addEventListener("click", function() {
            paragraph.style.color = "red";

            var newParagraph = document.createElement("p");
            newParagraph.textContent = "这是新的段落。";
            parentElement.appendChild(newParagraph);
        });
    </script>
</body>
</html>

这个示例展示了如何使用JavaScript来改变元素的样式、添加事件监听和动态地创建并添加新的DOM元素。在下一个章节中，我们将学习Ajax和数据请求。

上篇 JavaScript模块化编程与ES6 JavaScript的Ajax和数据请求下篇

JavaScript浏览器对象与DOM操作

网友评论0