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学习笔记-详解in运算符
Sep 13 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
Javascript中的async awai的用法
May 17 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
js实现图片实时时钟
Jan 15 Javascript
如何在selenium中使用js实现定位
Aug 18 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获取网址的顶级域名函数代码
2012/09/24 PHP
php自定义错误处理用法实例
2015/03/20 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python中的集合介绍
2019/01/28 Python
详解Python传入参数的几种方法
2019/05/16 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
通俗讲解python 装饰器
2020/09/07 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
大学四年规划书范文
2013/12/27 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
九年级英语教学反思
2016/02/15 职场文书
节约用水广告语60条
2019/11/14 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
世界十大狙击步枪排行榜
2022/03/20 杂记
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android