JavaScript学习指南

主题

操作DOM对象 ​

DOM（文档对象模型）2 ​

创建元素 ​

要创建 HTML 元素，我们使用标签名。使用 JavaScript 创建 HTML 元素非常简单直接。我们使用方法 document.createElement()。该方法接受 HTML 元素标签名作为字符串参数。

js
// 语法
document.createElement('tagname')
html
<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
</head>

<body>

    <script>
        let title = document.createElement('h1')
        title.className = 'title'
        title.style.fontSize = '24px'
        title.textContent = 'Creating HTML element DOM Day 2'

        console.log(title)
    </script>
</body>

</html>

创建多个元素 ​

要创建多个元素，我们应该使用循环。使用循环，我们可以创建任意数量的 HTML 元素。 创建元素后，我们可以为 HTML 对象的不同属性分配值。

html
<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
</head>

<body>

    <script>
        let title
        for (let i = 0; i < 3; i++) {
            title = document.createElement('h1')
            title.className = 'title'
            title.style.fontSize = '24px'
            title.textContent = i
            console.log(title)
        }
    </script>
</body>

</html>

将子元素追加到父元素 ​

要在 HTML 文档上看到创建的元素，我们应该将其作为子元素追加到父元素。我们可以使用 document.body 访问 HTML 文档主体。document.body 支持 appendChild() 方法。请参见下面的示例。

html
<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
</head>

<body>

    <script>
        // 创建多个元素并追加到父元素
        let title
        for (let i = 0; i < 3; i++) {
            title = document.createElement('h1')
            title.className = 'title'
            title.style.fontSize = '24px'
            title.textContent = i
            document.body.appendChild(title)
        }
    </script>
</body>
</html>

从父节点删除子元素 ​

创建 HTML 后，我们可能想要删除元素，我们可以使用 removeChild() 方法。

示例：

html
<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
</head>

<body>
    <h1>Removing child Node</h1>
    <h2>Asabeneh Yetayeh challenges in 2020</h1>
    <ul>
        <li>30DaysOfPython Challenge Done</li>
        <li>30DaysOfJavaScript Challenge Done</li>
        <li>30DaysOfReact Challenge Coming</li>
        <li>30DaysOfFullStack Challenge Coming</li>
        <li>30DaysOfDataAnalysis Challenge Coming</li>
        <li>30DaysOfReactNative Challenge Coming</li>
        <li>30DaysOfMachineLearning Challenge Coming</li>
    </ul>

    <script>
        const ul = document.querySelector('ul')
        const lists = document.querySelectorAll('li')
        for (const list of lists) {
            ul.removeChild(list)

        }
    </script>
</body>

</html>

正如我们在前面的部分中看到的，有一种更好的方法来消除所有内部 HTML 元素或父元素的子元素，使用 innerHTML 属性方法。

html
<!DOCTYPE html>
<html>

<head>
    <title>Document Object Model:30 Days Of JavaScript</title>
</head>

<body>
    <h1>Removing child Node</h1>
    <h2>Asabeneh Yetayeh challenges in 2020</h1>
    <ul>
        <li>30DaysOfPython Challenge Done</li>
        <li>30DaysOfJavaScript Challenge Done</li>
        <li>30DaysOfReact Challenge Coming</li>
        <li>30DaysOfFullStack Challenge Coming</li>
        <li>30DaysOfDataAnalysis Challenge Coming</li>
        <li>30DaysOfReactNative Challenge Coming</li>
        <li>30DaysOfMachineLearning Challenge Coming</li>
    </ul>

    <script>
        const ul = document.querySelector('ul')
        ul.innerHTML = ''
    </script>
</body>

</html>

上面的代码片段清除了所有子元素。

🌕 你很特别，你每天都在进步。现在，你知道如何在需要时销毁创建的 DOM 元素。你学会了 DOM，现在你有能力构建和开发应用程序。你距离伟大只剩下八天了。现在为你的大脑和肌肉做一些练习。

练习 ​

练习：第1级 ​

  1. 在 HTML 文档上创建一个 div 容器，动态创建 100 到 100 的数字并追加到容器 div。
    • 偶数背景是绿色
    • 奇数背景是黄色
    • 质数背景是红色

练习：第2级 ​

  1. 使用国家数组显示所有国家。查看设计

练习：第3级 ​

从两个图像（jpg 和 gif）检查此项目的要求。所有数据和 CSS 都仅使用 JavaScript 实现。数据在启动文件夹 project_3 中找到。下拉按钮是使用HTML 元素创建的。

🎉 恭喜！🎉

Copyright © 2025 e2ways.com