JavaScript入门指南---（四）、DOM对象与内置对象

本文链接：https://blog.csdn.net/android_zyf/article/details/64122889

原创文章，转载请注明出处：http://blog.csdn.net/android_zyf/article/details/64122889

什么是DOM对象来着?

当页面被加载或显示时,浏览器会在内部创建一个包含页面及其全部元素的内部表示体系,这就是DOM.
Java中的对象,是对事物的抽象.JavaScript中的DOM是对页面及其全部元素的抽象.
当操作DOM对象时,也就操作了页面中的对应元素.

一,网页与用户的交互的实现方式

alert()方法
alert是警告,提示的意思,会弹出一个信息对话框,该对话框会显示一些信息和一个”确定”按钮.
alert方法接收字符串类型的参数.
alert无返回值.
confirm()方法
confirm是确定的意思,也会弹出一个对话框,显示一些消息.但是confirm方法弹出的对话框,有”确定”,”取消”两种选择,而不是只有一个”确定”按钮,当用户点击了任意一个按钮时,都会关闭对话框,让脚本继续执行.
confirm方法接收字符串类型的参数.
confirm有返回值,用户点击了确定,返回真,用户点击了取消,则返回假.
所以可以得到用户点击后返回的值,来更改页面中的内容.
下面是一个使用confirm方法的示例.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Confirm函数示例</title>
    <script type="text/javascript">

    // 声明一个带有一个参数的函数
    function showConfirm(message) {
      var result = "用户点击了:";
      // 将参数传递进confirm函数中
      // 这时候,需要注意的时,confirm函数是由返回值的
      // 那么return 后面的内容,实际是confirm执行完毕后的结果(返回值)
      // return又将局部变量result与confirm的返回值拼接后返回
      // 也就是showConfirm方法的返回值了
      return result + confirm(message);
    }

    </script>
  </head>
  <body>

    <!-- 这里用一个alert显示showConfirm的返回值结果 -->
    <input type="button" name="confirm" value="显示Confirm" onclick="alert(showConfirm('Are u a single dog ?'))">

  </body>
</html>

confirm示例
3. prompt()方法
prompt是打开模态对话框的另一种方式,它允许用户输入信息.
用户输入的信息,会通过prompt的返回值返回.
那么如果用户没有输入信息就点击了确定或取消的话怎么办?
prompt还支持第二个参数,第二个参数是默认值,也就是说如果用户没有输入任何内容,那么prompt的返回值就是第二个参数.
(是不是感觉和java中的重载很像?是不是感觉发现了新大陆,不好意思咱特么的错了,js是不支持重载的,好奇可以查一查,不过最好是先不求甚解的撸一遍)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prompt函数示例</title>
    <script type="text/javascript">
    // message参数,是要提示的内容
    // 返回值会将prompt函数的返回值返回
    // 当用户点击了确定时,若用户输入了内容,那么prompt的返回值是用户输入的内容
    //                若用户没有输入内容,那么prompt的返回值是默认的信息zyf
    // 当用户点击了取消或按了esc时,prompt的返回值为null
      function showPrompt(message) {
        var result = "你好:";
        return result + prompt(message,"zyf");
      }
    </script>
  </head>
  <body>
<!-- 需要注意的是,在调用函数像函数中传值的时候,要加上单引号!!!! -->
    <input type="button" name="name" value="点我显示prompt" onclick="alert(showPrompt('请输入你的姓名:'))">

  </body>
</html>

prompt示例

注:JS在大多情况下使用null表示空值,作为数值使用时,它代表0;作为字符串使用时,它代表字符串”“,作为布尔值使用时,它代表false

二,根据id选择元素

如果想从HTML页面里选择某个特定id的元素,我们只需要把相应元素的id作为参数来调用document对象的getElementById()方法,它就会返回特定id的页面元素所对应的DOM对象.
示例代码:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>获得页面特定的元素</title>
    <script type="text/javascript">
    // 定义一个方法,该方法会返回document对象调用getElementById方法返回的div对象的innerHTML属性
    // innerHTML属性就是div标签中的内容
      function getDiv() {
        return document.getElementById('firstDiv').innerHTML;

      }
    </script>
  </head>
  <body>
    <!-- 当点击button的时候,将getDiv的返回值通过alert显示出来 -->
    <input type="button" name="getFirst" value="点击获得第一个Div的信息" onclick="alert(getDiv())" />
    <div id="firstDiv" title="我是测试">
        你好,我是button下面的div标签中的内容,我的title属性是:我是测试
    </div>
  </body>
</html>

获得元素

注:设置id属性时,要保证唯一性

innerHTML属性

innerHTML属性,可以读取或设定页面元素内部的HTML内容.
使用示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>InnerHTML示例</title>
    <script type="text/javascript">
    // 定义一个方法,根据id找到元素,将参数content设置为给元素显示的内容
      function setHtml(elementId,content) {
        document.getElementById(elementId).innerHTML = content;

      }
    </script>
  </head>
  <body>
    <input type="button" name="button1" value="点我改变下面的内容" onclick="setHtml('secondDiv','我是更改后的内容')">

    <div id="secondDiv">
      我是之前的内容

    </div>

  </body>
</html>

InnerHTML示例

三,访问浏览器历史记录(history对象)

在js中,浏览器的历史记录是以window.history对象代表的,它基本上就是访问过的URL列表,通过这个对象的方法,可以使用该列表(无法获得列表中的URL,只是可以使用).
这个对象只有一个熟悉,就是它的长度length,表示用户访问过的页面的数量.
　　window.history.length
这个对象有三个方法:
forward()和backward()方法相当于点击浏览器的”前进”和”后退”,可以访问历史列表中的下一个或上一个页面.
go()方法:
　　go()方法可以接收一个整形参数,正值代表前进,负值代表后退,数字表示目标位置.
　　go(3);前进3个页面.
　　go(-2);后退两个页面.
　　go(‘demo’):该方法也可以接收字符串作为参数,访问历史记录列表中第一个匹配的URL.

四,location对象

location对象,包含当前加载页面的URL信息(注意是当前加载的).
页面URL的各个组成部分:
对应:
http://www.demo.com:8888/tools/display.js?id=666#list

location对象的属性

属性	含义
location.href 链接	‘http://www.demo.com:8888/tools/display.js?id=666#list’
location.protocol 协议	‘http’
location.host 服务器地址	‘www.demo.com:8888’
location.hostname 主机名称	‘www.demo.com’
location.port 端口号	‘8888’
location.pathname 路径	‘tools/display.js’
location.search 拼接的字段	‘?id=666’
location.hash 哈希值	‘#list’

使用location对象导航

使用location对象可以帮助用户导航至新页面.
* 使用href属性访问:打开新页面时,会将当期页面保存进历史记录
* location.href = “www.toOther.com”
* 使用replace(“URL”)方法:打开新页面时,会将历史记录中的当前页面的信息,替换成新页面的信息.也就是说不管是当前显示的,还是历史记录中,都不会含有当前页面的信息了.
* location.replace(“www.toOther.com”)

刷新(重新加载)

在浏览器中重新加载当前页面时,可以通过reload()方法来实现.
location.reload();//需要注意的时,如果浏览器中缓存了当前页面,那么执行reload时,浏览器会加载缓存的内容.
为了避免这一情况,可以在调用reload方法时,传入一个参数:true
location.reload(true);//传入参数true,就是让浏览器去服务器端请求数据了.

navigator对象(浏览器)

navigator对象,保存了浏览器程序本身的数据,也就是相当于navigator对象就是浏览器抽象后的对象.
使用navigator可以获得当前浏览器的信息,不过基本上用不到……..(所以就略过咯~)

五,日期和时间

Date对象用于处理日期和时间,不过在DOM中,并没有Date对象,使用Date对象时,都需要我们自己去创建一个(是new 一个吗?哈哈哈)

创建具有当前日期和时间的Date对象

创建一个包含日期和时间信息的Date对象的基本方式:
var demoDate = new Date();//fuck,真的是new了一个
变量demoDate就是一个Date对象,包含了 创建该对象时的日期和时间信息 . 可以通过不同的方法获取,设置和编辑Date对象中的数据.
* var year = demoDate.getFullYear();//四位数字表示的年份,比如2012
* var month = demoDate.getMonth();//数字表示的月份,0~11,0表示1月
* var date = demoDate.getDate();//日期,1~31
* var day = demoDate.getDay();//星期,0~6,0表示星期日
* var hours = demoDate.getHours();//小时,0~23
* var minutes = demoDate.getMinutes();//分,0~59
* var seconds = demoDate.getSeconds();//秒,0~59

创建具有指定日期和时间的Date对象

在创建Date对象时,给Date()传入参数,创建可以任意指定日期和时间的Date对象.
new Date(milliseconds) //自1970年1月1日起至今的毫秒数
new Date(dateString)
new Date(year,month,day,hours,minutes,seconds,milliseconds)
示例:
使用日期字符串:var d1 = new Date(“October 22, 1996 10:43:23”)
在使用分散的各部分参数时,位置靠后的参数是可选的,不确定指定的参数就会被设置为0:
var d2 = new Date(2000,1,2)//2000年1月2日 00:00:00
var d3 = new Date(2000,1,2,10,0,0)// 2000年1月2日 10:00:00
剩下好多方法需要的之后搜一下就可以了.
示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Date示例</title>
    <script type="text/javascript">
      function showTime() {
        var result = "";
        var now = new Date();
        result += "<br /> Date:"+now.getDate();
        result += "<br  /> Month:"+now.getMonth();
        result += "<br  /> Year:"+now.getFullYear();
        result += "<br  /> Hours:"+now.getHours();
        result += "<br  /> Minutes:"+now.getMinutes();
        result += "<br  /> Seonds:"+now.getSeconds();
        window.document.getElementById("showTimeDiv").innerHTML = result;
      }
    </script>
  </head>
  <body>

    <input type="button" name="button1" value="点我下面显示Date内容" onclick="showTime()">

    <input type="button" name="button2" value="点我刷新页面" onclick="location.reload()">

    <div id="showTimeDiv">

    </div>

  </body>
</html>

日期演示

六,Math对象

Math对象可以简化常见的一些运算情况.
Math对象是已经存在的,在使用的时候不需要创建,直接使用该对象的方法就可以.(看下面的演示你会想起类名.方法)
Math的常见方法.

方法	描述
ceil(n)	将n向上取整后返回
floor(n)	将n向下取整后返回
max(a,b,c)	返回最大自
min(a,b,c)	返回最小值
round(n)	返回n四舍五入后的整数
random	返回一个0-1之间的随机数

关于random:
　random只能取0-1之间的值,如果想要取0-100之间的怎么办?

function randomDemo(range) {
  return Math.round((Math.random() * range));
}

　random只能取0-1之间的值,如果想要取20-100之间的怎么办?

function randomDemo(from,to)() {
  return Math.round((Math.random() * to) - 20);
}

关键字:with

任何对象都可以使用关键字with,这里用Math类演示.
关键字with以对象作为参数.

//将Math作为参数传入
with(Math){
  //下面的三个方法,都是在调用Math对象的方法
  var random = random();
  var max = max(2,5,3);
  var round = round(88.8);
}