一.write方法和getElementById方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>doucment对象</title> </head> <body> <input type="text" id="nameid" value="公子世无双" /> <script type="text/javascript"> //document对象表示整个文档 //write()方法:1)向页面输出变量(值) var str = "陌上人如玉!"; document.write(str); //向页面输出html代码 document.write("<hr/>"); //使用getElementById得到input标签 var input1 = document.getElementById("nameid"); //得到input里面的value值 alert(input1.value); //设置input里面的value值 input1.value = "大江东去浪淘尽"; </script> </body> </html>
2.getElementsByName方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document对象二</title> </head> <body> <input type="text" name="name1" value="人生到处知何似"><br/> <input type="text" name="name1" value="应是飞鸿踏雪泥"><br/> <input type="text" name="name1" value="泥上偶尔染指爪"><br/> <input type="text" name="name1" value="鸿飞那复计东西"><br/> <script type="text/javascript"> //getElementsByName()通过标签的name的属性值得到标签 //-返回的是一个集合(数组) //使用getElementsByName得到input标签 var inputs = document.getElementsByName("name1"); alert(inputs.length); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document对象二</title> </head> <body> <input type="text" name="name1" value="人生到处知何似"><br/> <input type="text" name="name1" value="应是飞鸿踏雪泥"><br/> <input type="text" name="name1" value="泥上偶尔染指爪"><br/> <input type="text" name="name1" value="鸿飞那复计东西"><br/> <script type="text/javascript"> //getElementsByName()通过标签的name的属性值得到标签 //-返回的是一个集合(数组) //使用getElementsByName得到input标签 var inputs = document.getElementsByName("name1"); //遍历数组 for(var i = 0;i<inputs.length;i++) { //每次循环得到input对象,赋值到input1里面 var input1 = inputs[i]; alert(input1.value); } </script> </body> </html>
由于inputs接收的是一个集合,故而在循环中依次打印了四个元素
3.getElementsByTagName():返回带有指定标签名的对象集合-->即通过标签得到元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document对象三</title> </head> <body> <input type="text" name="name1" value="千山鸟飞绝"><br/> <input type="text" name="name1" value="万径人踪灭"><br/> <input type="text" name="name1" value="孤舟蓑笠翁"><br/> <input type="text" name="name1" value="独钓寒江雪"><br/> <script type="text/javascript"> var inputs1 = document.getElementsByTagName("input"); //遍历数组,得到每个input标签 for(var i=0;i<inputs1.length;i++) { var result = inputs1[i]; alert(result.value); } </script> </body> </html>
4.通过具体的数组下标得到value值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document对象四</title> </head> <body> <!-- getElementsByName与getElementsByTagName返回的是元素数组,可以通过具体的元素下标得到具体的value值 --> <input type="text" name="aidou" value="秋水时至"> <script type="text/javascript"> //通过name名得到元素 var result1 = document.getElementsByName("aidou")[0]; document.write("<br/>"+result1.value+"<br/>"); //通过标签名得到元素 var result2 = document.getElementsByTagName("input")[0]; document.write(result2.value); </script> </body> </html>
