使用DOM修改input元素的value属性值，为啥在HTML结构上没有变化？

我可不爱穿格子衫

于 2023-07-10 17:19:57 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_48600544/article/details/131642306

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作表单属性</title>
</head>

<body>
    <input type="text" name="username" value="用户名">
    <button>按钮</button>
    <input type="checkbox" name="agree">
    <script>
        // 操作表单属性
       
        // 属性选择器
        const username = document.querySelector('[name=username]')
        console.log(username) 

        // 1.2 操作表单的value属性
        
        username.value = '请输入用户名' 
        // alert(username.defaultValue)
        alert(username.value)

        // username.setAttribute("value", "请输入用户名试试");

        
    </script>
</body>

</html>

将该段代码运行到浏览器中如下：

明明在源码中使用DOM修改了value的值为“请输入用户名”，但是在网页html结构中并没有发生改变，尝试刷新以及重写也没有用。

之后，我又修改了input元素的type值为“password”,html结构中type值发生了改变。但是value值依旧没有变化。

于是我就产生了深深的思考，经过上网不断搜索以及通过书籍的不断摸索，终于知道为啥了，

解决办法以及逻辑：

首先可以使用 alert(username.value) ，在浏览器中弹出value 的当前值，发现当前值为“请输入用户名”

其次，我使用alert(username.defaultValue)，发现弹出的却是“用户名”，也就是说，网页中value的默认值是“用户名”

但是为啥HTML结构中的value没有显示“请输入用户名”，可能的原因是: 使用DOM去修改网页文档时，其中对value的修改是存在DOM内存中的，并不显示出来，但是value的值的确是以及发生改变，但这种改变是体现在网页效果中的，不能单纯通过网页的HTML结构来判断，这可能就是DOM的一种工作模式。

另外，使用DOM来修改input元素的value属性也是一种便捷修改方式，标准的方式其实就是使用setAttribute方法去设置，这个可以直接看到HTML代码发生改变。

如果实在理解不了，可以这样理解：

我们使用DOM修改value值是一种动态更改。更改的内容不体现在源码中，动态更改的内容在内存中更改的，看不到HTML代码发生改变是因为我们看到的代码是浏览器第一次加载缓存下来的源代码，而其他属性我们可以看到属性值被更改，是因为浏览器第一次加载页面时，js就已经对源码进行了更改，我们看到的代码，是js执行之后的代码。因此DOM并不是对所有的修改都会体现到HTML中。

参考链接：（1）javascript - DOM问题：点击按钮的时候，修改input元素的value属性值，为什么在HTML结构上没有变化？ - SegmentFault 思否参考书籍：（1）javascript dom程序设计

（2） JavaScript高级程序设计

我可不爱穿格子衫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用DOM修改input元素的value属性值，为啥在HTML结构上没有变化？

但是为啥HTML结构中的value没有显示“请输入用户名”，可能的原因是: 使用DOM去修改网页文档时，其中对value的修改是存在DOM内存中的，并不显示出来，但是value的值的确是以及发生改变，但这种改变是体现在网页效果中的，不能单纯通过网页的HTML结构来判断，这可能就是DOM的一种工作模式。另外，使用DOM来修改input元素的value属性也是一种便捷修改方式，标准的方式其实就是使用setAttribute方法去设置，这个可以直接看到HTML代码发生改变。但是value值依旧没有变化。
复制链接

扫一扫