JavaScript基础之 DOM简介

Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是 DOM 以及如何用 Javascript 去操作它。本文还可以作为基本 DOM 操作的参考。

什么是 DOM?

基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型(DOM)。它使 Javascript 能够访问和操作页面的元素和样式。该模型构建在基于对象的树结构中,并定义:

  • HTML 元素作为对象
  • HTML 元素的属性和事件
  • 访问HTML元素的方法

1.png
HTML DOM模型

元素的位置称为节点。不仅元素获得节点,而且元素和文本的属性也有属于它们自己的节点(属性节点和文本节点)。

DOM 文档

DOM 文档是网页中所有其他对象的所有者。这意味着如果你想访问网页上的任何对象,必须从这里开始。它还包含许多重要的属性和方法,使我们能够访问和修改自己的页面。

查找 HTML 元素

现在我们了解了 DOM 文档是什么,接下来我们可以开始获取第一个 HTML 元素了。 Javascript DOM 有许多不同的方法可以用,不过这些最常见:

按 ID 获取元素

getElementById() 方法用于通过其 id 获取单个元素。我们来看一个例子:

var title = document.getElementById(‘header-title’);

在这里,我们得到 id 为 header-title 的元素,并将其保存到变量中。

按类名获取元素

还可以用 getElementsByClassName() 方法获取多个对象,该方法返回一个元素数组。

var items = document.getElementsByClassName(‘list-items’);

这里我们得到类 list-items 的所有项目,并将它们保存到变量中。

按标签名称获取元素

还可以用 getElementsByTagName() 方法按标记名称获取元素。

var listItems = document.getElementsByTagName(‘li’);

这里我们获取 HTML 文档中所有得 li 元素并将它们保存到变量中。

Queryselector

querySelector() 方法返回与指定的 CSS选择器匹配的第一个元素。这意味着你可以通过id、class、tag和所有其他有效的 CSS 选择器获取元素。在这里我列出了一些最常用的选项。

按 id 获取:

var header = document.querySelector(‘#header’)

按 class 获取:

var items = document.querySelector(‘.list-items’)

按标签获取:

var headings = document.querySelector(‘h1’);

获取更具体的元素:

我们还可以使用 CSS Selectors 获得更多的特定元素。

document.querySelector(“h1.heading”);

在这个例子中,我们同时搜索标记和类,并返回传递给 CSS Selector 的第一个元素。

Queryselectorall

querySelectorAll() 方法与 querySelector() 完全相同,只是它返回符合 CSS Selector 的所有元素。

var heading = document.querySelectorAll(‘h1.heading’);

在这个例子中,我们得到所有属于 heading 类的 h1 标签,并将它们存储在一个数组中。

更改 HTML 元素

HTML DOM 允许我们通过更改其属性来对 HTML 元素的内容和样式进行修改。

更改HTML

innerHTML 属性可用于修改 HTML 元素的内容。

document.getElementById(“#header”).innerHTML = “Hello World!”;

在这个例子中,我们得到 id 为 header 的元素,并把其内容设置为“Hello World!”。

InnerHTML 还可以把标签放入另一个标签中。

document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

在这里将 h1 标记放入所有已存在的 div 中。

更改属性的值

还可以用 DOM 更改属性的值。

document.getElementsByTag(“img”).src = “test.jpg”;

在这个例子中,我们把所有 <img/> 标签的 src 改为 test.jpg

改变样式

要更改 HTML 元素的样式,需要更改元素的样式属性。以下是更改样式的示例语法:

document.getElementById(id).style.property = new style

接下来看一个例子,我们获取一个元素并将底部边框改为纯黑线:

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

CSS 属性需要用 camelcase 而不是普通的 css 属性名来编写。在这个例子中,我们用 borderBottom 而不是 border-bottom

添加和删除元素

现在我们来看看如何添加新元素和删除现有元素。

添加元素

var div = document.createElement(‘div’);

在这里我们用了 createElement() 方法创建一个 div 元素,该方法将标记名作为参数并将其保存到变量中。之后只需要给它一些内容,然后将其插入到 DOM 文档中。

var content = document.createTextNode("Hello World!"); 
div.appendChild(newContent);document.body.insertBefore(div, currentDiv);

这里用了 createTextNode() 方法创建内容,该方法用字符串作参数,然后在文档中已经存在的 div 之前插入新的 div 元素。

删除元素

var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);

本例中我们得到一个元素并使用 removeChild() 方法将其删除。

替换元素

现在让我们来看看怎样替换一个项目。

var div = document.querySelector('#div');var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"div.parentNode.replaceChild(newDiv, div);

这里我们使用 replaceChild() 方法替换元素。第一个参数是新元素,第二个参数是要替换的元素。

直接写入HTML输出流

还可以使用 write() 方法将 HTML 表达式和 JavaScript 直接写入 HTML 输出流。

document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);

我们也可以把像日期对象这样的参数传给 JavaScript 表达式。

document.write(Date());

write() 方法还可以使用多个参数,这些参数会按其出现的顺序附加到文档中。

事件处理

HTML DOM 允许 Javascript 对 HTML 事件做出反应。下面列出了一些比较重要的事件:

  • 鼠标点击
  • 页面加载
  • 鼠标移动
  • 输入字段更改

分配事件

可以用标记上的属性直接在 HTML 代码中定义事件。以下是 onclick 事件的例子:

<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>

在此例中,单击按钮时,<h1/> 的文本将被改为 “Hello!”。

还可以在触发事件时调用函数,如下一个例子所示。

<h1 onclick=”changeText(this)”>Click me!</h1>

这里我们在单击按钮时调用 changeText() 方法,并将该元素作为属性传递。

还可以用 Javascript 代码为多个元素分配相同的事件。

document.getElementById(“btn”).onclick = changeText();

指定事件监听器

接下来看看怎样为 HTML 元素分配事件监听器。

document.getElementById(“btn”)addEventListener('click', runEvent);

这里我们刚刚指定了一个 click 事件,在单击 btn 元素时调用 runEvent 方法。

当然还可以把多个事件指定给单个元素:

document.getElementById(“btn”)addEventListener('mouseover', runEvent);

节点关系

DOM Document 中的节点之间具有层次关系。这意味着节点的结构类似于树。我们用 parent,sibling 和 child 等术语来描述节点之间的关系。

顶级节点称为根节点,是唯一一个没有父节点的节点。普通 HTML 文档中的根是 <html/> 标记,因为它没有父标记,并且是文档的顶部标记。

在节点之间导航

可以用以下属性在节点之间导航:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling

下面是得到 h1 的父元素的例子。

var parent = document.getElementById(“heading”).parentNode

总结

望本文能帮助你理解 Javascript DOM 以及如何用它来操作页面上的元素。

如果你觉得本文有用,请推荐给你的朋友和他们分享。如果你有什么问题或反馈,请在下面的评论中告诉我。

原文地址:https://www.freecodecamp.org/news/an-introduction-to-the-javascript-dom-512463dd62ec/

Image placeholder
前端答疑
未设置
  73人点赞

没有讨论,发表一下自己的看法吧

推荐文章
IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

如何部署多云环境下的IT基础架构?

在多云环境下,企业IT基础架构如何构建,是很多企业都在关心的话题。那么,到底如何去部署多云环境才算成功?有哪些关键要素?众所周知,云带来的好处是,让企业IT有了更多选择,我们可以选择AWS,可以选择谷

软件定义IT基础架构,如何看待深信服的产品战略布局?

在很多人的潜意识里,深信服是一家令人尊敬的企业,技术支撑能力强,产品种类多,功能全面,后劲足,是少数能和华为、新华三同台竞技的企业之一。但有时候,深信服也会被这些优势所累,比如经常会被问道:你们和华为

软件定义一切,企业数字化背景下的新一代IT基础架构

 在数字经济飞速发展的背景下,企业数字化转型已经成为目标共识,企业需要建立更敏捷、智能、安全和可控的数字化转型平台,而云为这一切提供了便利条件。  软件定义作为云的一项重要技术,这几年的也变得越发火热

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

JavaScript的DOM应用笔记

获取a标签:document.links获取img标签:document.images获取form标签:document.forms

JavaScript的DOM应用笔记

通过id获取:document.getElementById()写入HTML:innerHTML()内部outerHTML()外部

JavaScript的DOM应用笔记

操作元素属性:element.attribute=newvalueelement.setAttribute(attribute,value)element.getAttribute(attribute

JavaScript的DOM应用笔记

通过id或标签名获取元素对象:getElementById(‘id’)getElementsByTagName(‘标签名’)getElementsByName(‘name’)getElementByC

JavaScript的DOM应用笔记

这里的修改className属性,因为长度会动态改变,所以需要将修改的下标设为0,

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性