|
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>如何通過(guò)document獲取數(shù)據(jù)</title> <style> input{ margin: 5px 5px;} </style> <script> /* --通過(guò)ID獲取并彈出用戶名輸入框的值-- */ function demo1(){ //獲取用戶名input元素 var oInp = document.getElementById("username"); //oInp 對(duì)象表示 <input type="text" name="username" id="username" value=""/>元素 //獲取元素的value值 alert(oInp.value); oInp.value = "趙敏"; } /* --通過(guò)name屬性獲取并彈出密碼輸入框的值-- */ function demo2(){ //返回一個(gè)集合數(shù)組 var aInp = document.getElementsByName("password"); alert(aInp[0].value); } /* --通過(guò)標(biāo)簽名獲取并返回所有input元素的value值-- */ function demo3(){ var aInp = document.getElementsByTagName("input"); for( var i=0;i < aInp.length; i++ ){ alert(aInp[i].value); } } /* --獲取元素內(nèi)容-- */ function demo4(){ //獲取P元素 id=pid var oP = document.getElementById("pid"); //獲取的P標(biāo)簽內(nèi)的html內(nèi)容(從<p>開始到</p>結(jié)束中間的所有內(nèi)容) alert(oP.innerHTML); oP.innerHTML = "<span style='color:blue'>哈哈哈哈....</span>"; //獲取的P標(biāo)簽內(nèi)的文本內(nèi)容(從<p>開始到</p>結(jié)束中間的文本內(nèi)容) //alert(oP.innerText);//innerText 屬性部分瀏覽器不支持 } </script> </head> <body> 用戶名： <input type="text" name="username" id="username" value=""/><br /> 密碼： <input type="password" name="password" id="password" /><br /> 確認(rèn)密碼： <input type="password" name="rd" id="password2" /><br /> <hr /> <input type="button" value="通過(guò)ID獲取并彈出用戶名輸入框的值" id="b1" onclick="demo1()"/> <input type="button" value="通過(guò)name屬性獲取并彈出密碼輸入框的值" id="b2" onclick="demo2()"/> <input type="button" value="通過(guò)元素名稱獲取標(biāo)簽并返回所有輸入框的value值" id="b3" onclick="demo3()" /> <hr /> <p id="pid"><font color="red">獲取P標(biāo)簽中的文字</font></p> <input type="button" value="獲取P中的文字" onclick="demo4()" /> </body> </html> |
|
|
