翻译者：后端小光
为的是确保的时效性，责任编辑选用直译而非直译。
文档主要如是说文件格式第一类数学模型(DOM),介绍甚么是DOM操作方式，和怎样采用砶 DOM API 与 JS 中的 Web 网页进行可视化。
甚么是 DOM ?
DOM(文件格式第一类数学模型)是特别针对于xml但扩充用作HTML的插件程式设计USB，定义了出访和操作方式HTML的文件格式的国际标准。
W3C文件格式第一类数学模型是中立在网络平台和词汇间的USB，它容许流程和
DOM 多层结点
DOM的多层结点通常称作是DOM树，树中的大部份结点都能透过JavaScript比如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>我他们是一位专门从事了十多年合作开发的web后端老合作开发人员，目前请辞在做他们的web后端商业机构订制专业课程，今年初我花了两个月重新整理了这份最适宜2019年自学的web后端自学蔬果，各式各样架构都有重新整理，赠送给
在这个内部结构的顶部有两个document，也称为根原素，它包含另两个原素：html。html原素包含两个head，而 head 又有两个title。然后body 包含两个h1。每一HTML原素都由特定类型（也称为USB）表示，并且可能包含文档或其他嵌套原素：
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 第一类的特性和方法。
区别:
window 指窗体。document指网页。document是window的两个子第一类。用户不能改变 document.location(因为这是当前显示文件格式的位置)。但,能改变window.location (用其它文件格式取代当前文件格式)window.location本身也是两个第一类,而document.location不是第一类。documentUSB有许多实用方法，比如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 常用方法
值：// 括号传入特性名，返回对应特性的特性值 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常用特性
// 返回当前原素多有子结点，包括文档，HTML，特性结点。（回车也会当做两个结点） element.chilidNodes // 返回当前原素的第两个子结点第一类 elem的文档// 返回原素的大部份文档，包括html代码 element.innerHTML // 返回当前原素的自身及子代大部份文档值，只是文档内容，不包括html代码 elemen 设置样式// 设置原素的样式时采用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/blog/html-table/
