案例:(DOM对象)document 文档对象之标签元素的操作(一)(getElementById(“元素的id属性值”))

标签元素的操作:doucment对象中的方法getElementById(“元素的id属性值”)。返回值是一个单一的对象

案例如下:

<html>
  <head>
    <title>form.html</title>
    <meta  charset="UTF-8"/>
  </head>
  
  <body>
  	   <form name="form1" action="test.html" method="post" >
  	   	  	<input type="text" name="username" value="清华大学100周年_1" id="tid" onchange="" >
		 	<input type="button" name="ok" value="保存1"/>
  	   </form>
  </body>
    
  <script type="text/javascript">
    	//输出 <input type="text" name="username" value="清华大学100周年_1"  id="tid" >标签value属性的值
    	//1.使用doucment对象中的方法getElementById(元素的id属性值)获取到执行id的元素(对象)
    	var tidEle = document.getElementById("tid");
   	 	
   	 	//2.可以使用对象.属性名,获取到属性的值
    	//alert(tidEle.value);//默认: 清华大学100周年_1  输入:1111
    	//alert(tidEle.getAttribute("value"));//清华大学100周年_1
    
		//输出 <input type="text" name="username" value="清华大学100周年_1"  id="tid" >标签type属性的值
		alert(tidEle.type);//text
		alert(tidEle.getAttribute("type"));//text
  </script>
</html>

注意:

对象.属性名:获取的value的属性值,没有在文本框输入获取的是默认值,在文本框中输入内容,获取的是输入的值。修改了之后实际上读取的是内存中缓存html文件。
对象.getAttribute(“属性值”):获取的属性值,无论页面中内容是否改变,获取的都是value上写的值
对象名.属性名这种方式获取属性值,一般都是form表单中的标签使用(input,select,textarea)
关于form表单的说明:https://blog.csdn.net/qq_45083975/article/details/91055272

猜你喜欢

转载自blog.csdn.net/qq_45083975/article/details/91396648