js经典demo

以下是一个简单的JavaScript经典示例，用于展示DOM操作（文档对象模型）：

一、基础概念

DOM
- DOM是将HTML文档表示为树形结构的一种方式。它将HTML元素看作节点，这些节点之间存在着父子关系等各种关系。例如，<html>是根节点，<body>是<html>的子节点，而<div>、<p>等元素又可以是<body>的子节点。

JavaScript操作DOM
- JavaScript可以通过各种方法来访问和修改DOM元素。例如，可以使用document.getElementById()来获取具有特定id属性的元素，然后可以修改这个元素的属性（如innerHTML、style等）或者添加/删除子元素。

二、示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>JavaScript DOM操作示例</title>
    <style>
        #myDiv {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="myDiv"></div>
    <button onclick="changeColor()">改变颜色</button>
    <button onclick="changeSize()">改变大小</button>

    <script>
        function changeColor() {
            var div = document.getElementById('myDiv');
            div.style.backgroundColor = 'red';
        }

        function changeSize() {
            var div = document.getElementById('myDiv');
            div.style.width = '200px';
            div.style.height = '200px';
        }
    </script>
</body>

</html>

三、优势