您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
document节点对象的获取方式示例介绍
作者：佚名 责任编辑：admin 更新时间：2022-06-22
如果要操作一个元素，首先要获取到它，下面为大家介绍下document节点对象的获取方式，感兴趣的朋友不要错过
代码如下: <html> <head> <title></title> <script> /* document节点对象的获取方式： */ //第一种，通过id获取 function documentDemo(){ var tableNode = document.getElementById("tab_id"); tableNode.style.border = "5px solid #00ff00"; } //第二种，通过name属性 function documentDemo2(){ var inputNode = document.getElementsByName("txt"); alert(inputNode.length); alert(inputNode[0].value); } //第三种，通过标签名 function documentDemo3(){ var tdNode = document.getElementsByTagName("td"); alert(tdNode.length); for(var x = 0 ; x < tdNode.length;x++){ alert(tdNode[x].innerText); } } </script> <style type="text/css"> .onediv{ width:200px; height:100px; border:1px solid #f00; margin-top:20px; } table ,td{ border:1px solid #00f; width:200px; margin-top:20px; text-align:center; } </style> </head> <body> <input type="button" value="document对象演示" onclick="documentDemo3()"><br/> <div class="onediv"> 这是div中的内容 </div> <input type="txt" name="txt" > <input type="txt" name="txt" > <table cellspacing="0" id="tab_id"> <tr> <td>java</td> <td>php</td> </tr> <tr> <td>.net</td> <td>ios</td> </tr> </table> <span>这是一个span区域</span> <br/> <a href="#">这是一个超链接</a> <body> </html>- 上一个程序编程： JQuery结合CSS操作打印样式的方法
- 下一个程序编程： js中function()使用方法
