前端知識之BOM和DOM

時間 2019-12-13

標籤前端知識 bom dom 欄目 HTML 简体版

原文原文鏈接

前端基礎之BOM和DOM

windw對象
- 指瀏覽器窗口，全部的瀏覽器都支持window對象
- 經常使用的window方法
  - window.innerHeight 瀏覽器窗口的內部高度
  - window.innerWidth 瀏覽器窗口的內部寬度
  - window.open() 打開新窗口
  - window.close() 關閉當前窗口
window的子對象瞭解
- navigator對象。screen對象，history對象javascript
- location對象css
  - window.location 對象用於獲取當親頁面的地址（URL），並把瀏覽器重定向到新的頁面
  - 經常使用屬性和方法
    - location.href 獲取URL（頁面地址）
    - location.href="URL" 跳轉到指定頁面
    - location.reload() 從新加載頁面
- 計時器相關html
  - 經過使用JavaScript，能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行，咱們稱之爲計時事件前端
  - 語法java
    - ```
    var t=setTimeout("JS語句",毫秒)
```
- ```
// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);
```
    - 每隔多少時間作某件事node
      - setInterval(函數,毫秒數)
      - clearIntercal(對應序號)

DOM

定義：是一套對文檔的內容進行抽象和概念化的方法瀏覽器

查找標籤

直接查找app

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

間接查找dom

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

節點操做

建立節點函數
- 語法：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操做
- 對於沒有中橫線的css屬性通常直接使用style.屬性名便可。
- ```
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
```
- 對含有中橫線的css屬性，將中橫線後面的第一個字母換成大寫便可
  - ```
  obj.style.marginTop
  obj.style.borderLeftWidth
  obj.style.zIndex
  obj.style.fontFamily
```

事件

事件的綁定方式

在標籤中寫屬性的方式綁定

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

經過js代碼綁定

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

什麼時候綁定事件：文檔加載完成以後在綁定
- window.onload = function(){}
- 把綁定事件的代碼寫到body標籤最下面的script中

經常使用事件

onclick
onfocus
onblur
onchange

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">

<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>