JS中的innerHTML,innerText,value的区别
目录
Document 对象
主要用途
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对象操作示例:
<!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>
标签及其内容。
var div = document.getElementById('myDiv');
console.log(div.innerHTML); // 输出:'<p>这是一个段落</p>'
innerText
innerText指的是获取指定节点的文本及其后代节点中文本内容,但不能获取<script>和<style>元素中的内容,输入输出的是字符串。
innerText 属性与 innerHTML 属性的功能类似,与innerHTML不同,innerText只返回纯文本内容,不包括任何HTML标签。换句话说只是该属性只能声明元素包含的文本内容,即使指定的是 HTML 文本,它也会认为是普通文本而原样输出。同样地,当你设置innerText的值时,也不会影响到元素内的HTML标签。
var div = document.getElementById('myDiv');
console.log(div.innerText); // 输出:'这是一个段落'
与 innerText不同的是, innerHTML允许使用 HTML 富文本,并且不会自动编码和解码文本。换句话说, innerText检索并设置标记的内容为纯文本,而 innerHTML检索并设置 HTML 格式的内容。
value
value一般为标签的属性值,追加文本框内容,是表单元素特有的属性,输入输出的是字符串。
这个属性主要用于表单元素(如input
、textarea
等),用于获取或设置元素的值。对于非表单元素,value
属性通常没有意义。
var input = document.getElementById('myInput');
console.log(input.value); // 输出:'输入一些文字'
此外,当一个 DOM 元素有 value 属性的时候,其 value 才会有值。当使用 value 属性时,就可以获取 value 属性的值。如果一个 DOM 元素没有 value属性,那么使用 value 属性时是取不到值的。
总结:
- 如果你需要获取或设置元素内的HTML标签及内容,请使用
innerHTML
。 - 如果你需要获取或设置元素的纯文本内容,请使用
innerText
。 - 如果你需要获取或设置表单元素的值,请使用
value。