前端--BOM和DOM

時間  2020-06-15
標籤 前端 bom dom 欄目 HTML 简体版
原文   原文鏈接

window對象

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

全部JavaScript全局對象、函數以及變量均自動成爲window對象的成員。node

全局變量是window對象的屬性。全局函數是window對象的方法。瀏覽器

HTMLDOM的document也是window對象的屬性之一。app

一些經常使用的window方法：ide

　　window.innerHeight　　瀏覽器窗口的內部高度函數

　　window.innerWidth　　瀏覽器窗口的內部寬度ui

　　window.open()　　　　打開新窗口this

　　window.close()　　　　關閉當前窗口spa

navigator對象（瞭解）操作系統

瀏覽器對象，經過這個對象能夠斷定用戶使用的瀏覽器，包含了瀏覽器相關信息。（能夠作假）

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

screen對象（瞭解）

屏幕對象屬性：

screen.availWidth　　可用的屏幕寬度

screen.availHeight　　可用的屏幕調度

history對象（瞭解）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

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

location對象

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

經常使用屬性和方法：

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

彈出框

能夠在JavaScript中建立三種消息框：警告框、確認框、提示框。

警告框：

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

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

語法 ：

alert ("看到了麼？");

確認框（瞭解）

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

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

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

語法：

confirm("你肯定嗎？")

提示框（瞭解）

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

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

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

語法：

prompt("請在下方輸入"，"你的答案");

計時相關

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

setTimeout()

語法：

var t=setTimeout("JS語句","毫秒")

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

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

第二個參數指示從當前起多少毫秒後招待第一個參數（100毫秒等於一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

例子：

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

setlnterval()

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

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

語法：

setInterval("JS語句",時間間隔)

返回值

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

clearlnterval()

clearlnterval()方法能夠取消由setinterval()設置的timeout

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

語法：

clearinterval(setinterval返回的ID值)

例子：

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

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定時器</title>
  <script>
    var intervalId;

    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }

    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>
定時器示例

DOM

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

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

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

HTML DOM樹

 

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

　　文檔節點（document對象）：表明整個文檔

　　元素節點（element對象）：表明一個元素（標籤）

　　文本節點（text對象）：表明元素（標籤）中的文本

　　屬性節點（attribute對象）：表明一個屬性，元素（標籤）纔有屬性

　　註釋是註釋節點（comment對象）

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

　　JavaScript可以改變頁面中的全部HTML元素

　　JavaScript可以改變頁面中的全部HTML屬性

　　JavaScript可以改變頁面中全部CSS樣式

　　JavaScript可以對頁面中的全部事件作出反應

查找標籤

1.直接查找

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

注意：涉及到DOM操做的JS代碼應該放在文檔的哪一個位置

2.間接查找

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

節點操做

1.建立節點

語法：createElement(標籤名)

示例：

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

2.添加節點

語法：

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

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.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  tetarea

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

事件

HTML4.0的新特性之一是有能力使用HTML事件觸發瀏覽器中的動做（action）,好比當用戶點擊某個HTML元素時啓動一段JavaScript。下面是一個屬性列表，這些屬性可插入HTML標籤來定義事件動做。

經常使用事件

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="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blurs()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blurs(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>
搜索框示例 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="province">
  <option>請選擇省:</option>
</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.options.length = 0;

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>
select聯動
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程