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 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
js的对象与函数详解
Jan 21 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
python九九乘法表的实例
2017/09/26 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python同时处理多个异常的方法
2020/07/28 Python
搞笑征婚广告词
2014/03/17 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
创业女性典型材料
2014/05/02 职场文书
课外活动实习计划
2015/01/19 职场文书
继承权公证书范本
2015/01/23 职场文书
手术室护士个人总结
2015/02/13 职场文书
生日赠语
2015/06/23 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Linux安装apache服务器的配置过程
2021/11/27 Servers