DOM & BOM

Array对象

小tips:

  • function $(id) {
    	return document.getElementById(id);
    }
    

初始化

var course = new Array ("C++程序设计","HTML开发基础","数据库原理","计算机网络");

var course = ["C++程序设计","HTML开发基础","数据库原理","计算机网络"];

属性和方法

  • length:数组对象长度
  • join(separator):把数组各个项用某个字符(串)连接起来,但并不修改原来的数组,默认用逗号分隔
  • pop():删除并返回数组的最后一个元素
  • push(newelement1,.,newelementX):可向数组的末尾添加一个或多个元素,并返回新的长度
  • shift():用于把数组的第一个元素从其中删除,并返回第一个元素的值
  • unshift(newelement1,newelement2,....,newelementX): 向数组的开头添加一个或更多元素,并返回新的长度
  • 其它方法:sort()、reverse()、toString()

Array案例

<script type="text/javascript">
    var course1 = new Array ("C++程序设计","HTML开发基础","数据库原理","计算机网络");
    var course2 = ["C++程序设计","HTML开发基础","数据库原理","计算机网络"];
    document.write("数组中的元素:<br>");
    //访问数组中的元素
    for (var i=0;i<=course1.length-1;i++ )
    {
        document.write(i+"-"+course1[i]+"&nbsp;&nbsp;");
    }
    document.write("<br><br>");
    //join方法的使用
    document.write(course2.join("-")+"<br>");//"-"分隔
    document.write(course2.join("+")+"<br>");//"+"分隔
    document.write(course2.join()+"<br>");  //默认
    //pop,push方法的使用
    document.write("<br>删除数组最后元素是"+course2.pop());  
    var s=course2.push("大学物理","高等数学");
    document.write("<br>课程数组2的长="+s);
    var course1 = new Array ("C++程序设计","HTML开发基础","数据库原理","计算机网络");
    //shift,unshift方法的使用
    var ss=course1.shift();
    document.write("<br>删除数组第一个元素是:"+ss);
    //在数组开始处插入新元素
    var s=course1.unshift("大学语文");//在IE中显示undefined	
    alert(course1.unshift("asfasf"));
    document.write("<br>数组元素分别:"+course1+"<br>数组的长度="+s); //在IE中用course1.length代替
</script>

Date对象

生成日期对象

var MyDate = new Date(); 
var MyDate = new Date(milliseconds);
var MyDate = new Date(string);
var MyDate = new Date(year,month,day,hours,minutes,seconds,milliseconds);
应用举例
var birthday = new Date(“December 17, 1991 03:24:00”); birthday = new Date(1991,11,17); 

方法名:

方法名 说明
getDate() 从Date对象返回一个月中的某一天(1~31)。
getDay() 从Date对象返回一周中的某一天(0~6)。
getMonth() 从Date对象返回月份(0~11)。(一般+1)
getFullYear() 从Date对象以四位数字返回年份。
getHours() 返回Date对象的小时(0~23)。
getMinutes() 返回Date对象的分钟(0~ 59)。
getSeconds() 返回Date对象的秒数(0~ 59)。
getMilliseconds() 返回Date对象的毫秒(0~999)。
getTime() 返回至今的毫秒数。

日期的调整与转换

today.toString():把Date对象转换为字符串
today.toLocaleString():转换为本地时间串
today.toDateString();//日期部分转为字符串
today.toTimeString();//时间部分转为字符串

调整日期对象的日期和时间

var today = new Date();
today.setDate(today.getDate()+5);  //将日期调整到5天以后,如果碰到跨年月,自动调整
today.setFullYear(2007,10,1);  //调整today对象到2007-10-1,月和日期参数可以省略

实例


<html >
  <head>
    <title>日期对象举例</title>
  </head>
  <body >
    <script type="text/javascript">
      var now = new Date();
      var y = now.getFullYear();
      var m = now.getMonth()+1;
      var d = now.getDate();
      var h = now.getHours();
      var mi = now.getMinutes();
      var s = now.getSeconds();
      if(m<10){m=“0”+m}  //处理成两位表示
      if(d<10){d="0"+d}
      if(h<10){h="0"+h}
      if(mi<10){mi="0"+mi;}
      if(s<10){s="0"+s;}
      var str = y+"年"+m+"月"+d+"日 "+h+":"+mi+":"+s;
      document.write(str);
</script>
</body>
</html>

Math

Math 对象提供多种算术常量和函数,执行普通的算术任务。可以直接通过“Math”名来使用它提供的属性和方法

  • Math.PI
  • Math.random()
  • Math.sqrt()
  • Math.max(x1,x2,[x3...])
  • Math.min()
  • Math.pow(x,y)
  • Math.log(x)
  • Math.ceil() # 上舍入
  • Math.floor()#下摄入
  • Math.exp()

案例

<html>
  <head><title>随机整数发生器举例</title>
  <script  type="text/javascript">
    function randomTest() {
      var m=parseFloat(document.Form1.minN.value);
      var n=parseFloat(document.Form1.maxN.value); 
      if(m>=n){                     
        alert("上限与下限相等,请返回重新输入!"); 
      }else{        
         var num=new Array();
         for(var i=0;i<10;i++) 
         { //产生 0-1 之间随机数,并通过系数变换到 m-n 之间
           num[i]=Math.round((Math.random()*(n-m)+m));                      
         } 
        document.getElementById("p1").innerHTML="随机数产生:"+num.join();
      }
    }
  </script>
</head>
<body>
  <h3 id="h34">随机整数发生器</h3>
  <form name="Form1">
   下限: <input type="text" name="minN" size="20" value=1><br> 
   上限: <input type="text" name="maxN" size="20" value=10><br/> 
   <input type="button" value="数学运算" onclick="randomTest();">
  </form>
  <p id="p1">随机产生数据:</p>
</body>
</html>

Number

  • 按指定进制将数值转换为字符串    
               toString(radix)
               var x=10;
               var s=x.toString(2)  ; //s=1010
               var s1=x.toString(8);   //s1=12
    
    
  • 将Nmber四舍五入为指定小数点的数字
         toFixed(n) :  固定小数点的位数
         如:    var x=10.24523;
                   var y=x.toFixed(2);  //y=10.25
    

String

  • 两种不同的定义字符串对象的方式

  • var  s1 = "Welcome to you!";var  s2 = new String("Welcome to you!");
    
  • str.length: 获取字符串的长度

  • charAt():获取字符串中指定位置的字符

  • index_of(searchvalue,fromindex):字串查找

  • lastIndex_Of(searchvalue,fromindex):字串查找

  • split():字符串的分割

  • 字符串的显示风格

  • big() :变大些; 
    small():变小些;
    fontsize():字体大小;
    fontcolor():字体颜色;
    bold() :变粗些;
    italics():斜体;
    sub():下标;
    up():下标
    
  • 大小写转换

  •  toLowerCase():把字符串转换为小写
     toUpperCase():把字符串转换为大写
    
    
    
    
    

Boolean

  • 参数为下列情况时返回true
    • 1、true、”true”、”false”、”dfaf a”
  • 参数为下列情况时返回flase
    • 0、null、false、NaN、””、空

DOM

  • document对象是客户端JavaScript最为常用的对象之一,在浏览器对象模型中,它位于window对象的下一层级
  • document对象包含一些简单的属性,提供了有关浏览器中显示文档的相关信息
  • document对象还包含一些引用数组的属性,这些属性可以代表文档中的表单、图象、链接、锚以及applet
  • document对象还定义了一系列的方法,通过这些方法,可以使JavaScript在解析文档时动态地将HTML文本添加到文档中

根据 DOM,HTML 文档中的每个成分都是一个节点。

具体的规定如下:

  • 整个文档是一个文档节点;
  • 每个 HTML 标签是一个元素节点;
  • 包含在 HTML 元素中的文本是文本节点;
  • 每一个 HTML 属性是一个属性节点;
  • 注释属于注释节点。

​```html

//文档节点 </head> <body> //元素节点 <p align="center"> //属性节点 getAttribute setAttribute content // 文本节点 </p> </body> ```

节点访问

  • 通过getElementById( )方法访问节点(得到的是唯一的一个控件)
  • 通过getElementsByName ( )方法访问节点(得到一个数组)
  • 通过getElementsByTagName ( )方法访问节点(标记名字

    不一定是一个,所以得到的依然是一个数组)

  • 通过form元素访问节点

创建和修改节点

实例1

<html>
<body>

<script type="text/javascript">

  function createP(){
    var op = document.createElement("p");
    var otext=document.createTextNode("hello world!!!!!!!!!!!!");
    op.appendChild(otext);
    document.forms[0].appendChild(op);
  }

</script>
<form name="form1">
<input type="button" value="创建节点" onClick="createP()"/>
</form>

</body>
</html>

实例2:运用document对象删除、插入和替换网页中的节点

<html>
    <head>
        <title>删除、插入、替换节点举例</title>
        <script language="javascript" type="text/javascript">
        function operateNode()
        {
            //将页面上的<p>元素删除
            var p = document.getElementsByTagName("p")[0];
            document.form1.removeChild(p);
            //将页面中的<h2>元素更换为<h5>元素并重新设置文本节点内容
            var h5 =document.createElement("h5");
            var otext = document.createTextNode("web前端开发技术!");
            h5.appendChild(otext);
            var h2 = document.getElementsByTagName("h2")[0];
            document.form1.replaceChild(h5,h2);
            //在hdb元素前插入一个<p>元素
            var op =document.createElement("p");
            var otext = document.createTextNode("中国的是世界的!");
            op.appendChild(otext);
            var hdb = document.getElementsByTagName("hdb")[0];
            document.form1.insertBefore(op,hdb);
        }
        </script>
    </head>
    <body>
        <form name="form1">
            <h2>javaScript程序设计</h2>
            <p>hello world!</p>
            <hdb>世界的也是中国的!</hdb><br>
            <input type="button" value="点击修改节点" onClick="operateNode()">
        </form>
    </body>
</html>

文档碎片

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素
提高页面效率


    var d1 = new Date();
    //创建十个段落,常规的方式
    for(var i = 0 ; i < 1000; i ++) {
        var p = document.createElement("p");
        var oTxt = document.createTextNode("段落" + i);
        p.appendChild (oTxt);
        document.body.appendChild(p);
    }
    var d2 = new Date();
    document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));


    //使用了createDocumentFragment()的程序
    var d3 = new Date();
    var pFragment = document.createDocumentFragment();
    for(var i = 0 ; i < 1000; i ++) {
        var p = document.createElement("p");
        var oTxt = document.createTextNode("段落" + i);
        p.appendChild(oTxt);
        pFragment.appendChild(p);
    }
    document.body.appendChild(pFragment);
    var d4 = new Date();
    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
  • innerText和innerHTML
    • 在DOM中有两个很重要的属性,这两个属性分别是innerText和innerHTML,通过这两个属性,可以更方便的进行文档操作。

    • test

    • innerText : test

    • innertHTML: test

<!--  edu_14_2_4.html -->
<html>
    <head>
        <title>innerText、innerHTML举例</title>
        <script type="text/javascript">
        function textGet()
        {
            var oDiv = document.getElementById("oDiv");
            var msg = "通过innerText属性获得:";
            msg+=oDiv.innerText;
            msg+="\n通过innerHTML属性获得: "
            msg+=oDiv.innerHTML;
            alert(msg);
        }
        </script>
    </head>
    <body onload="textGet()">
        <div id="oDiv" >
            <strong>web前端开发技术,不错!</strong>
        </div>
    </body>
</html>

document对象获取及设置节点属性方法的应用

<!--  edu_14-17.html -->
<html>
    <head>
        <title>获得、设置节点属性</title>
        <script type="text/javascript">
            function changeColor()
            {
                 var table = document.getElementById("myTable");
                 var color = table.getAttribute("bgcolor");
                 table.setAttribute("bgColor","red");
                 alert("颜色发生改变了!原来的颜色为"+color);
            }
        </script>
    </head>
    <body>
        <input type="button" value="更改颜色" onclick="changeColor()"><br>
        <table border="1" bgColor="#000fff" style="width:300px" id="myTable">
            <tr>
                <td>第一行,第一列;</td>
                <td>第一行,第二列;</td>
                <td>第一行,第三列;</td>
                <td>第一行,第四列;</td>
            </tr>
            <tr>
                <td>第二行,第一列;</td>
                <td>第二行,第二列;</td>
                <td>第二行,第三列;</td>
                <td>第二行,第四列;</td>
            </tr>
            <tr>
                <td>第三行,第一列;</td>
                <td>第三行,第二列;</td>
                <td>第三行,第三列;</td>
                <td>第三行,第四列;</td>
            </tr>
            <tr>
                <td>第四行,第一列;</td>
                <td>第四行,第二列;</td>
                <td>第四行,第三列;</td>
                <td>第四行,第四列;</td>
            </tr>
        </table>
    </body>
</html>

BOM

客户端浏览器这些预定义的对象统称为浏览器对象,它们按照某种层次组织起来的模型统称为浏览器对象模型(BOM)

window对象位于浏览器对象模型的顶层,是document、frame、location等其他对象的父类

实例

<html>

<head>
    <title>对话框举例</title>
    <script type="text/javascript">
        function dialogTest() {
            window.alert("欢迎访问本页面!!"); //此处直接alert()也可以
            var answer = confirm("1+1=2吗?");
            if (answer == true)
                alert("算术运算 1+1=2 成立!");
            else
                alert("算术运算 1+1=2 不成立!");
            var answer1 = prompt("算术运算题目  : 1+1 = ?", "请输入值");
            if (answer1 == 2)
                alert("恭喜您,你的答案正确! ");
            else if (answer1 == null)
                alert("对不起,您还没作答! ");
            else
                alert("对不起,您的答案错误! ");
        }

    </script>
</head>

<body onload="dialogTest()">
</body>

</html>

定时器

<!--  edu_14_3_2.html -->
<html>

<head>
    <title>状态栏移动举例</title>
    <script language="JavaScript" type="text/javascript">
        var TimerID;
        var dir = 1;
        var str_num = 0;
        //用于动态显示的目标字符串
        var str = "欢迎来到javascript世界!";
        //设定动态显示的状态栏信息
        function startStatus() {
            var str_space = "";
            str_num = str_num + 1 * dir;
            if (str_num > 50 || str_num < 0) {
                dir = -1 * dir;
            }
            for (var i = 0; i < str_num; i++) {
                str_space += " ";
            }
            window.status = str_space + str;
        }
        //状态栏滚动开始
        function MyStart() {
            TimerID = setInterval("startStatus();", 100);
        }
        //状态栏滚动结束,并更新状态栏
        function MyStop() {
            clearInterval(TimerID);
            window.status = "状态栏移动结束!";
        }

    </script>
</head>

<body>
    <br>
    <center>
        <p>单击对应的按钮,实现动态状态栏的滚动与停止!</p>
        <form name="MyForm">
            <input type="button" value="开始状态栏滚动" onclick="MyStart()"><br>
            <input type="button" value="停止状态栏滚动" onclick="MyStop()"> <br>
        </form>
    </center>
</body>

</html>

属性

方法

screen 对象

  • screen对象用于获取用户屏幕设置的相关信息,主要包括显示尺寸和可用颜色的数量信息。

history对象

在实际开发中,如下使用history方法:

history.back() //与单击浏览器后退按钮执行的操作一样

history.go(-2) //与单击两次浏览器后退按钮执行的操作一样

history.forward() //等价于点击浏览器前进按钮或调用history.go(1)。

Location 对象

location对象用来表示浏览器窗口中加载的当前文档的URL,该对象的属性说明了URL中的各个部分 。location对象的属性及方法

方法

posted @ 2018-06-11 23:25  pprp  阅读(180)  评论(0编辑  收藏  举报