我假设您听说过DOM-这就是为什么您在这里,对吗?如果您发现DOM很困难,我可以向您保证,在阅读本文之后,您将对整个DOM操作感到满意。

但是请在开始之前,请允许我与您分享有关如何了解DOM的小故事(这是一个有趣的故事)。

我如何了解DOM

在我的Web开发生涯的几个月中,我仍在学习旧的HTML和CSS。我错误地偶然发现了有关w3schools的DOM课程。他们的第一个例子是一个带灯泡和两个按钮的例子。

按钮之一的onclick将“打开”灯泡,第二按钮的onclick将“关闭”灯泡。我真的被吹走了。

网站上的按钮如何打开灯泡?怎么样!?

我什至t了一下。然后我发现它们只是在更改图像的源属性(src)。我很伤心,但是不管有什么经验使我爱上了DOM。这让我想知道更多。

在本文中,我将带您逐步了解。我保证,如果您坚持到最后,并实践我写的所有内容,那么整个DOM都将不再是您的问题。那你准备好了吗?好吧,Allons-y(走吧!)。

为了使这一点更容易理解,我将所有内容分为以下几节。

  • DOM的定义和基本概念
  • 如何在DOM中选择元素
  • 如何遍历和移动DOM
  • 如何操作DOM中的元素
  • 一般样式
  • DOM中的事件处理

因此,在我逐步引导您完成每个部分时,请喝杯咖啡或您喜欢的任何东西放松身心。

DOM的定义和基本概念

什么是DOM?

DOM代表文档对象模型。它可以简单地理解为浏览器创建的节点树。这些节点中的每个节点都有其自己的属性和方法,可以使用JavaScript对其进行操作。

操纵DOM的能力是JavaScript最独特和有用的能力之一。

下图直观地显示了DOM树的外观。

图片

这里有文档对象。这是DOM的核心/基础。要执行任何形式的DOM操作,您必须首先访问文档对象。

接下来,我们有html根元素,它是文档对象的子元素。

在线的下一个是bodyhead元素,它们是彼此的同级对象以及该html元素的子级。

在head元素下方,您可以同意title元素是head元素的子元素,并且是文本节点的父元素-“我的文本”。

在body元素正下方,我们有两个元素(atag和h1tag),它们是彼此的兄弟姐妹,是body元素的子元素。

最后,href属性和文本节点(“我的链接”)是a标签的子级。文本节点“我的标题”与h1元素的子元素完全相同。

如果您是绝对的初学者,这似乎有点令人困惑,但请相信我-它总是会变得更好(当然,要练习一下)。

如何在DOM中选择元素

为了能够操作DOM中的元素,必须选择该特定元素。幸运的是,我们有4种主要的选择元素的方式。

如何使用getElementById方法选择DOM元素

访问HTML元素的最常见方法是使用元素的ID。

在下面的示例中,该 getElementById() 方法使用id =“ master”查找元素

<p id="master">i love javascript</p>

 <script>
const masterEl = document.getElementById('master')
console.log(masterEl) //<p id="master">i love javascript</p> 
 </script>

ID区分大小写。例如,“ master”和“ Master”是完全不同的ID。

选定元素后,可以向该元素添加样式,操纵其属性以及遍历父元素和子元素。

如何使用getElementsByClassName()方法选择DOM元素

此方法返回具有指定类名的文档中所有元素的集合。

例如,我们下面的HTML页面包含三个带有class =“ master2”的元素,我选择了ID为’btn’的按钮。

如果单击按钮,它将选择所有类名称为“ master2”的元素,并更改第3个元素的innerHTML。

        <p class="master2">i love javascript</p>
        <p class="master2">i love react</p>
        <h1 class="master2">i want a job</h1>

        <button id="btn">click me</button>
 
 <script>
 
 const btn = document.getElementById('btn')
        
        btn.addEventListener('click', function master(){
            var master = document.getElementsByClassName("master2");
            master[2].innerHTML = 'i need a job';
        })

</script>

在单击按钮之前,您将看到以下内容:

单击按钮后,您将看到:

我知道我使用addEventListener()了我尚未解释的内容,但请坚持使用。这绝对是我将在下面向您解释的内容的一部分:)

如何使用getElementsByTagName()方法选择DOM元素

此方法接受标记名称,并按它们在文档中出现的顺序返回指定标记名称的所有元素。

以下代码说明了getElementsByTagName()通过获取p页面上的所有元素并更改第二个元素的内容的语法。

 <p>VsCode</p>
 <p>Atom</p>
 <p>Sublime text</p>
        <button id="btn">click me</button>
       

 <script>

const btn = document.getElementById('btn')
        
        btn.addEventListener('click', function master(){
            let master = document.getElementsByTagName('p');
            let masterEl = master[1].innerHTML = 'Code editors';
            console.log(masterEl) //Code editors
        })

//<p>Atom</p> changes to <p>Code editors</p>
</script>

如何使用CSS选择器选择DOM元素

.querySelector()

这将返回与指定选择器匹配的第一个值。此方法可以接受所有CSS样式选择器,从而可以按标记,类或ID进行选择。

<div id=master>i am a frontend developer</div>

<script>
const master = document.querySelector("#master") 
</script>

上面的方法使用一个参数(它是CSS选择器),并返回与选择器匹配的第一个元素。

.querySelectorAll()

这类似于上面的工作,返回所有匹配元素的节点列表集合。

     <p class="master">React</p>
     <p class="master">Vue</p>
     <p class="master">Angular</p>

<script>
const master = document.querySelectorAll(".master") 
console.log(master[1])  //<p class="master">Vue</p>
</script>

如何选择DOM元素的摘要

当您需要选择DOM元素时,您可以从四个不同的选项中进行选择,通过四种不同的方式来做一件特定的事情(选择一个或多个元素)。

因此,如果您不记得第一个,请使用第二个。而且,如果偶然的话您都不记得您仍然拥有选项3和4。仅仅是我还是JavaScript使我们的生活更轻松?:)

我个人的建议是坚持使用选项1或选项4a(带有ID的queryselector)。从学习HTML的早期开始,您就可能知道元素不应具有相同的ID,即ID是文档中元素的唯一标识符。

考虑到这一点,选择一个具有其ID的元素是“安全的选择”,因为您将不必对不同的元素应用相同的“操作”(除非这就是您想要实现的目标-然后成为我的客人,随时可以使用其他选项)。

如何遍历文档

在这个阶段,您将希望与我达成一致,HTML文档中的所有内容都是一个节点。HTML元素内的文本也是文本节点。

使用HTML DOM,您可以使用我们前面讨论的节点关系(父,子,兄弟等)来导航节点树并访问树中的节点。

可以创建新节点,并且可以修改或删除所有节点。

一点评论

  • 除顶部节点(没有父节点)外,每个节点都只有一个父节点。
  • 一个节点可以有多个子节点。
  • 兄弟姐妹(兄弟姐妹)是具有相同父节点的节点。

在本节中,我们将了解如何获取父元素,元素的同级元素以及元素的子元素。我将使用以下节点属性来实现这些目的:

  • parentNode
  • childrenNodes
  • firstElementChild
  • lastElementChild
  • nextElementSibling
  • previousElementSibling

另外,我将仅在下面使用此HTML页面,向您展示如何使用这些节点属性。从上面的第4节中,我将向您展示如何操作DOM。

这就是本文的目的-了解如何操作DOM。如果您不知道如何操作元素,就知道如何选择元素并遍历DOM并不重要。了解如何添加CSS样式,创建和附加元素,设置innerHTML以及处理事件非常重要。

那是本文的重点,所以请和我在一起。让我们继续。

 <div id="parent">
        <div id="firstchild">i am a first child</div>
        <p id="secondchild">i am the second child</p>
        <h4>i am alive</h4>
        <h1>hello world</h1>
        <p>i am the last child</p>
    </div>  
    
    const parent = document.getElementById('parent').lastElementChild
    console.log(parent) //<p>i am the last child</p>
    
    const parent2 = document.getElementById('parent').children[3]
    console.log(parent2) //<h1>hello world</h1>
    
    const secondchild = document.getElementById('secondchild')
    console.log(secondchild) //<p id="secondchild">i am the second child</p>
    
    console.log(secondchild.parentNode) //<div id="parent">...</div>

    console.log(secondchild.nextElementSibling) //<h4>i am alive</h4>

    console.log(secondchild.previousElementSibling) //<div id="firstchild">i am a first child</div>

如何操作DOM中的元素

在本节中,我们将研究:

  • 如何创建元素
  • 如何设置元素的innerHTML /文本内容
  • 如何追加元素
  • 如何在一个元素之前插入一个元素
  • 如何替换子元素
  • 如何删除子元素

    <div id="parent">
        <div id="firstchild">i am a first child</div>
        <p id="secondchild">i am the second child</p>
        <h4>i am alive</h4>
        <h1>hello world</h1>
        <p>i am the last child</p>
    </div>  

如何创建元素

上面的代码显示了一个具有5个子元素的父元素。假设我们要div使用JavaScript添加另一个标签。我们肯定必须使用该createElement()方法创建一个新元素,如下所示:

 const createEl = document.createElement('div')
 console.log(createEl) //<div></div>

如何设置innerHTML

我们已经成功创建了一个div标签,但是当前它没有任何文本节点。我们将使用该.innerHTML()属性添加其文本节点。

 const innerhtml = createEl.innerHTML = 'i am a frontend developer'
 console.log(createEl) //<div>​i am a frontend developer​</div>​

如何附加元素

到目前为止,我们已经完成的工作是创建一个元素并插入其文本节点。但是这个创建的元素还不是DOM树的一部分。

现在,在本节中,我将向您展示如何将其附加到该HTML页面。基于以上代码:

 const createEl = document.createElement('div')

 const innerhtml = createEl.innerHTML = 'i am a frontend developer'

 const parentEl = document.getElementById('parent')

 parentEl.appendChild(createEl)

 console.log(parentEl) 

如何在另一个元素之前插入一个元素

如果您从上面的控制台日志图像中注意到,则附加的子div标记会自动添加到底部。

如果出于某种原因想要将其附加到您选择的任何位置怎么办?可能在第一个元素之前或在第四个元素之前。我在这里告诉你这是很有可能的。在下面的代码中,我们将其添加到当前第一个元素之前。

我们将使用insertBefore()JavaScript方法,该方法接受两个参数,newNode和的existingNode顺序为=> document.insertBefore(newNode, existingNode)

 const parentEl = document.getElementById('parent')
 const firstchildEl = document.getElementById('firstchild')
 
 const createEl = document.createElement('div')

 const innerhtml = createEl.innerHTML = 'i am a frontend developer'

 parentEl.insertBefore(createEl, firstchildEl)
   console.log(parentEl)

如何替换子元素

我们将使用replaceChild()JavaScript方法,该方法接受两个参数以新创建的元素替换第一个元素。它按此顺序=>工作document.replaceChild(newNode, existingNode)

 const firstchildEl = document.getElementById('firstchild')
 const parentEl = document.getElementById('parent')

 const createEl = document.createElement('div')
 const innerhtml = createEl.innerHTML = 'i am a frontend developer'

 parentEl.replaceChild(createEl, firstchildEl)

   console.log(parentEl)

如何删除子元素

我们将使用removeChild()JavaScript方法,该方法仅接受一个参数(),即您要删除的元素,在这种情况下,这是我们最初的第一个元素。它按此顺序工作=>document.removeChild(element)

const firstchildEl = document.getElementById('firstchild')
 const parentEl = document.getElementById('parent')
 
 parentEl.removeChild(firstchildEl)

 console.log(parentEl)

如何使用CSS添加样式

从前面的示例中,我们看到了如何创建元素并将其附加到指定的父元素。

因此,要使元素具有样式,我们必须向其添加CSS类。在这种情况下,我们将使用JavaScript来实现。

我不仅要向您展示如何添加课程。我还将向您展示如何删除课程,以及如何在课程之间切换。

不用担心,这并不困难。我在这里引导您完成所有步骤。

如何添加CSS类

当前,我们有一个普通的HTML按钮,其ID为“ master”,但未应用任何样式。参见下图:

我们要做的第一件事是为按钮创建CSS样式。

接下来,在我们的JavaScript中,我将向按钮添加一个事件侦听器,以便当您单击它时,JavaScript会自动添加带有“ button”类的CSS样式。

 <style>
        body{
            background-color: hotpink;
            display: flex;
            align-items: center;
        }

        .button{
            background-color: blueviolet;
            width: 200px;
            border: none;
            font-size: 2rem;
            padding: 0.5rem;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    

  <button id="master">Click me</button>
  
    
const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

 function addFunction(){
     buttonEl.classList.add('button')
  }

单击按钮后,您将看到以下内容。美丽吧?

如何删除课程

仍然使用上面相同的示例,我们将删除CSS样式,这一次是classList.remove()在JavaScript中进行的。您可能已经猜到会发生什么,对吗?

确实,该按钮将返回其默认状态。


const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)

function addFunction(){
    buttonEl.classList.remove('button')
 }
 

如何切换课程

假设您不想完全删除CSS样式。您需要一种在样式按钮和未样式按钮之间切换的方法。

classList.toggle()JavaScript方法为您提供了这种能力。

classList.toggle()方法通常在大多数社交媒体平台(如Twitter)中使用。它使您可以喜欢带有按钮的帖子,并且可以随时随地使用相同的按钮。

因此,JavaScript检查我们的按钮是否具有CSS类。

如果它具有班级,并且您单击按钮,它将删除它。如果没有该类,则单击按钮,它将添加它。


const buttonEl = document.getElementById('master')
buttonEl.addEventListener('click', addFunction)


function addFunction(){
    buttonEl.classList.toggle('button')
 }
 

事件处理

什么是HTML事件?

HTML事件是发生在HTML元素上的“事物”,例如单击按钮,在文本区域中输入等等。当发生上述事件时,您可以编写JavaScript代码,我们称为将执行的事件处理程序。

这些事件处理程序是JavaScript函数。因此,当元素上发生事件时,将执行处理函数。

事件监听器

到目前为止,基本上在以上每个示例中,我们都一直使用事件侦听器。这应该显示事件侦听器在处理DOM中的重要性。

要将事件侦听器添加到元素或任何DOM对象,我们需要一个方法addEventListener()。此方法优于旧方法,在旧方法中,我们将要处理的事件包含在html标记中。

有了这个,JavaScript与html标记分离了,这使它更干净,更易读。

我喜欢单独的JS,单独的CSS等的想法,因此,如果您像我一样,希望使用此事件侦听器。

事件侦听器接受3个参数。

  • 第一个是事件的类型,例如“点击”等。
  • 第二个参数是要执行的功能。
  • 第三个参数是一个布尔值,指定是使用事件冒泡还是使用事件捕获。此参数是可选的。

您可以将多个事件处理程序添加到一个元素。

您还可以将多个相同类型的事件处理程序添加到一个元素,例如两个“ click”事件。

结论

知道如何使用JavaScript操作DOM非常重要。这不是您可以决定不知道的事情。

如果您了解我上面给出的示例/说明,则可以构建一些JS项目。如果您想成为一名优秀的开发人员,我不能过分强调构建项目的重要性。

很难建立项目?单击下面的链接中的第二个和第三个链接。