JavaScript学习指南

主题

文档对象模型（DOM） ​

文档对象模型（DOM）1 ​

HTML 文档被结构化为 JavaScript 对象。每个 HTML 元素都有不同的属性，可以帮助操作它。可以使用 JavaScript 获取、创建、追加或删除 HTML 元素。查看下面的示例。使用 JavaScript 选择 HTML 元素类似于使用 CSS 选择。要选择 HTML 元素，我们使用标签名、id、类名或其他属性。

获取元素 ​

我们可以使用 JavaScript 访问已创建的元素。要访问或获取元素，我们使用不同的方法。下面的代码有四个 h1 元素。让我们看看访问 h1 元素的不同方法。

html
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Document Object Model</title>
    </head>
    <body>

     <h1 class='title' id='first-title'>First Title</h1>
     <h1 class='title' id='second-title'>Second Title</h1>
     <h1 class='title' id='third-title'>Third Title</h1>
     <h1></h1>

    </body>
  </html>

通过标签名获取元素 ​

getElementsByTagName()：接受标签名作为字符串参数，此方法返回一个 HTMLCollection 对象。HTMLCollection 是 HTML 元素的类数组对象。length 属性提供集合的大小。每当我们使用此方法时，我们使用索引访问单个元素或循环遍历每个单独的项目。HTMLCollection 不支持所有数组方法，因此我们应该使用常规 for 循环而不是 forEach。

js
// 语法
document.getElementsByTagName('tagname')
js
const allTitles = document.getElementsByTagName('h1')

console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4

for (let i = 0; i < allTitles.length; i++) {
  console.log(allTitles[i]) // 打印 HTMLCollection 中的每个元素
}

通过类名获取元素 ​

getElementsByClassName() 方法返回一个 HTMLCollection 对象。HTMLCollection 是 HTML 元素的类数组列表。length 属性提供集合的大小。可以循环遍历所有 HTMLCollection 元素。请参见下面的示例

js
//语法
document.getElementsByClassName('classname')
js
const allTitles = document.getElementsByClassName('title')

console.log(allTitles) //HTMLCollections
console.log(allTitles.length) // 4

for (let i = 0; i < allTitles.length; i++) {
  console.log(allTitles[i]) // 打印 HTMLCollection 中的每个元素
}

通过 id 获取元素 ​

getElementsById() 针对单个 HTML 元素。我们传递不带 # 的 id 作为参数。

js
//语法
document.getElementById('id')
js
let firstTitle = document.getElementById('first-title')
console.log(firstTitle) // <h1>First Title</h1>

使用 querySelector 方法获取元素 ​

document.querySelector 方法可以通过标签名、id 或类名选择 HTML 或 HTML 元素。

querySelector：可用于通过标签名、id 或类选择 HTML 元素。如果使用标签名，它只选择第一个元素。

js
let firstTitle = document.querySelector('h1') // 选择第一个可用的 h1 元素
let firstTitle = document.querySelector('#first-title') // 选择 id 为 first-title 的元素
let firstTitle = document.querySelector('.title') // 选择第一个可用的类为 title 的元素

querySelectorAll：可用于通过标签名或类选择 html 元素。它返回一个 nodeList，这是一个支持数组方法的类数组对象。我们可以使用 for 循环 或 forEach 来循环遍历每个 nodeList 元素。

js
const allTitles = document.querySelectorAll('h1') // 选择页面中所有可用的 h1 元素

console.log(allTitles.length) // 4
for (let i = 0; i < allTitles.length; i++) {
  console.log(allTitles[i])
}

allTitles.forEach(title => console.log(title))
const allTitles = document.querySelectorAll('.title') // 使用类选择也是如此

添加属性 ​

属性在 HTML 的开始标签中添加，为元素提供附加信息。常见的 HTML 属性：id、class、src、style、href、disabled、title、alt。让我们为第四个标题添加 id 和 class。

js
const titles = document.querySelectorAll('h1')
titles[3].className = 'title'
titles[3].id = 'fourth-title'

使用 setAttribute 添加属性 ​

setAttribute() 方法设置任何 html 属性。它接受两个参数：属性的类型和属性的名称。 让我们为第四个标题添加 class 和 id 属性。

js
const titles = document.querySelectorAll('h1')
titles[3].setAttribute('class', 'title')
titles[3].setAttribute('id', 'fourth-title')

不使用 setAttribute 添加属性 ​

我们可以使用普通的对象设置方法来设置属性，但这不能适用于所有元素。某些属性是 DOM 对象属性，可以直接设置。例如 id 和 class

js
//设置属性的另一种方法
titles[3].className = 'title'
titles[3].id = 'fourth-title'

使用 classList 添加类 ​

类列表方法是追加附加类的好方法。如果类存在，它不会覆盖原始类，而是为元素添加附加类。

js
//设置属性的另一种方法：追加类，不覆盖
titles[3].classList.add('title', 'header-title')

使用 remove 删除类 ​

与添加类似，我们也可以从元素中删除类。我们可以从元素中删除特定的类。

js
//设置属性的另一种方法：追加类，不覆盖
titles[3].classList.remove('title', 'header-title')

向 HTML 元素添加文本 ​

HTML 是开始标签、结束标签和文本内容的构建块。我们可以使用属性 textContent 或 innerHTML 添加文本内容。

使用 textContent 添加文本内容 ​

textContent 属性用于向 HTML 元素添加文本。

js
const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'

使用 innerHTML 添加文本内容 ​

大多数人对 textContent 和 innerHTML 感到困惑。textContent 用于向 HTML 元素添加文本，但是 innerHTML 可以添加文本或 HTML 元素作为子元素。

文本内容 ​

我们将 textContent HTML 对象属性分配给文本

js
const titles = document.querySelectorAll('h1')
titles[3].textContent = 'Fourth Title'
内部 HTML ​

当我们想要替换或为父元素添加全新的子内容时，我们使用 innerHTML 属性。 我们分配的值将是 HTML 元素的字符串。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JavaScript for Everyone:DOM</title>
  </head>
  <body>
    <div class="wrapper">
        <h1>Asabeneh Yetayeh challenges in 2020</h1>
        <h2>30DaysOfJavaScript Challenge</h2>
        <ul></ul>
    </div>
    <script>
    const lists = `
    <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</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>`
  const ul = document.querySelector('ul')
  ul.innerHTML = lists
    </script>
  </body>
</html>

innerHTML 属性还允许我们删除父元素的所有子元素。我建议使用以下方法而不是使用 removeChild()。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JavaScript for Everyone:DOM</title>
  </head>
  <body>
    <div class="wrapper">
        <h1>Asabeneh Yetayeh challenges in 2020</h1>
        <h2>30DaysOfJavaScript Challenge</h2>
        <ul>
            <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</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>
    </div>
    <script>
  const ul = document.querySelector('ul')
  ul.innerHTML = ''
    </script>
  </body>
</html>

添加样式 ​

添加样式颜色 ​

让我们为标题添加一些样式。如果元素有偶数索引，我们给它绿色，否则红色。

js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
  title.style.fontSize = '24px' // 所有标题都将有 24px 字体大小
  if (i % 2 === 0) {
    title.style.color = 'green'
  } else {
    title.style.color = 'red'
  }
})

添加样式背景颜色 ​

让我们为标题添加一些样式。如果元素有偶数索引，我们给它绿色，否则红色。

js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
  title.style.fontSize = '24px' // 所有标题都将有 24px 字体大小
  if (i % 2 === 0) {
    title.style.backgroundColor = 'green'
  } else {
    title.style.backgroundColor = 'red'
  }
})

添加样式字体大小 ​

让我们为标题添加一些样式。如果元素有偶数索引，我们给它 20px，否则 30px

js
const titles = document.querySelectorAll('h1')
titles.forEach((title, i) => {
  title.style.fontSize = '24px' // 所有标题都将有 24px 字体大小
  if (i % 2 === 0) {
    title.style.fontSize = '20px'
  } else {
    title.style.fontSize = '30px'
  }
})

如你所注意到的，当我们在 JavaScript 中使用 CSS 属性时，它们将是驼峰命名法。以下 CSS 属性从 background-color 变为 backgroundColor，font-size 变为 fontSize，font-family 变为 fontFamily，margin-bottom 变为 marginBottom。

🌕 现在，你充满了超能力，你已经完成了挑战中最重要和最具挑战性的部分，一般来说是 JavaScript。你学会了 DOM，现在你有能力构建和开发应用程序。现在为你的大脑和肌肉做一些练习。

练习 ​

练习：第1级 ​

  1. 创建一个 index.html 文件并放置四个 p 元素如上：使用 document.querySelector(tagname) 和标签名获取第一个段落
  2. 使用 document.querySelector('#id') 和它们的 id 获取每个段落
  3. 使用 document.querySelectorAll(tagname) 和它们的标签名将所有 p 作为 nodeList 获取
  4. 循环遍历 nodeList 并获取每个段落的文本内容
  5. 为第四个段落设置文本内容，Fourth Paragraph
  6. 使用不同的属性设置方法为所有段落设置 id 和 class 属性

练习：第2级 ​

  1. 使用 JavaScript 更改每个段落的样式（例如颜色、背景、边框、字体大小、字体系列）
  2. 选择所有段落并循环遍历每个元素，给第一个和第三个段落绿色，给第二个和第四个段落红色
  3. 为每个段落设置文本内容、id 和 class

练习：第3级 ​

DOM：迷你项目1 ​

  1. 开发以下应用程序，使用以下 HTML 元素开始。你将在启动文件夹中获得相同的代码。仅使用 JavaScript 应用所有样式和功能。

    • 年份颜色每1秒变化一次
    • 日期和时间背景颜色每秒变化一次
    • 已完成的挑战有绿色背景
    • 正在进行的挑战有黄色背景
    • 即将到来的挑战有红色背景
html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JavaScript for Everyone:DOM</title>
  </head>
  <body>
    <div class="wrapper">
        <h1>Asabeneh Yetayeh challenges in 2020</h1>
        <h2>30DaysOfJavaScript Challenge</h2>
        <ul>
            <li>30DaysOfPython Challenge Done</li>
            <li>30DaysOfJavaScript Challenge Ongoing</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>
    </div>
  </body>
</html>

🎉 恭喜！🎉

Copyright © 2025 e2ways.com