JS document对象简单用法完整示例
程序员文章站
2022-06-22 14:23:21
本文实例讲述了js document对象简单用法。分享给大家供大家参考,具体如下:
本文实例讲述了js document对象简单用法。分享给大家供大家参考,具体如下:
<html> <head> <title>js-document对象学习</title> <meta charset="utf-8"/> <script type="text/javascript"> // 直接获取对象 function testgetelementbyid(){ //通过id获取对象 // var gby=window.document.getelementbyid(); //window可以省去不写 var gby=document.getelementbyid("sid"); alert(gby); //输出的返回值是标签的类型[object htmlinputelement] } function testgetelementsbyname(){ //通过name获取对象 var gbn=document.getelementsbyname("umane"); alert(gbn); //输出的返回值类型是[object nodelist]一个对象类型的数组 alert(gbn.length); //nodelist的元素是节点元素,长度是节点的个数。每一个容器或标签算是一个节点。 } function testgetelementsbytagname(){ //通过tagname(标签)获取对象 var gbt=document.getelementsbytagname("input"); alert(gbt); //输出返回值类型是[object htmlcollection]是一个对象元素的集合 alert(gbt.length); //其集合的数目是所有input个数 } function testgetelementsbyclassname(){ //通过class获取对象 var gbc=document.getelementsbyclassname("clname"); alert(gbc); //输出返回值类型是[object htmlcollection]是一个对象元素的集合 alert(gbc.length); //集合元素的长度是含有传入类属性的元素个数。 } // 间接获取对象 function testparent(){ //利用父节点调用其节点对象 var showdiv=document.getelementbyid("showdiv"); var tchild=showdiv.childnodes; alert(tchild); //输出返回值类型是[object nodelist]的一个list数组 alert(tchild.length); //返回子节点的长度 13,是由于在div中和text有换行符算一个子节点 } function testchild(){ //利用子节点调用其父节点 var showdiv=document.getelementbyid("child"); var tparent=showdiv.parentnode; alert(tparent); //输出返回值类型是[object htmldivelement](其父节点的类型) } function testborther(){ //利用子节点调用其父节点 var showdiv=document.getelementbyid("target"); var topborther=showdiv.previoussibling; //输出参考对象上面的元素 var lowborther=showdiv.nextsibling //输出参考元素的下面的元素 alert(topborther+":::"+lowborther); //输出返回值类型是[object htmldivelement](其父节点的类型) } </script> <style type="text/css"> .clname{} #showdiv{ border: solid 2px cyan; width: 300px; height: 400px; } input[type=text]{ margin-left: 3px; } </style> </head> <body> <h3>js-document对象学习</h3> <h4>直接调用</h2> <input type="button" name="" id="sid" value="测试getelementbyid" onclick="testgetelementbyid()" /> <input type="button" name="umane" id="" value="测试getelementbyname" onclick="testgetelementsbyname()" /> <input type="button" name="" id="" value="测试getelementsbytagnames" class="clname" onclick="testgetelementsbytagname()" /> <input type="button" name="" id="" value="测试getelementsbyclassname" class="clname" onclick="testgetelementsbyclassname()" /> <hr /><br /> <h4>间接调用</h2> <input type="button" name="" id="" value="测试parent" onclick="testparent()" /> <input type="button" name="" id="" value="测试 child" onclick="testchild()" /> <input type="button" name="" id="" value="测试borther" onclick="testborther()" /> <div id="showdiv"> <input type="text" name="" id="parent" value="" /> <input type="text" name="" id="child" value="" /> <input type="text" name="" id="target" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> </body> </html>
运行结果:
document:
获取html元素:
1:直接获取方式:通过id 通过name属性值 通过标签名 通过class属性值
2:间接获取方式:父子关系 子父关系 兄弟关系
3:操作html元素对象的属性
操作html元素对象的内容和样式
操作html的文档结构
document操作form元素
document操作表格
document对象实现form表单校验
感兴趣的朋友可以使用在线html/css/javascript代码运行工具:http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。