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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
浅谈React碰到v-if
Nov 04 Javascript
使用Vue实现一个树组件的示例
Nov 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP脚本的10个技巧(2)
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP中使用curl入门教程
2015/07/02 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
微信小程序radio组件使用详解
2018/01/31 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python获取服务器响应cookie的实例
2018/12/28 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
毕业生求职推荐信
2013/11/04 职场文书
眼镜促销方案
2014/03/15 职场文书
买房协议书
2014/04/11 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
出售房屋委托书范本
2014/09/24 职场文书
成都人事代理协议书
2014/10/25 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
西安大雁塔导游词
2015/02/10 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS