欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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);

看看结果
input元素的value属性与setAttribute()方法
输入框里面文本就是value的值小明
现在我们去掉它的value属性,用javascript为他添加value:

	<input id="myinput" type="text">
	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	console.log(myInput);

再瞅一眼:
input元素的value属性与setAttribute()方法
输入框里面的文本是小明,但是实际的input元素却没有value属性。看来,它仅仅是更改了输入框里面的文本而已。
我们试试用getAttribute()方法能不能获取到它的内容:

	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

看结果
input元素的value属性与setAttribute()方法
getAttribute()方法得到的是null,因为这个元素根本就没有value这个属性。
如果我们用setAttribute()方法呢,一起来看看吧:

	let myInput = document.getElementById("myinput");
	myInput.setAttribute("value", "小明");
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

第四次回眸:
input元素的value属性与setAttribute()方法
文本框的内容添加了,并且为元素新增了value属性。getAttribute()方法自然就能获取到了。是不是若有所思……

我们继续整点花里胡哨的:

	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	myInput.setAttribute("value", "老王");
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

再回首:
input元素的value属性与setAttribute()方法
是不是发现了什么。
直接用.value赋值,只能修改输入框里面显示的文本,对元素本身没有任何效果。如果用setAttribute()方法赋值,不仅会修改文本框中显示的文本,还会为元素(对象)的value属性赋值,如果没有value属性,就创建value属性并赋值。
当两者同时使用的时候,.value赋值的优先级高于setAttribute()方法,但是setAttribute()方法会做.value没做的事,那就是为元素的value属性赋值。
同时也能说明,getAttribute()方法是从元素本身的属性中去获取,而非其他。

本文地址:https://blog.csdn.net/weixin_46618182/article/details/107372528