当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS document对象简单用法完整示例

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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代码运行工具：测试上述代码运行效果。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网