Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性

pan_junbiao

已于 2025-03-31 20:22:22 修改

阅读量3.3k

点赞数 5

分类专栏： JavaScript 我の原创 HTML5 文章标签：前端 javascript html

于 2024-09-25 15:23:45 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/142522967

版权

我の原创同时被 3 个专栏收录

594 篇文章

订阅专栏

JavaScript

41 篇文章

订阅专栏

HTML5

24 篇文章

订阅专栏

关于 Window对象和 Document 对象的详细使用，系列文章：

《Window对象的常用属性和方法》

《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》

《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、innerText属性》

《Document自定义属性：getAttribute()、setAttribute()、removeAttribute()函数》

《Document动态添加与删除HTML节点：createElement()、appendChild()、removeChild()函数》

《JavaScript操作表单元素：文本框、单选按钮、下拉列表、复选框》

《JavaScript实现下拉框动态绑定与级联功能》

《JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()》

《JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作》

1、document 对象

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

1.1 getElementById() 方法

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

语法格式：

element = document.getElementById("id")

1.2 value属性

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

使用方法：

用户名称：<input type="text" id="userName" value="pan_junbiao的博客" />

//获取 value 属性值
let userName = document.getElementById("userName").value;

//修改 value 属性值
document.getElementById("userName").value = "pan_junbiao的博客_02"

执行结果：

1.3 innerHTML 和 innerText 属性

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

innerText 属性与 innerHTML 属性的功能类似，只是该属性只能声明元素包含的文本内容，即使指定的是 HTML 文本，它也会认为是普通文本而原样输出。

使用方法：

<p id="blogName"></p>
<p id="blogUrl"></p>

document.getElementById("blogName").innerHTML = "<h3 style='color:red'>您好，欢迎访问 pan_junbiao的博客</h3>";
document.getElementById("blogUrl").innerText = "https://blog.csdn.net/pan_junbiao";

执行结果：

2、综合实例

【实例】使用 document.getElementById("id") 方法获取 DOM 元素，并使用 value属性、innerText属性给元素赋值。

执行结果如下图：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>实例</title>

    <!-- CSS样式 -->
    <style>
        input {
            width: 300px;
            padding: 3px;
            font-size: 16px;
        }
    </style>

</head>

<body>
    <h3 id="title">标题内容</h3>
    <p>博客信息：<input type="text" id="blogName" /></p>
    <p>博客地址：<input type="text" id="blogUrl" /></p>
</body>

<script type="text/javascript">

    window.onload = function () {
        document.getElementById("title").innerText = "DOM获取元素并修改其内容："
        document.getElementById("blogName").value = "您好，欢迎访问 pan_junbiao的博客";
        document.getElementById("blogUrl").value = "https://blog.csdn.net/pan_junbiao";
    }

</script>

</html>