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 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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.MVC的模板标签系统(三)
2006/09/05 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Python的一些用法分享
2012/10/07 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python gevent协程切换实现详解
2020/09/14 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
几个数据库方面的面试题
2016/07/01 面试题
优秀部门获奖感言
2014/02/14 职场文书
教师网络培训感言
2014/03/09 职场文书
少先队活动总结
2014/08/29 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
工作自我评价范文
2015/03/05 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python