HTML DOM基础知识及value、innerHTML、innerText属性的区别
本文首先介绍HTML DOM基础知识，再介绍JS中value、innerHTML、innerText属性的区别
HTML DOM基础知识
文档对象模型 (DOM) - Web API 接口参考 | MDN
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当浏览器载入 HTML 文档, 它就会成为 Document 对象。HTML DOM 把 HTML 文档呈现为节点树结构。参见下图：
?HTML 文档中的所有内容都是节点：
整个文档（Document）是一个文档节点
每个 HTML 元素（Element）是元素节点
HTML 元素内的文本（Text）是文本节点
每个 HTML 属性（Attribute）是属性节点
注释（Comment）是注释节点
一般地，说DOM操作，可以简单理解成“元素操作”，每一个元素就是一个节点，而每一个节点就是一个对象。因此说，对DOM的元素操作，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。
DOM节点类型较多，不过常见的有3种
（1）元素节点
（2）属性节点
（3）文本节点
?
属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值如下表所示：
| 节点类型 | nodeType值 |
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3? |
在 HTML DOM 中, 元素对象代表着一个 HTML 元素——在 DOM 中，所有 HTML 元素都被定义为对象。
元素对象 的 子节点可以是元素节点，文本节点、属性节点、注释节点。
NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
HTML DOM 方法是您能够（在 HTML 元素上）执行的 动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的 值。
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
作为对象的 HTML 元素，在 DOM 中，所有 HTML 元素都被定义为对象。
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
HTML DOM 方法是您能够（在 HTML 元素上）执行的 动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的 值。
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
JavaScript 能够在事件发生时执行，比如想当用户点击某个 HTML 元素时，可以向 HTML 事件属性添加 JavaScript 代码：οnclick=JavaScript处理程序
JS（JavaScript）通过HTML DOM可以 获取、更改、添加、删除HTML 元素，更改HTML 元素。
DOM元素（Element）获取的几种方法（method）：
★通过ID
getElementByld("id名")
★通过class名
getElementsByClassName("class名")
★通过标签名
getElementsByTagName("标签名")
★通过name属性
getElementsByName(" name名")
★通过选择器获取一个元素
querySelector("选择器名")
★通过选择器获取一组元素
querySelectorAll("选择器名")
提示：参数是字符串的""引号是英文引号，单引号、双引号没有区别。
元素操作，准确来说，操作的是“元素节点”。属性操作，准确来说，操作的是“属性节点”。
HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就是操作它的id、type、value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作：1）获取HTML属性值；2）设置HTML属性值
☆用“对象属性”方式来操作
获取HTML属性值语法：
obj.attr
说明：
obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。
attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。
设置HTML属性值语法：
obj.attr = "值";
说明：
obj是元素名，它一个DOM对象，attr是属性名。
☆用“对象方法”方式操作
可以使用getAttribute()方法来获取元素的某个属性的值。
语法：
obj.getAttribute("attr")
说明：
obj是元素名，attr是属性名。getAttribute()方法只有一个参数。注意，attr是要用英文引号括起来的，初学者很容易忽略这个问题。
下面给出一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试示例</title>
<script>
function myFunction()
{
var d = document.getElementById("div2");
alert(d.getAttribute("style"));
}
</script>
</head>
<body>
<h3>这是测试示例</h3>
<div id ="div2" style="color:#00FF00">
<p>这段文本颜色为绿色</p
</div>
<button onclick="myFunction()">查看上段文本颜色属性值</button>
</body>
</html>
保存文件名：getAttribute()方法示例.html，用浏览器打开运行结果：
可以使用setAttribute()方法来设置元素的某个属性的值。
语法：
obj.setAttribute("attr","值")
说明：
obj是元素名，attr是属性名。setAttribute()方法有两个参数：第1个参数是属性名；第2个参数是你要设置的属性值。
可以使用removeAttribute()方法来删除元素的某个属性。
语法：
obj.removeAttribute("attr")
说明：
想要删除元素的某个属性，我们只有removeAttribute()这一个方法。
可以使用hasAttribute()方法来判断元素是否含有某个属性。
语法：
obj.hasAttribute("attr")
说明：
hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。
实际上我们直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。
value、innerHTML、innerText属性的区别
value是元素的属性值，而innerText和innerHTML是元素开始和结束标签之间的值，innerHTML包括Html标签， innerText去除Html标签。
HTML DOM value 属性value 属性设置或返回属性的值。
返回属性的值：attribute.value
设置属性的值：attribute.value = value
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。
获取元素的内容：element.innerHTML;
给元素设置内容：element.innerHTML =htmlString;
element.innerHTML - Web API 接口参考 | MDN
innerText属性可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。
获取元素的内容：element.innerText;
给元素设置内容：element.innerText = string;
HTMLElement.innerText - Web API 接口参考 | MDN
value、innerHTML、innerText属性的区别的例子，源码如下：
<!doctype html>
<html
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<div id="divID">
<span style="color:red">提示：</span> 请在文本输入框输入数值（默认值123）：
<br>
<input type="text" id="input" value="123"> <!--文本输入框，默认值123-->
</div>
<br>
<!--通过点击click按钮，弹窗中显示文本框内用户输入的内容-->
<input type="button" onclick="test1()" value="click">
<input type="button" onclick="test2()" value="click2">
<input type="button" onclick="test3()" value="click3">
<script>
function test1(){
var aa=document.getElementById("input").value; //通过 document.getElementById(“id名”).value来获取value值。
alert(aa);
}
function test2(){
var aa=document.getElementById("divID").innerHTML; //通过 document.getElementById(“id名”).innerHTML来获取。
alert(aa);
}
function test3(){
var aa=document.getElementById("divID").innerText; //通过 document.getElementById(“id名”).innerText来获取。
alert(aa);
}
</script>
</body>
</html>
保存文件名：value、innerHTML、innerText的区别.html ，用浏览器打开运行结果：
附录、
W3Schools 是由挪威的 Refsnes Data 创建的一个“教程网站”，注意不要和https://www.w3school.com.cn/ 搞混，（注意其中w3schools最后有没有 s ）
MDN（Mozilla Developer Network）?MDN Web Docs
Web Platform Docs ?Your Web, documented. · WebPlatform.org