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最新动画教程+iso光盘下载
Jan 22 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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中文乱码
2009/11/26 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
解决vue-loader加载不上的问题
2020/10/21 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
结婚喜宴主持词
2014/03/14 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书