JavaScript , BOM&DOM

時間 2019-12-07

標籤 javascript bom&dom bom dom 欄目 JavaScript 简体版

原文原文鏈接

1 從JavaScript來看瀏覽器和HTML文檔html

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

　　全部操做是對於window對象的直接操做瀏覽器

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

　　全部操做時對於document對象的操做函數

　　Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，this

　　能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。spa

2 window對象的具體屬性和函數操作系統

　　1 全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。code

　　2 全局變量是 window 對象的屬性。全局函數是 window 對象的方法。orm

　　經常使用的Window方法：

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口

　　window應該知道的子對象：

　　navigator對象：經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息

avigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

　　screen對象：屏幕對象，

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

　　history對象對象包含瀏覽器的歷史，但咱們沒法查看具體的地址

history.forward()  // 前進一頁
history.back()  // 後退一頁

　　location對象：window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面

　　彈出框，警告框、確認框、提示框。

　　警告框：window.alert("嚇你一跳哦！") //單向接受信息

　　確認框：window.confirm("想不想來一發，請在下面輸入你的答案") //能夠有肯定和取消選擇回饋

　　提示框：window.prompt("你是誰") //能夠回饋文本信息

　 * 計時事件

　　setTimeout() 讓一個動做延遲一段時間後運行

　　僞代碼：var t=setTimeout("JS語句",毫秒)

　　setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。這個值是指在這個window對象中timeout()的一個標識，數據類型爲number。

　　假如你但願取消這個 setTimeout()，就要用到上面那個值。

　　clearTimeout(); 按照標識的值取消對應計時事件，注意下次在運行新的setTimeout(),會按順序建立一個新的標識值。

　　clearInterval()，var t=setTimeout("JS語句",毫秒)；setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

　　clearInterval()

　　clearInterval() 方法可取消由 setInterval() 設置的 Interval()。方法同上

　　實例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<P>第一個例子定時器</P>
<input id='checkTime'type="text" value=""></input>
<input id='begin' type="button" value="開始" onclick="timeGo()"></input>
<input id='stop' type="button" value="結束" onclick="timeStop()">
<script>
    var TimeInterVal;
    function catTime() {
    var Now = new Date();
    STime = Now.toLocaleString();
    return STime;
}
function timeGo() {
    if (TimeInterVal===undefined ){
        TimeInterVal = setInterval("document.getElementById(\"checkTime\").value =catTime()", 1000);
    }
}

function timeStop() {
    clearInterval(TimeInterVal);
    TimeInterVal=null;
}
</script>
</body>
</html>

3 DOM,document對象

　　DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

　　當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

　　HTML DOM 模型被構造爲對象的樹。

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

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

1 捕獲節點

　　直接捕獲；

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

　　 間接捕獲：

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

2 節點的建立，插入，移除，以及事件相關

　　建立節點：createElement(標籤名)，實例：var divEle = document.createElement("div");

　　添加子節點：　

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

　　somenode.appendChild(newnode)；

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

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

　　刪除子節點：somenode.removeChild(要刪除的節點)

　　替換子節點：somenode.replaceChild(newnode, 某個節點);

　　填充節點文本：

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

填充節點內容：　

　　divEle.innerHtml="<p>2</p>"
　
對於標籤節點的屬性操做

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

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

class屬性值的增刪改查

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

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

style值的修改：obj.style.backgroundColor="red"；

　　JS操做style屬性修改的規律：

　　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

事件

　HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。

　　經常使用事件：

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

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

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

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

綁定方式

1 在標籤中引用js的函數，如

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

注意：

this是實參，表示觸發事件的當前元素。函數定義過程當中的ths爲形參

this表示當前環境，

2 在js函數中找到標籤，而後添加動做

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

相關標籤/搜索

javascript...function

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript , BOM&DOM

* 計時事件

1 捕獲節點

2 節點的建立，插入，移除，以及事件相關

class屬性值的增刪改查

事 件

經常使用事件：

綁定方式

　 * 計時事件

事件

　　經常使用事件：