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 16 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
vue中touch和click共存的解决方式
Jul 28 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实现加密的几种方式介绍
2015/02/22 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
asp 取文本框名称代码
2008/12/02 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
高中英语教学反思
2014/02/04 职场文书
代理协议书范本
2014/04/22 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年电厂工作总结
2014/12/04 职场文书
职位证明模板
2015/06/23 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python