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


Posted in Javascript onJanuary 14, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
JS document内容及样式操作完整示例
Jan 14 #Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 #Javascript
小程序中设置缓存过期的实现方法
Jan 14 #Javascript
ES6实现图片切换特效代码
Jan 14 #Javascript
vue项目创建步骤及路由router
Jan 14 #Javascript
JS实现容器模块左右拖动效果
Jan 14 #Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 #Javascript
You might like
PHP访问Google Search API的方法
2015/03/05 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
解读! Python在人工智能中的作用
2017/11/14 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
中医专业应届生求职信
2013/11/17 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server