<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>如何通过document获取数据</title>
<style>
input{margin:5px 5px;}
</style>
<script>
/*--通过ID获取并弹出用户名输入框的值--*/
function fn1(){
var username=document.getElementById("username")
alert(username.value)
username.value="李四"
}
/*--通过name属性获取并弹出密码输入框的值--*/
function fn2(){
var pw = document.getElementsByName("password")[0]
alert(pw.value)
}
/*--通过元素名称获取并弹出确认密码输入框的值--*/
function fn3(){
var pw2=document.getElementsByTagName("input")[2]
alert(pw2.value)
}
/* --获取元素内容-- */
function fn4(){
var p=document.getElementById("pid")
alert(p.innerText)
alert(p.innerHTML)
p.innerHTML="<font color=‘green’>我是来替换的</font>"
}
</script>
</head>
<body>
用户名:<input type="text" name="username" id="username" /><br/>
密码:<input type="password" name="password" id="password" /><br/>
确认密码:<input type="password" name="rd" id="password2" />
<hr />
<input type="button" value="通过ID获取并弹出用户名输入框的值" id="b1" οnclick="fn1()"/>
<input type="button" value="通过name属性获取并弹出密码输入框的值" id="b2" οnclick="fn2()"/>
<input type="button" value="通过元素名称获取并弹出确认密码输入框的值" id="b3" οnclick="fn3()"/>
<hr />
<p id="pid"><font color="red">这是p标签中的文字</font></p>
<input type="button" value="获取P中的文字" οnclick="fn4()"/>
</body>
</html>