DOM & BOM

時間 2019-11-16

標籤 dom bom 欄目 HTML 简体版

原文原文鏈接

Array對象

小tips：javascript

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

初始化

var course = new Array ("C++程序設計","HTML開發基礎","數據庫原理","計算機網絡");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」名來使用它提供的屬性和方法java

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

兩種不一樣的定義字符串對象的方式web

var  s1 = "Welcome to you!";var  s2 = new String("Welcome to you!");

str.length: 獲取字符串的長度數據庫
charAt()：獲取字符串中指定位置的字符數組
index_of(searchvalue,fromindex)：字串查找瀏覽器
lastIndex_Of(searchvalue,fromindex)：字串查找網絡
split():字符串的分割app
字符串的顯示風格

big() ：變大些； 
small()：變小些；
fontsize()：字體大小；
fontcolor()：字體顏色；
bold() ：變粗些;
italics()：斜體；
sub()：下標；
up()：下標

大小寫轉換

toLowerCase()：把字符串轉換爲小寫
 toUpperCase()：把字符串轉換爲大寫

```

Boolean

參數爲下列狀況時返回true
- 一、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
//文檔節點

//元素節點

//屬性節點 getAttribute setAttribute
content // 文本節點

```

節點訪問

經過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>