Javascript之BOM和DOM

時間  2019-11-12
標籤 javascript bom dom 欄目 JavaScript 简体版
原文   原文鏈接

 

一.BOM和DOM概念html

1.概念java

　　JavaScript分爲 ECMAScript，DOM，BOM三部分。node

　　BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。數組

　　DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。瀏覽器

 

2.BOM和DOM的區別緩存

　　BOM 即瀏覽器對象模型，BOM沒有相關標準，BOM的最核心對象是window對象。javacsript是經過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，因爲BOM的window包含了document，window對象的屬性和方法是直接可使用並且被感知的，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。其中
DOM包含：window 
Window對象包含屬性：document、location、navigator、screen、history、frames
Document根節點包含子節點：forms、location、anchors、images、links

 

從window.document已然能夠看出，DOM的最根本的對象是BOM的window對象的子對象。而他們以前的最大區別：DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口。服務器

 

 

二.Windows對象cookie

　　全部瀏覽器都支持 window 對象，它表示瀏覽器窗口；全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員；全局變量是 window 對象的屬性；全局函數是 window 對象的方法。app

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：ide

window.document.getElementById("header");

與此相同：

document.getElementById("header");

 

Window對象方法：

瀏覽器窗口大小
innerHeight - 瀏覽器窗口的內部高度
innerWidth - 瀏覽器窗口的內部寬度

彈出框
alert() 警告框
prompt(); 提示框，提示用戶輸入信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認值，將文本框中的值做爲函數值返回
confirm()   確認框，彈出一個具備OK和Cancel按鈕的詢問對話框，返回一個布爾值

計時器相關
setInterval()   按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()    在指定的延時時間後來執行代碼
clearInterval() 取消setInterval()的設置
clearTimeout()  取消setTimeout() 的設置

其它
open()  打開新窗口
close() 關閉當前窗口
print() 打印當前窗口的內容
focus() 把鍵盤焦點給予一個窗口
blur()  把鍵盤焦點從頂層窗口移開
moveBy()    可相對窗口的當前座標把它移動到指定的像素
moveTo()    把窗口的左上角移動到一個指定的座標
resizeBy()  按照指定的像素調整窗口的大小
resizeTo()  把窗口的大小調整到指定的寬度和高度
scrollBy()  按照指定的像素值來滾動內容
scrollTo()  把內容滾動到指定的座標
window對象方法

 

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert("你看到了嗎？");
確認框

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("你肯定嗎？")

提示框

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("請在下方輸入","你的答案")
彈出框

 

經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)
舉個例子：

// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);
setInterval()

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)
返回值

一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)
舉個例子：

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);
計時相關

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04定時器練習</title>
</head>
<body>
<!--在input框裏顯示事件-->
<form action="">
    <input id="i1" type="text">
    <input id="i2" type="button" value="開始">
    <input id="i3" type="button" value="結束">
</form>
<script>
    function dateClock() {
        // 獲取當前時間
        var now = new Date();
        // 當前時間轉換成字符串形式
        var nowString = now.toLocaleString();
        // 查找id='i1'的標籤
        var i1Ele = document.getElementById('i1');
        // 將當前時間字符串形式賦值給i1Ele
        i1Ele.value = nowString;
    }
    //點開始讓時間動起來----每秒執行
    var startButton = document.getElementById("i2");
    var stopButton = document.getElementById("i3");
    var t;//聲明全局變量t

    dateClock(); //先執行函數，讓輸入框裏有時間顯示
    //點擊開始 執行
    startButton.onclick = function () {
        if (t===undefined){
            t = setInterval(dateClock,1000);
        }
    };
    //點擊結束 執行
    stopButton.onclick = function () {
        clearInterval(t);
        console.log(t);
        t = undefined;
    };
</script>
</body>
</html>
定時器示例

 

Window的子對象主要有以下幾個：

  • JavaScript document 對象
  • JavaScript frames 對象
  • JavaScript history 對象
  • JavaScript location 對象
  • JavaScript navigator 對象
  • JavaScript screen 對象

 

document對象方法：

document對象：其實是window對象的屬性，document == window.document爲true，是惟一一個既屬於BOM又屬於DOM的對象 
 
document.lastModified //獲取最後一次修改頁面的日期的字符串表示 
 
document.referrer //用於跟蹤用戶從哪裏連接過來的 
 
document.title //獲取當前頁面的標題，可讀寫 
 
document.URL //獲取當前頁面的URL，可讀寫 
 
document.anchors[0]或document.anchors["anchName"] //訪問頁面中全部的錨 
 
document.forms[0]或document.forms["formName"] //訪問頁面中全部的表單 
 
document.images[0]或document.images["imgName"] // 訪問頁面中全部的圖像 
 
document.links [0]或document.links["linkName"] //訪問頁面中全部的連接 
 
document.applets [0]或document.applets["appletName"] //訪問頁面中全部的Applet 
 
document.embeds [0]或document.embeds["embedName"] //訪問頁面中全部的嵌入式對象 
 
document.write(); 或document.writeln(); //將字符串插入到調用它們的位置
document對象

 

history對象方法：

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕向前相同

　　

location對象方法：

location對象：表示載入窗口的URL，也可用window.location引用它 
 
location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm 
 
location.portocol //URL中使用的協議，即雙斜槓以前的部分，如http 
 
location.host //服務器的名字，如www.wrox.com 
 
location.hostname //一般等於host，有時會省略前面的www 
 
location.port //URL聲明的請求的端口，默認狀況下，大多數URL沒有端口信息，如8080 
 
location.pathname //URL中主機名後的部分，如/pictures/index.htm 
 
location.search //執行GET請求的URL中的問號後的部分，又稱查詢字符串，如?param=xxxx 
 
location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1 
 
location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中 
 
location.replace("http:www.baidu.com"); //同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能經過back和forward訪問 
 
location.reload(true | false); //從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false
location對象

 

navigator對象方法：

navigator對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用，也可用window.navigator引用它 
 
navigator.appCodeName //瀏覽器代碼名的字符串表示 
 
navigator.appName //官方瀏覽器名的字符串表示 
 
navigator.appVersion //瀏覽器版本信息的字符串表示 
 
navigator.cookieEnabled //若是啓用cookie返回true，不然返回false 
 
navigator.javaEnabled //若是啓用java返回true，不然返回false 
 
navigator.platform //瀏覽器所在計算機平臺的字符串表示 
 
navigator.plugins //安裝在瀏覽器中的插件數組 
 
navigator.taintEnabled //若是啓用了數據污點返回true，不然返回false 
 
navigator.userAgent //用戶代理頭的字符串表示
navigator對象

 

screen對象方法：

screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它 
 
screen.width/height //屏幕的寬度與高度，以像素計 
 
screen.availWidth/availHeight //窗口可使用的屏幕的寬度和高度，以像素計 
 
screen.colorDepth //用戶表示顏色的位數，大多數系統採用32位 
 
window.moveTo(0, 0); 
 
window.resizeTo(screen.availWidth, screen.availHeight); //填充用戶的屏幕
screen對象

 

 三.DOM

 1.HTML DOM樹

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

  • 文檔節點(document對象)：表明整個文檔
  • 元素節點(element 對象)：表明一個元素（標籤）
  • 文本節點(text對象)：表明元素（標籤）中的文本
  • 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
  • 註釋是註釋節點(comment對象)　

 

JavaScript 能夠經過DOM建立動態的 HTML：

  • JavaScript 可以改變頁面中的全部 HTML 元素
  • JavaScript 可以改變頁面中的全部 HTML 屬性
  • JavaScript 可以改變頁面中的全部 CSS 樣式
  • JavaScript 可以對頁面中的全部事件作出反應

 

2.查找標籤

(1)直接查找

document.getElementById()    根據ID獲取一個標籤
document.getElementsByClassName()    根據class屬性獲取
document.getElementsByTagName    根據標籤名獲取標籤合集
document.getElementsByName()    根據name屬性名獲取

　　

(2)間接查找

parentElement            父節點標籤元素
children                 全部子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

　　

 3.節點操做

createElement()	建立節點
appendChild()	末尾添加節點，並返回新增節點
insertBefore()	參照節點以前插入節點，兩個參數：要插入的節點和參照節點
insertAfter()	參照節點以後插入節點，兩個參數：要插入的節點和參照節點
replaceChild()	替換節點，兩個參數：要插入的節點和要替換的節點(被移除)
removeChild()	移除節點
cloneNode()	克隆，一個布爾值參數，true爲深拷貝，false爲淺拷貝
importNode()	從文檔中複製一個節點，兩個參數：要複製的節點和布爾值(是否複製子節點)
insertAdjacentHTML()	
插入文本，兩個參數：插入的位置和要插入文本

"beforebegin",在該元素前插入
"afterbegin",在該元素第一個子元素前插入
"beforeend",在該元素最後一個子元素後面插入
"afterend",在該元素後插入

　　

建立節點

語法：

createElement(標籤名)

示例：

var divEle = document.createElement("div");

添加節點

語法：

追加一個子節點（做爲最後的子節點）

somenode.appendChild(newnode)；

把增長的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

示例：

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

刪除節點：

語法：

得到要刪除的元素，經過父元素調用該方法刪除。

somenode.removeChild(要刪除的節點)

替換節點：

語法：

somenode.replaceChild(newnode, 某個節點);

 

屬性節點

獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

 

attribute操做

複製代碼 
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."
複製代碼

 

獲取值操做

語法：

elementNode.value

適用於如下標籤：

  • .input   
  • .select
  • .textarea 
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

 

class的操做

className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

 

指定CSS操做

obj.style.backgroundColor="red"

JS操做CSS屬性的規律：

(1)對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

(2)對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

 

 4.事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

　　

綁定方式：

方式一：
<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
注意：
this是實參，表示觸發事件的當前元素。
函數定義過程當中的ths爲形參。

方式二：
<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

　　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05搜索框示例</title>
</head>
<body>
<input type="text" id="i1" value="華爲手機">
<input type="button" name="" id="i2" value="搜索">
<script>
    var i1Ele = document.getElementById("i1");
    i1Ele.onfocus=function () {
        // 獲取焦點 值變爲空
        this.value="";
    };
    i1Ele.onblur=function () {
        // 失去焦點後，先判斷值是否爲空，爲空賦值
        if (!this.value.trim()) {
            this.value="華爲手機";
        }
    }
</script>

</body>
</html>
搜索框示例 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06select聯動</title>
</head>
<body>

<select name="site" id="s1">
    <option value="000" selected>-請選擇地區-</option>
    <option value="010">北京</option>
    <option value="021">上海</option>
    <option value="023">重慶</option>
</select>

<select name="" id="s2">
    <option value="">-請選擇區縣-</option>
</select>

<script>
    var data = {"010":["昌平區","朝陽區","海定區"],"021":["浦東區","靜安區","閔行區"],"023":["渝北區","渝中區","江北區"]}
    // 給第一個s1綁定事件
    var s1Ele = document.getElementById("s1");

    s1Ele.onchange=function () {
        // 取到哪一個城市，把對應的市區賦值select框裏
        // 生成option標籤
        // 增長到select標籤
        console.log(this.value);

        // 把對應市的區縣填到第二個select框裏
        // 取到市多對應的區縣
        var areas = data[this.value];

        // 找到s2標籤
        var s2Ele = document.getElementById("s2");

        // 清空以前的所選的市
        s2Ele.innerHTML="<option value=\"\">-請選擇區縣-</option>";


        for (var i in areas) {
            var opEle = document.createElement("option");
            opEle.innerText = areas[i];
            // console.log(areas[i]);
            // 增長到select內部
            s2Ele.appendChild(opEle);
        }
    }
</script>

</body>
</html>
select聯動 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04定時器練習</title>
</head>
<body>
<!--在input框裏顯示事件-->
<form action="">
    <input id="i1" type="text">
    <input id="i2" type="button" value="開始">
    <input id="i3" type="button" value="結束">
</form>
<script>
    function dateClock() {
        // 獲取當前時間
        var now = new Date();
        // 當前時間轉換成字符串形式
        var nowString = now.toLocaleString();
        // 查找id='i1'的標籤
        var i1Ele = document.getElementById('i1');
        // 將當前時間字符串形式賦值給i1Ele
        i1Ele.value = nowString;
    }
    //點開始讓時間動起來----每秒執行
    var startButton = document.getElementById("i2");
    var stopButton = document.getElementById("i3");
    var t;//聲明全局變量t

    dateClock(); //先執行函數，讓輸入框裏有時間顯示
    //點擊開始 執行
    startButton.onclick = function () {
        if (t===undefined){
            t = setInterval(dateClock,1000);
        }
    };
    //點擊結束 執行
    stopButton.onclick = function () {
        clearInterval(t);
        console.log(t);
        t = undefined;
    };
</script>
</body>
</html>
定時器示例

 

 

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程