|
阅读：2839回复：0
DOM小案例 通过点击按钮获取文本框中的信息
通过点击按钮获取文本框中的信息
html代码 <body> 用户名称：<input type="text" name="username" id="username"/> 用户密码：<input type="password" name="password" id="password" /> 用户密码2：<input type="password" name="password" id="password2" /> <hr /> <input type="button" value="通过ID获取节点的值" onclick="demo1()"/> <input type="button" value="通过NAME获取节点的值" onclick="demo2()" /> <input type="button" value="通过TAG获取节点的值" onclick="demo3()" /> <hr /> <p id="pid"><font color="red">获取P标签中的文字</font></p> <input type="button" value="获取P中文字" onclick="demo4()" /> </body> js代码： <script type="text/javascript"> function demo1() { //根据id获取元素 var username=document.getElementById("username"); //获取节点对象身上的值 console.log(username.value); } function demo2() { //根据name获取元素 var password=document.getElementsByName("password");//这是个数组变量 //获取每个节点中的值 for(var i=0;i<password.length;i++) console.log(password.value); } function demo3() { //根据元素名称获取元素 var input=document.getElementsByTagName("input"); //获取每个节点中的值 for(var i=0;i<input.length;i++) console.log(input.value); } function demo4() { //获取p元素 var pid=document.getElementById("pid"); //获取p元素中的文字 console.log(pid.innerText);//获取P标签中的文字 //获取p元素中的html内容 console.log(pid.innerHTML);//<font color="red">获取P标签中的文字</font> pid.innerHTML="<font color='aqua'>新的p</font>" } </script> |
|
公众号
