什么是DOM及DOM操作?使用教程_dom基础教程

什么是 DOM ?DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。DOM 分层节点DOM的分层节点一般被称作是DOM树,树中的

什么是DOM及DOM操作?使用教程

什么是 DOM ?

DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。

什么是DOM及DOM操作?使用教程_dom基础教程

W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM 分层节点

DOM的分层节点一般被称作是DOM树,树中的所有节点都可以通过脚本语言例如JS进行访问,所有HTMlL元素节点都可以被创建、添加或者删除。

在DOM分层节点中,页面就是用分层节点图表示的。

  • 整个文档是一个文档节点,就想是树的根一样。
  • 每个HTML元素都是元素节点。
  • HTML元素内的文本就是文本节点。
  • 每个HTML属性时属性节点。

当咱们访问一个web页面时,浏览器会解析每个HTML元素,创建了HTML文档的虚拟结构,并将其保存在内存中。接着,HTML页面被转换成树状结构,每个HTML元素成为一个叶子节点,连接到父分支。
考虑以下 Html 结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html>

在这个结构的顶部有一个document,也称为根元素,它包含另一个元素:html。 html元素包含一个head,而 head 又有一个title。 然后body 包含一个h1。 每个HTML元素都由特定类型(也称为接口)表示,并且可能包含文本或其他嵌套元素:

document (HTMLDocument)
  |
  | --> html (HTMLHtmlElement)
          |  
          | --> head (HtmlHeadElement)
          |       |
          |       | --> title (HtmlTitleElement)
          |                | --> text: "A super simple title!"
          |
          | --> body (HtmlBodyElement)
          |       |
          |       | --> h1 (HTMLHeadingElement)
          |              | --> text: "A super simple web page!"

每个HTML元素都来自Element,但其中很大一部分都是专用的。 咱们可以检查原型以查找元素所属的“种类”。 例如,h1元素是HTMLHeadingElement:

document.querySelector('h1').__proto__

// Output: HTMLHeadingElement

而HTMLHeadingElement则是HTMLElement的后代:

document.querySelector('h1').__proto__.__proto__

// Output: HTMLElement

此时(特别是初学者)可能会对document和window之间的区别产生一些混淆。接下来看看它们有何不同!

document 和 window 之间的区别

简单来说,document是window的一个对象属性。window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。所有的全局函数和对象都属于 window 对象的属性和方法。

区别:

  1. window 指窗体。document指页面。document是window的一个子对象。
  2. 用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象。

document接口有许多实用方法,比如querySelector(),它是用于查找给定页面内HTML元素的方法:

document.querySelector('h1');

window表示当前的浏览器,下面代码与上面等价:

window.document.querySelector('h1');

当然,更常见的是用第一种方式。

window是一个全局对象,可以从浏览器中运行的任何JS代码直接访问。 window暴露了很多属性和方法,如:

window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delay execution
window.fetch(someUrl); // make XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual user agent
window.document; // The current page

因为这些属性和方法也是全局的,所以也可以这样访问它们

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delay execution
fetch(someUrl); // make XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual user agent
document;// The current page

其中有些咱们都已经很熟悉了,如setTimeout() 的方法。 例如,当咱们想要得知当前用户的浏览器语言时,window.navigator就非常有用:

if (window.navigator) {
  var lang = window.navigator.language;
  if (lang === "en-US") {
    // show something
  }

  if (lang === "it-IT") {
    // show something else
  }
}

DOM 常用方法

获取节点

// 通过id号来获取元素,返回一个元素对象
document.getElementById(idName) 
      
// 通过name属性获取id号,返回元素对象数组 
document.getElementsByName(name)  
   
// 通过class来获取元素,返回元素对象数组
document.getElementsByClassName(className)   

// 通过标签名获取元素,返回元素对象数组
document.getElementsByTagName(tagName)       

获取/设置元素的属性值:


// 括号传入属性名,返回对应属性的属性值
element.getAttribute(attributeName)

// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)

创建节点Node

// 创建一个html元素,这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点;
document.createTextNode(String);

// 创建一个属性节点,这里以创建class属性为例
document.createAttribute("class");

增添节点

// 往element内部最后面添加一个节点,参数是节点类型
element.appendChild(Node);

// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode); 

删除节点

//删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
element.removeChild(Node)

DOM常用属性

获取当前元素的父节点

// 返回当前元素的父节点对象
element.parentNode

获取当前元素的子节点

// 返回当前元素所有子元素节点对象,只返回HTML节点
element.chlidren

// 返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
element.chilidNodes

// 返回当前元素的第一个子节点对象
element.firstChild

// 返回当前元素的最后一个子节点对象
element.lastChild

获取当前元素的同级元素

// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling

// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling

获取当前元素的文本

// 返回元素的所有文本,包括html代码
element.innerHTML

// 返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
element.innerText

获取当前节点的节点类型

// 返回节点的类型,数字形式(1-12)
// 常见几个1:元素节点,2:属性节点,3:文本节点。
node.nodeType   

设置样式

// 设置元素的样式时使用style
element.style.color=“#eea”;

DOM 操作

DOM中的每个HTML元素也是一个节点,可以像这样查找节点:

document.querySelector('h1').nodeType;

上面会返回1,它是Element类型的节点的标识符,还可以检查节点名称:

document.querySelector('h1').nodeName;

"H1"

上面的示例返回大写的节点名。但是需要理解的最重要的概念是,咱们主要使用DOM中的两种类型的节点:

  • 元素节点
  • 文本节点

创建元素节点,可以通过 createElement方法:

var heading = document.createElement('h1');

创建文本节点,可能通过 createTextNode 方法:

var text = document.createTextNode('Hello world');

接着将两个节点组合在一起,然后添加到 body 上:

var heading = document.createElement('h1');
var text = document.createTextNoe('Hello world');
heading.appendChild(text);
document.body.appendChild(heading)

在学习Dom操作时候,这些方法需要牢记并熟练使用的。

目前像咱们用这种方式创建和操作元素,是属于命令式DOM操作。现代前端库通过支持声明性方法来解决这个问题,如 JQuery,咱们可以声明需要什么HTML元素,其它就由库来完成。

DOM 操作和 jQuery

大部分可能会想,咱们直接使用 JQ 不就行了,为啥还要用如createElement这些原生的方法,多费劲。

请注意jQuery正在渐渐消失。Bootstrap 5将把它从依赖项中删除,还有很多项目也在删除它。这背后有一个合理的原因:原生DOM API提供了大量像JQ这样操作DOM的简便方法,足以替代jQuery一些常用的DOM操作。

如果只是想进行简单的交互和操作,请使用普通的JS。咱们甚至可以创建自己的迷你框架来抽象最常见的操作:创建元素、追加、创建文本。

总结

DOM是浏览器创建并保留在内存中的网页的虚拟副本。创建、修改、删除 HTML 元素,这些属于 “DOM 操作”。在过去即使对于更简单的任务,咱们也要依赖于 jQuery,但今天原生 API 已经互相兼容并且足够成熟足以替代 jQuery 了。

jQuery不会很快消失,但是每个JS开发人员都必须知道如何使用原生API操作DOM。这样做有很多原因,额外的库增加了JS应用程序的加载时间和大小,更不用说DOM操作在技术面试也经常出现。

操作 DOM 最常用的方法是 document.createElement() 用于创建新的 HTML 元素,document.createTextNode() 用于在 DOM 内创建文本节点。需要注意的是 .appendChild() 用于将新的 HTML 元素或文本节点附加到现有元素。

虽然很好的了解本机 API 是很好的,但是现代前端库也提供了无可置疑的好处。尽管用“原生” JS 去构建大型JS 程序确实是可行的,但有时 Angular、React、Vue可以提供很多帮助。仅使用 JavaScript 来处理更简单的原型和中小型应用也是明智之举。

原文:https://www.valentinog.com/

海计划公众号
(0)
上一篇 2020/03/20 23:49
下一篇 2020/03/20 23:49

您可能感兴趣的内容

  • WeightMirror基础入门_在线瘦身和瘦脸修图工具

    WeightMirror基础入门 官方网址:http://www0.modiface.com/weightmirror/li 简介描述:在线瘦身和瘦脸修图工具 Weight Mir…

    2020/03/10
  • 初学 Babel 工作原理基础教程_Babel指南攻略

    前言Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。已经9102了,我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel。当然,仅仅是 Babel 是不够的,还需要 polyfill 等等等等,这里就先不说了。What:什么是 BabelBabel

    Web前端 2020/03/29
  • Js深浅拷贝原理指南教程_原理基础指南

    如果拷贝的值是基本数据类型,拷贝的是基本类型的值。如果是引用类型拷贝的是内存地址。浅拷贝只解决了第一层的问题,拷贝第一层的基本类型值,以及第一层的引用类型地址。也就是说:只能保证第一层数据为基本数据类型时,不会随原数据改变。原数据中包含子对象时,随原数据变化。1.1 浅拷贝的使用场景1. Object.assign()该方法用于将所有可枚举属性的值从一个或多

    2020/03/24
  • 看了一堆简历后,我发现了什么秘密?菜鸟指南_简历小白常识

    自从修改简历的服务推出之后,每周都有几个人找我修改简历,慢慢的,这类简历看的多了,我发现了一些共性问题,给大家分享一下。(以前看的简历都是经过公司HR筛过一遍的)项目个数问题有些同学项目只有一个,也有同学项目有五个之多,但是项目用到的技术雷同。一般来说,简历中的项目最少2个,最多4个,3个项目最佳,并且挑选最能展现你技术能力的项目写,而不是所有项目都写。项目

    2020/03/30
  • 什么是ESLint?小白基础_eslint入门教程

    什么是ESLint?小白基础 在我们学习ESLint之前,我们先来了解一下什么是ESLint ? 什么是ESLint? 官网上告诉我们,ESLint 是一个用来识别 ECMAScr…

    2020/03/19
  • 快应用之开发体验纪要指南教程_技巧使用攻略

    何谓「快应用」呢?它是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验,无需安装、即点即用; 覆盖 10 亿设备,与操作系统深度集成,探索新型应用场景。快应用特点下面列出些

    2020/04/03
  • Promise 的then 里发生了什么菜鸟知识_promise使用帮助

    Promise 大家都知道怎么用, 但是对于内部的原理很多人都不是很清楚来看一个面试题: Promise的then 是怎么实现的首先来分析一下thenthen是属于实例上的方法参数有2个,分别为onFulfilled, onRejected,并且都是可选的可以实现链式调用then执行要执行Promise onFulfilled 或者 onRejected 方

    2020/03/31
  • jsAnim小白知识_一个简单而实用的js动画框架

    jsAnim入门基础知识 官方网址:http://hcy2367.github.io/jsAnim/ GitHub:https://github.com/hcy2367/jsAni…

    2020/03/06
  • 酷站代码小白教程_网页特效,js特效,jQuery特效,js代码大全

    酷站代码小白教程 官方网址:http://www.5icool.org/ 简介描述:网页特效,js特效,jQuery特效,js代码大全 精选网站特效源码,提供jQuery特效、js…

    2020/03/06
  • 如何正确学习web前端流程以及如何找工作基础入门_工作使用说明

    如何正确学习web前端流程以及如何找工作基础入门 我给你解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash…

    2020/03/20
  • topcoat零基础入门_一款为简洁高速Web应用提供CSS开发的工具

    topcoat小白教程 官方网址:http://topcoat.io GitHub:https://github.com/topcoat/topcoat 简介描述:一款为简洁高速W…

    2020/03/06
  • web Socket和Socket.IO框架指南攻略_Socket入门基础知识

    HTTP无法轻松实现实时应用:● HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如Ajax)。但是,反过来却是不可能的:服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端

    2020/03/30
  • css中border-sizing属性详解和应用入门指南_盒子小白基础

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。1. 属性讲解content-box默认值,也是css2.1中的盒子模型。在计算width和height时候,不计算border、pad

    2020/04/05
  • X3D:现代 Web 的声明式 3D 技术零基础入门_3D入门基础知识

    现代 Web 技术使开发人员能够创建干净而视觉丰富的用户体验,这些体验被所有主流浏览器作为标准进行广泛支持。那么,如何为 Web 编写基于标准的可视化程序呢?对 3D 图形的支持到底又有哪些呢?让我们首先回顾 HTML 标准中支持的两种主要方法:SVG 和 Canvas。SVG:可伸缩的矢量图形SVG本身是基于 XML 的一种独立的数据格式,用于声明式的 2

    2020/03/24
  • css去掉button点击后的蓝框入门指南_button小白攻略

    css控制Button 按钮的点击时候出现蓝色边框的问题,添加css属性,这样在点击安按钮的时候就不会有蓝色边框了。解决办法: button{outline:none;
    }但是button在chrome浏览器下被点击时也会出现边框,即使当时在button上添加{outline:none;}也无法解决问题。那么谷歌浏览器中button按钮的边框如何去除呢?解

    2020/03/29
  • 探究 Go 语言 defer 语句的三种机制菜鸟教程下载_go入门基础教程

    探究 Go 语言 defer 语句的三种机制菜鸟教程下载 Golang 的 1.13 版本 与 1.14 版本对 defer 进行了两次优化,使得 defer 的性能开销在大部分场…

    2020/03/19