input元素的value属性与setAttribute()方法
程序员文章站
2022-06-25 09:02:36
先写一个带有value的input元素我们先打印一下它:let myInput = document.getElementById("myinput");console.log(myInput);看看结果输入框里面文本就是value的值小明现在我们去掉它的value属性,用javascript为他添加value:
先写一个带有value
属性的input元素
<input id="myinput" type="text" value="小明">
我们先打印一下它:
let myInput = document.getElementById("myinput");
console.log(myInput);
看看结果
输入框里面文本就是value的值小明
现在我们去掉它的value属性,用javascript为他添加value:
<input id="myinput" type="text">
let myInput = document.getElementById("myinput");
myInput.value = "小明";
console.log(myInput);
再瞅一眼:
输入框里面的文本是小明,但是实际的input元素却没有value属性。看来,它仅仅是更改了输入框里面的文本而已。
我们试试用getAttribute()
方法能不能获取到它的内容:
let myInput = document.getElementById("myinput");
myInput.value = "小明";
console.log(myInput);
console.log(myInput.getAttribute("value"));
看结果getAttribute()
方法得到的是null
,因为这个元素根本就没有value
这个属性。
如果我们用setAttribute()
方法呢,一起来看看吧:
let myInput = document.getElementById("myinput");
myInput.setAttribute("value", "小明");
console.log(myInput);
console.log(myInput.getAttribute("value"));
第四次回眸:
文本框的内容添加了,并且为元素新增了value
属性。getAttribute()
方法自然就能获取到了。是不是若有所思……
我们继续整点花里胡哨的:
let myInput = document.getElementById("myinput");
myInput.value = "小明";
myInput.setAttribute("value", "老王");
console.log(myInput);
console.log(myInput.getAttribute("value"));
再回首:
是不是发现了什么。
直接用.value
赋值,只能修改输入框里面显示的文本,对元素本身没有任何效果。如果用setAttribute()
方法赋值,不仅会修改文本框中显示的文本,还会为元素(对象)的value
属性赋值,如果没有value
属性,就创建value
属性并赋值。
当两者同时使用的时候,.value
赋值的优先级高于setAttribute()
方法,但是setAttribute()
方法会做.value
没做的事,那就是为元素的value
属性赋值。
同时也能说明,getAttribute()
方法是从元素本身的属性中去获取,而非其他。
本文地址:https://blog.csdn.net/weixin_46618182/article/details/107372528
推荐阅读
-
Vue input控件通过value绑定动态属性及修饰符的方法
-
js设置属性值的方法(讲解js控制元素显示与隐藏)
-
input元素的value属性与setAttribute()方法
-
闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
闭包的原理与经典应用场景,访问器属性,类与对象的创建与成员引用,数组与对象的解构过程与经典案例,JS引入到浏览器中的的方法及获取DOM元素的两个API
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
Vue input控件通过value绑定动态属性及修饰符的方法
-
JavaScript获取元素的方法与属性的实例分析
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象,获取元素计算样式,classList 对象常用方法 ,事件的添加与派发