为初学者解释的DOM –文档对象模型的工作方式

金斯利·乌巴(Kingsley Ubah)

当我刚开始做Web开发人员时,在业界经常有人使用“ DOM”一词。每个JavaScript教程都提到了它,但是我不知道它是什么意思。

快进了两年,现在我知道了全部内容,我将以简单明了的英语来解释文档对象模型

什么是DOM?

想象一下:您已经打开了电视。您不喜欢正在播放的节目,并且想要更改它。您还想增加其音量。

为此,必须有一种与电视互动的方法。那你用来做什么呢?

遥远的

遥控器充当桥接器,使您可以与电视进行交互。

您可以通过遥控器激活电视并使其处于动态状态。并且以同样的方式,JavaScript通过DOM使HTML页面处于活动和动态状态。

就像电视不能自己做什么一样,JavaScript除了允许您执行一些计算或使用基本字符串之外,所做的不只是其他事情。

因此,要使HTML文档更具交互性和动态性,脚本‌‌需要能够访问文档的内容,并且还需要知道用户何时与之交互。

它通过使用称为文档对象模型或DOM的接口中的属性,方法和事件与浏览器进行通信来实现此目的。

例如,假设您希望按钮在单击时改变颜色,或者当鼠标悬停在按钮上时滑动图像。首先,您需要从JavaScript中引用这些元素。

DOM是网页的树状表示形式,已加载到浏览器中。

它使用一系列对象表示网页。主要对象是文档对象,文档对象又包含其他对象,这些对象也包含自己的对象,依此类推。

文档对象

这是DOM中最上面的对象。它具有一些属性方法,您可以使用这些属性方法使用称为点表示法的规则来获取有关文档的信息。

文档对象模型树
文档树。来源https://w3.org

在文档之后,放置一个点,后跟一个属性或方法。

让我们看一个简单的演示,演示脚本如何通过DOM访问HTML文档的内容:

<h1>Login to your account</h1>‌‌
<form name=”LoginFrm” action=”login.php” method=”post”>‌‌Username 
    <input type=”text” name=”txtUsername” size=”15”/> <br/>‌‌Password 
    <input type=”password” name=”numPassword” size=”15”/> <br/>‌‌
    <input type=”submit” value=”Log In” />‌‌
</form>‌‌
<p> New user? <a href=”register.php”> Register here</a> 
<a href=”lostPassword.php”> Retrieve password </a> 
</p>
var username = document.LoginFrm.txtUsername.value //Gets the username input 

好的。这就是HTML的登录表单。您可以使用DOM API提供的一组属性和方法来访问JavaScript中的所有这些元素。但是那些方法是什么?

除了代码片段中包含的属性和方法外,让我们看一下其他一些流行的方法:

querySelectorAll()方法

您使用此方法从DOM中访问与一个或多个CSS选择器匹配的一个或多个元素:

<div> first div </div>
<p> first paragraph </p>
<div> second div </p>
<p> second paragraph </p>
<div> another div </div>
var paragraphs = document.querySelectorAll( 'p' );
paragraphs.forEach(paragraph => paragraph.display = 'none')

createElement()方法

您可以使用以下方法创建指定的元素并将其插入DOM:

<div>first div</div>
<p> first paragraph</p> 
<div>second div</div>
<p>second paragraph</p> 
<div>another div</div>
var thirdParagraph = document.createElement('p');

getElementById()方法

您可以使用此方法通过其唯一的id属性从文档中获取元素:

<div id='first'> first div </div> 
<p> first paragraph</p>
<div>second div</div>
<p> second paragraph</p>
<div>another div</div> 
var firstDiv = getElementById("first")

getElementsByTagname()方法

您可以使用此方法通过其HTML标签名称访问一个或多个元素:

<div> first div </div> 
<p> first paragraph</p> 
<div> second div</div> 
<p>second paragraph</p> 
<div>another div</div>
divs = document.getElementByTagname("div");

appendChild()元素

您可以使用此元素通过其HTML标记名称访问一个或多个元素。

它将元素作为最后一个子元素添加到调用此方法的HTML元素中。

要插入的子元素可以是新创建的元素,也可以是已经存在的元素。如果已经存在,它将从其先前位置移至最后一个孩子的位置。

<div
     <h2>Mangoes</h1>
</div>
var p = document.createElement( 'p' );
var h2 = document.querySelector( 'h2' );
var div = document.querySelector( 'div' );
h1.textContent = 'Mangoes are great...'
div.appendChild('p');

innerHTML属性

您可以使用此属性访问元素的文本内容。

addEventListener()属性

此属性将事件侦听器附加到您的元素。

它需要一个回调,该回调将在触发该事件时运行。

<button>Click to submit</button>‌‌
var btn = document.querySelector( 'button' );‌‌
btn.addEventListener( 'click' ,foo);‌‌
function foo() { alert( 'submitted!' ); 
  				btn.innerHTML = '';
          }

replaceChild()属性

此属性用另一个新的或现有的子元素替换一个子元素。如果已经存在,它将从其先前位置移至最后一个孩子的位置。

<div>‌‌
    <h1>Mangoes‌</h1></div>
var h2 = document.createElement( 'h2' );‌‌
var h1 = document.querySelector( 'h1' );‌‌
var div = document.querySelector( 'div' );‌‌
h2.textContent = 'Apple';‌‌
div.insertBefore(h1, h2);

setAttribute()方法

您可以使用此方法设置或更改元素属性的值。

假设我们有一个属性“ id”,其中包含值“ favourite”。‌‌但是我们想将该值更改为“ worst”。这是使用代码的方法:

<div>‌‌
    <h1 id='favourite'>Mangoes‌‌</h1>
</div>
var h1 = document.querySelector( 'h1' );
h1.setAttribute(div, 'worst');

节点方法

HTML页面中的每个元素都称为节点。

您可以通过将以下属性与节点对象一起使用来访问任何元素:

  • node.childNodes –访问所选父节点的子节点‌‌
  • node.firstChild –访问所选父母的第一个孩子‌‌
  • node.lastChild –访问所选父级的最后一个子级。
  • node.parentNode –访问所选子节点的父节点。
  • node.nextSibling –访问所选元素的下一个连续元素(同级)。
  • node.previousSibling –访问所选元素的上一个元素(同级)
<ul id-“list”>‌‌
    <li><a href= ”about.html”‌‌class = ”list_one”> About‌‌</a></li>‌‌
    <li><a href= ”policy.html”> Policy‌‌</a></ li>‌‌
    <li><a href= ”map.html”> Map‌‌</a></ li>‌‌
    <li><a href= ”Refund.html”> Refund‌‌</a></li>‌‌
</ul>
var list = document.getElementsById( “site-list” )‌‌
var firstItem = list‌‌.childNodes[0].childNodes[0];

概括

DOM是构成网页的所有元素的自顶向下表示。它是脚本与HTML交互的接口。

您可以使用许多属性和方法来获取有关DOM的信息并进行操作。

 

点击阅读原文

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/5183.html

发表评论

登录后才能评论