JS中的innerHTML，innerText，value的区别

[Document 对象](#Document 对象)

主要用途

[getElementById() 方法](#getElementById() 方法)

innerHTML

innerText

value

Document 对象

Document 对象，当 HTML 文档加载到 Web 浏览器中时，它就变成了一个文档对象。文档对象是 HTML 文档的根节点。文档对象是窗口对象的属性。

在JavaScript中，Document对象是整个文档的基础，代表了当前网页的全部内容。它是window对象的一个属性，因此可以通过window.document或者简写为document来访问。Document对象提供了许多方法和属性，使得开发者能够轻松地与HTML文档进行交互，比如获取元素、修改内容、添加事件监听器等。

主要用途

获取元素：可以通过多种方式获取HTML元素，例如通过ID (getElementById)、标签名 (getElementsByClassName 或 getElementsByTagName)、CSS选择器 (querySelector 或 querySelectorAll) 等。
创建和插入元素：可以动态创建新的HTML元素并插入到现有文档中。
修改内容：可以修改元素的内容、属性、样式等。
事件处理：可以为元素添加事件监听器，处理用户的交互行为。

getElementById() 方法

getElementById() 方法返回拥有指定 id 值的元素。如果元素不存在，getElementById() 方法将返回 null。getElementById() 方法是 HTML DOM 中最常用的方法之一。几乎每次想要读取或编辑 HTML 元素时，都会使用它。

以下是一些常见的Document对象操作示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>Document对象示例</title>
</head>
<body>

<h1 id="header">欢迎来到我的网站</h1>
<button id="changeTextBtn">点击改变文本</button>

<script>
// 获取元素
var header = document.getElementById('header');
var btn = document.getElementById('changeTextBtn');

// 修改元素内容
btn.addEventListener('click', function() {
    header.innerHTML = '文本已更改！';
});

// 创建新元素
var newDiv = document.createElement('div');
newDiv.innerHTML = '这是新创建的div元素。';
document.body.appendChild(newDiv);

// 修改样式
header.style.color = 'blue';

// 添加事件监听器
document.addEventListener('click', function(event) {
    console.log('文档被点击了！');
});
</script>

</body>
</html>

innerHTML

innerHTML指的是标签内的文本内容，追加标签和内容，输入输出到该DOM内部纯HTML代码。

innerHTML 属性声明了元素含有的 HTML 文本，不包括元素本身的开始标记和结束标记。通过该属性可以为指定的 HTML 文本替换元素内容。

换句话说，它会返回或替换元素内的所有标签及其内容。例如，如果你有一个包含<p>标签的div元素，使用innerHTML可以获取到这个<p>标签及其内容。

javascript 复制代码

var div = document.getElementById('myDiv');
console.log(div.innerHTML); // 输出：'<p>这是一个段落</p>'

innerText

innerText指的是获取指定节点的文本及其后代节点中文本内容，但不能获取<script>和<style>元素中的内容，输入输出的是字符串。

innerText 属性与 innerHTML 属性的功能类似，与innerHTML不同，innerText只返回纯文本内容，不包括任何HTML标签。换句话说只是该属性只能声明元素包含的文本内容，即使指定的是 HTML 文本，它也会认为是普通文本而原样输出。同样地，当你设置innerText的值时，也不会影响到元素内的HTML标签。

javascript 复制代码

var div = document.getElementById('myDiv');
console.log(div.innerText); // 输出：'这是一个段落'

与 innerText不同的是， innerHTML允许使用 HTML 富文本，并且不会自动编码和解码文本。换句话说， innerText检索并设置标记的内容为纯文本，而 innerHTML检索并设置 HTML 格式的内容。

value

value一般为标签的属性值，追加文本框内容，是表单元素特有的属性，输入输出的是字符串。

这个属性主要用于表单元素（如input、textarea等），用于获取或设置元素的值。对于非表单元素，value属性通常没有意义。

javascript 复制代码

var input = document.getElementById('myInput');
console.log(input.value); // 输出：'输入一些文字'

此外，当一个 DOM 元素有 value 属性的时候，其 value 才会有值。当使用 value 属性时，就可以获取 value 属性的值。如果一个 DOM 元素没有 value属性，那么使用 value 属性时是取不到值的。

总结：

如果你需要获取或设置元素内的HTML标签及内容，请使用innerHTML。
如果你需要获取或设置元素的纯文本内容，请使用innerText。
如果你需要获取或设置表单元素的值，请使用value。