JavaScript+Jquery——DOM对象操作（2）

最新推荐文章于 2024-06-13 10:05:02 发布

大大大野

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量65

点赞数

分类专栏：初学者 Web JavaScript 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/HGninjago/article/details/125067585

版权

初学者同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Web

2 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

在上一篇讲了location对象与history对象操作今天来对Document对象进行讲解

document对象既是window对象的一部分也是整HTML文档可用来访问所有的元素

1.常用属性referred与URl

此处URl的使用方法想必大家都是了解的，而重点要讲的是referred属性它能返回载入当前文档的url 如果当前文档不是通过超链接访问的则会返回一个空值这就有点类似与看你是否是从官方入口进入的意思差不多如果不是指定的页面进入系统将会提示不能浏览或者跳转到别的页面。

2.常用方法

此处相对来说比较重要关于document的方法以后也会经常用到其中有：

getElementById（）方法一般用于访问div 图片表单等元素要求访问对象id是唯一的

getElementsByName（）一般用于访问具有同以name属性的元素如表单按钮、复选框等

getElementsByTagName（）是按标签来访问页面元素一般用于访问一组的相同元素

下面直接放实验代码：

<body>
    <div id="node">永恒</div>
    <input type="button" value="改变文本内容" name="l1" onclick="Str1()">
    <input type="text" value="风" name="season">
    <input type="text" value="火" name="season">
    <input type="text" value="水" name="season">
    <input type="text" value="雷" name="season">
    <input type="button" value="显示带有input标签的内容" name="l1" onclick="Str2()">
    <input type="button" value="显示带有season名字的内容" name="l1" onclick="Str3()">
    <p id="s"></p>
    <script type="text/javascript">
        function Str1(){
            document.getElementById("node").innerHTML="不灭";
        }
        function Str2(){
            var ll=document.getElementsByTagName("input");
            var sStr="";
            for(var i=0;i<ll.length;i++){
                sStr+=ll[i].value+"<br/>";
            }
            document.getElementById("s").innerHTML=sStr;
        }
        function Str3(){
            var ll=document.getElementsByName("season");
            var sStr="";
            for(var i=0;i<ll.length;i++){
                sStr+=ll[i].value+"<br/>";
            }
            document.getElementById("s").innerHTML=sStr;
        }
    </script>
</body>

第一个Str1用于替换掉原文本框内的内容；第二个则是讲所有input标签所包含的内容存在新容器里面然后进行输出；第三个则是将所有的name为season的内容进行输出

简介来理解就是getElementById（）获取他的内容地址； getElementsByName（）查找包含该名称的内容；getElementsByTagName（）访问所有相同标签的内容

3.Data对象

Date对象用于操作日期时间 date对象的使用需要实例化调用

以下以实例进行讲解：

<body>
    <!-- date对象的使用需要实例化调用 -->
    <!-- 以下对date对象常用方法进行讲解 -->
    <input type="button" value="点击获取时间" onclick="str()">
    <div id="ll"></div>
    <div id="lm"></div>
    <script type="text/javascript">
        function str(){
            var today = new Date();//Date()获取当前时间
            var nf= today.getFullYear();//获取年份 getFullYear()返回的是四位数的年份 getYear()返回的则是两位数的
            var yf= today.getMonth();//获取月份 
            var tt= today.getDate();//获取今天多少号
            var xp= today.getDay();//获取星期几
            var hh=today.getHours(); //获取小时
            var mm= today.getMinutes(); //获取分钟
            var ss= today.getSeconds(); //获取秒
            document.getElementById("ll").innerHTML="现在日期是："+nf+"-"+yf+"-"+tt+"-星期"+xp+"<br/>";
            document.getElementById("lm").innerHTML="现在时间是："+hh+":"+mm+":"+ss;
        }
    </script>
</body>

Date对象用于对时间的各种操作比如显示年月日当前时间等在后面还可以对其进行定时设置循环调用达到动态时钟的效果。

4.Mate对象

它提供了许多与数学相关的内容 Math对象它属于一个工具类不用创建对象，它里面封装了数字运算相关的属性和方法

如：

ceil() 向上舍入正大于等5以上舍入负数相反

floor（）向下舍入与ceil相反

found（）四舍五入

random（）生成一个随机数默认返回随机数包括0但不包括1 想生成一段数字内的随机数代码如下 var iNum=Math.floor（Math.random（）*100+1）这里不加Math.floor的话会生成小数

<body>
    <div id="color"></div>
    <input type="button" value="抽取你的随机颜色" onclick="strColor()">
    <!-- Math对象它属于一个工具类不用创建对象，它里面封装了数字运算相关的属性和方法 -->
    <script type="text/javascript">
        function strColor() {
            var color = new Array("红色","黄色","紫色","蓝色","绿色","橙色","青色","灰色","白色");
            var num = Math.ceil(Math.random()*9)-1;//random()抽取随机数在限定范围内
            document.getElementById("color").innerHTML=color[num];
        }
    </script>
</body>

5.定时函数

在之前的讲解中就有讲过setTimeout（）与setInterval（）函数这里同时还会再加上清除时间定时器函数clearTimeout（）与setInterval（）一起来讲解。

以上面的时间案例为基础来实现动态的时钟案例：

<body>
    <!-- 在前面的DOM对象的时候就有讲过时间函数现在加以运用 -->
    <!-- 结合前面的Date对象进行使用制作走动的时间 -->
    <div id="ll"></div>
    <div id="lm"></div>
    <input type="button" value="停止" onclick="ll()">
    <script type="text/javascript">
        function str(){
            var today = new Date();//Date()获取当前时间
            var nf= today.getFullYear();//获取年份 getFullYear()返回的是四位数的年份 getYear()返回的则是两位数的
            var yf= today.getMonth();//获取月份 
            var tt= today.getDate();//获取今天多少号
            var xp= today.getDay();//获取星期几
            var hh=today.getHours(); //获取小时
            var mm= today.getMinutes(); //获取分钟
            var ss= today.getSeconds(); //获取秒
            document.getElementById("ll").innerHTML="现在日期是："+nf+"-"+yf+"-"+tt+"-星期"+xp+"<br/>";
            document.getElementById("lm").innerHTML="现在时间是："+hh+":"+mm+":"+ss;
        }
        str();
        var tm=setInterval("str()",1000);//循环调用时间函数
        function ll(){
            clearInterval(tm);//此函数用于清除函数设置的定时器 类似于加载的过程中取消加载的意味
        }
    </script>
</body>

setTimeout（）是设置再多少毫秒后对所要调用的函数或者方法进行调用

clearTimeout（）与setInterval（）用于清除他们所对应的定时器

大大大野

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+Jquery——DOM对象操作（2）

在上一篇讲了location对象与history对象操作今天来对Document对象进行讲解document对象既是window对象的一部分也是整HTML文档可用来访问所有的元素1.常用属性referred与URl此处URl的使用方法想必大家都是了解的，而重点要讲的是referred属性它能返回载入当前文档的url 如果当前文档不是通过超链接访问的则会返回一个空值这就有点类似与看你是否是从官方入口进入的意思差不多如果不是指定的页面进入系统将会提示不能浏览或者跳转到别的页面。2.常用
复制链接

扫一扫