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 写的简单进度条控件
Jan 22 Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
前端微信支付js代码
Jul 25 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
js实现模糊匹配功能
Feb 15 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
js自定义瀑布流布局插件
May 16 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
jQuery实现评论模块
Aug 19 jQuery
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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
django表单的Widgets使用详解
2019/07/22 Python
Django学习之文件上传与下载
2019/10/06 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
外企测试工程师面试题
2015/02/01 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
入党推优材料
2014/06/02 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
费用申请报告范文
2015/05/15 职场文书
建国大业观后感600字
2015/06/01 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript