JS中的innerHTML,innerText,value的区别

目录

[Document 对象](#Document 对象)

主要用途

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

innerHTML

innerText

value


Document 对象

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

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

主要用途

  1. 获取元素:可以通过多种方式获取HTML元素,例如通过ID (getElementById)、标签名 (getElementsByClassName 或 getElementsByTagName)、CSS选择器 (querySelector 或 querySelectorAll) 等。

  2. 创建和插入元素:可以动态创建新的HTML元素并插入到现有文档中。

  3. 修改内容:可以修改元素的内容、属性、样式等。

  4. 事件处理:可以为元素添加事件监听器,处理用户的交互行为。

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一般为标签的属性值,追加文本框内容,是表单元素特有的属性,输入输出的是字符串。

这个属性主要用于表单元素(如inputtextarea等),用于获取或设置元素的值。对于非表单元素,value属性通常没有意义。

javascript 复制代码
var input = document.getElementById('myInput');
console.log(input.value); // 输出:'输入一些文字'

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

总结:

  • 如果你需要获取或设置元素内的HTML标签及内容,请使用innerHTML
  • 如果你需要获取或设置元素的纯文本内容,请使用innerText
  • 如果你需要获取或设置表单元素的值,请使用value。
相关推荐
胚芽鞘68134 分钟前
关于java项目中maven的理解
java·数据库·maven
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
岁忧1 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
chao_7892 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
CJi0NG2 小时前
【自用】JavaSE--算法、正则表达式、异常
java
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨2 小时前
GO 启动 简单服务
开发语言·后端·golang
Hellyc2 小时前
用户查询优惠券之缓存击穿
java·redis·缓存
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang