欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS document对象简单用法完整示例

程序员文章站 2022-03-10 11:27:49
本文实例讲述了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>

运行结果:

JS document对象简单用法完整示例

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测试上述代码运行效果。