BOM,DOM

時間 2019-11-13

標籤 bom dom 欄目 HTML 简体版

原文原文鏈接

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

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

一.BOM對象

一些經常使用的Window方法：（在瀏覽器調試器的console裏面輸入下面這些屬性或者方法，就能看到對應的效果）node

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口 (只能關閉用js的window.open()打開的頁面，瞭解一下就好了)

1.history對象

history.forward()  // 前進一頁，其實也是window的屬性，window.history.forward()
history.back()  // 後退一頁

2.location對象

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面,就是刷新一下頁面

3.彈出框(瞭解)

alert("hello world")  #警告框
confirm("請點擊確認")   #確認框必須點確認才能下一步
prompt("請在下方輸入","你的答案")   #提示框

4.計時相關

定時器數組

setTimeOut()  一段時間以後執行某個內容,執行一次

var a = setTimeout(function f1(){confirm("are you ok?");},3000);
var a = setTimeout("confirm('xxxx')",3000);  單位毫秒

清除定時器瀏覽器

clearTimeout(a);

setInterval() 每隔一段時間執行一次,重複執行app

var b = setInterval('confirm("xxxx")',3000);

清除計時器dom

clearInterval(b);

二.DOM對象

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

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

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

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

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

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

JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應（鼠標點擊事件，鼠標移動事件等）

2.1查找標籤

想操做標籤須要先找到它 不多用jq有更好的操作

直接查找

document.getElementById           #根據ID獲取一個標籤
document.getElementsByClassName   #根據class屬性獲取（能夠獲取多個元素，因此返回的是一個數組）
document.getElementsByTagName     #根據標籤名獲取標籤合集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">are you ok?</div>
<div class="c1 c2">div2</div>


</body>
</html>

操做:

var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');

間接查找(jq有更好的)

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

操做:

var divEle = document.getElementById('d1');
找父級:divEle.parentElement;
找兒子們:divEle.children;
找第一個兒子:divEle.firstElementChild;
找最後一個兒子:divEle.lastElementChild;
找下一個兄弟:divEle.nextElementSibling;

2.2標籤操做

建立標籤:重點

var aEle = document.createElement('a');

添加標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">are you ok?
    <span id="s1">span1</span>
    <span id="s2">span2</span>
</div>
<div class="c1 c2">div2</div>


</body>
</html>

追加一個子節點（做爲最後的子節點）標籤裏面的最後一個子節點

var divEle = document.getElementById('d1')  #找到d1標籤
divEle.appendChild(aEle)  #插入到最後

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

var divEle = document.getElementById('d1'); 找到父級標籤div
var a = document.createElement('a');  建立a標籤
a.innerText = 'baidu';  添加文本內容
var span1 = document.getElementById('s1'); 找到div的子標籤

divEle.insertBefore(a,span1); 將a添加到span1的前面

刪除節點

示例: 刪除span2標籤
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);

替換節點：

somenode.replaceChild(newnode, 某個節點);
somenode是父級標籤，而後找到這個父標籤裏面的要被替換的子標籤，而後用新的標籤將該子標籤替換掉

2.3文本節點操做

獲取文本節點的值

var divEle = document.getElementById("d1")
divEle.innerText  #輸入這個指令，一執行就能獲取該標籤和內部全部標籤的文本內容
divEle.innerHTML  #獲取的是該標籤內的全部內容，包括文本和標籤

設置文本的值

var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';

2.4屬性操做

attribute操做

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比較規範的寫法 設置
divEle.getAttribute("age")  #查找
divEle.removeAttribute("age")  #刪除

// 自帶的屬性還能夠直接.屬性名來獲取和設置，若是是你自定義的屬性，是不能經過.來獲取屬性值的
imgEle.src
imgEle.src="..."

示例:
    <a href="http://www.baidu.com">百度</a>
    操做
var a = document.getElementsByTagName('a');
a[0].href;  獲取值
a[0].href = 'xxx'; 設置值

2.5獲取值操做

輸入框 input

獲取值
var inpEle = document.getElementById('username');
inpEle.value;  #獲取input輸入的值
設置值
inpEle.value = 'alexDsb';

select選擇框

獲取值
var selEle = document.getElementById('city');
selEle.value;
設置值
selEle.value = '1';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">are you ok?
    <span id="s1">span1</span>
    <span id="s2">span2</span>
</div>
<div class="c1 c2">div2</div>
用戶名:<input type="text" id="username">
<select name="city" id="city">
  <option value="1">北京</option>
  <option selected="selected" >上海</option>
  <option value="3">廣州</option>
  <option value="4">深圳</option>
</select>


</body>
</html>

2.6類操做

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

首先獲取標籤對象
標籤對象.classList; 標籤對象全部的class類值

標籤對象.classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加，toggle的意思是切換，有了就給你刪除，若是沒有就給你加一個


示例:
var divEle = document.getElementById('d1');
divEle.classList.toggle('cc2');  
var a= setInterval("divEle.classList.toggle('cc2');",30);

判斷有沒有這個類值的方法
var divEle = document.getElementById('d1'); 
divEle.classList.contains('cc1');

2.7css設置

1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可

設置值:
divEle.style.backgroundColor = 'yellow';
獲取值
divEle.style.backgroundColor;

2.8事件

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

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

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

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

簡單示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .cc1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div class="cc1 xx xx2" id="d1"></div>

<script>
    var divEle = document.getElementById('d1');
    divEle.onclick = function () {
        divEle.style.backgroundColor = 'purple';
    }
  
</script>
</body>
</html>

2.9綁定事件的方式

方式一：（已經不經常使用了，多數用方式二了）

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

方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
　　 //console.log(this)
    this.innerText="呵呵"; //哪一個標籤觸發的這個事件，this就指向誰
  }
</script>

</body>
</html>

例題城市聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市</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");
  //頁面一刷新就將全部的省份都添加到select標籤中
  for (var i in data) {
    var optionP = document.createElement("option"); //建立option標籤
    optionP.innerHTML = i; //將省份的數據添加到option標籤中
    p.appendChild(optionP);//將option標籤添加到select標籤中
  }
  //只要select中選擇的值發生變化的時候，就能夠觸發一個onchange事件，那麼咱們就能夠經過這個事件來完成select標籤聯動
  p.onchange = function () {
    //1.獲取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是當前選擇的option標籤的索引位置，this.options是獲取全部的option標籤，經過索引拿到當前選擇的option標籤對象，而後.innerHTML獲取對象中的內容，也就是省份
    //還能夠這樣獲取省：var pro = this.value;
    var citys = data[pro]; //2. 經過上面得到的省份去data裏面取出該省對應的全部的市
    // 3. 清空option
    c.innerHTML = ""; //清空顯示市的那個select標籤裏面的內容
　　

    //4.循環全部的市，而後添加到顯示市的那個select標籤中
    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>

相關標籤/搜索

每日一句

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