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

DOM 分层节点
DOM的分层节点一般被称作是DOM树，树中的所有节点都可以通过脚本语言例如JS进行访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页面就是用分层节点图表示的。
整个文档是一个文档节点，就想是树的根一样。
每个HTML元素都是元素节点。
HTML元素内的文本就是文本节点。
每个HTML属性时属性节点。
当咱们访问一个web页面时，浏览器会解析每个HTML元素，创建了HTML文档的虚拟结构，并将其保存在内存中。接着，HTML页面被转换成树状结构，每个HTML元素成为一个叶子节点，连接到父分支。

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元素的。
window是一个全局对象，可以从浏览器中运行的任何JS代码直接访问。

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

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

获取当前节点的节点类型
// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType

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

DOM 操作
在学习Dom操作时候，这些方法需要牢记并熟练使用的。
目前像咱们用这种方式创建和操作元素，是属于命令式DOM操作。现代前端库通过支持声明性方法来解决这个问题，如 JQuery,咱们可以声明需要什么HTML元素，其它就由库来完成。

DOM 操作和 jQuery
大部分可能会想，咱们直接使用 JQ 不就行了，为啥还要用如createElement这些原生的方法，多费劲。
大部分可能会想，咱们直接使用 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/

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

DOM 分层节点
DOM的分层节点一般被称作是DOM树，树中的所有节点都可以通过脚本语言例如JS进行访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页面就是用分层节点图表示的。
整个文档是一个文档节点，就想是树的根一样。
每个HTML元素都是元素节点。
HTML元素内的文本就是文本节点。
每个HTML属性时属性节点。
当咱们访问一个web页面时，浏览器会解析每个HTML元素，创建了HTML文档的虚拟结构，并将其保存在内存中。接着，HTML页面被转换成树状结构，每个HTML元素成为一个叶子节点，连接到父分支。

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元素的。
window是一个全局对象，可以从浏览器中运行的任何JS代码直接访问。

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

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

获取当前节点的节点类型
// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType

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

DOM 操作
在学习Dom操作时候，这些方法需要牢记并熟练使用的。
目前像咱们用这种方式创建和操作元素，是属于命令式DOM操作。现代前端库通过支持声明性方法来解决这个问题，如 JQuery,咱们可以声明需要什么HTML元素，其它就由库来完成。

DOM 操作和 jQuery
大部分可能会想，咱们直接使用 JQ 不就行了，为啥还要用如createElement这些原生的方法，多费劲。
大部分可能会想，咱们直接使用 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/