前端之JavaScript函式以及BOM、DOM操作等相關內容-57
阿新 • • 發佈：2020-09-23
1.函式
1.javascript中的變數提升和函式提升
#1、全域性作用域
#2、函式作用域
在ES6之前，js是沒有塊級作用域。
首先來解釋一下什麼是沒有塊級作用域?
2、什麼是變數提升?
在我們的js中，程式碼的執行時分兩步走的，1、解析 2、一步一步執行
那麼變數提升就是變數宣告會被提升到作用域的最頂上去，也就是該變數不管是在作用域的哪個地方宣告的，都會提升到作作用域的最頂上去。
上面這種寫法其實等價於下面這種寫法:
看幾個例子:
把上面的例子稍作改動:
結果就會大不一樣，
在看一個例子
3:什麼是函式提升?
輸出結果
生命不息 奮鬥不止
ƒ fn(){
console.log('生命不息 奮鬥不止');
}
生命不息 奮鬥不止
注意:函式宣告式，會將函式的宣告和定義一起提升到作用域的最頂上去。
如果是這種寫法:函式表示式宣告的函式
輸出結果
ƒ fn(){
console.log('生命不息 奮鬥不止');
}
ƒ fn(){
console.log('生命不息 奮鬥不止');
}
最後一個例子
輸出結果
ƒ fn(){
console.log('生命不息 奮鬥不止');
}
hello
最後總結
#1:所有的宣告都會提升到作用域的最頂上去。
#2:同一個變數只會宣告一次，其他的會被忽略掉。
#3:函式宣告的優先順序高於變數申明的優先順序，並且函式宣告和函式定義的部分一起被提升。
2.BOM與DOM操作
1.BOM操作
1.1 介紹
BOM：Browser Object Model，瀏覽器物件模型。BOM的結構圖：
從上圖可以看出來：
#1、DOM物件也是BOM的一部分
#2、window物件是BOM的頂層（核心）物件
需要注意的是
#1、在呼叫window物件的方法和屬性時，可以省略window，例如：window.document.location可以簡寫為document.location
#2、全域性變數也是windows物件的屬性，全域性的函式時window物件的方法
1.2 物件history、navigator、screen
#1、history物件包不包含瀏覽器的歷史
history.back() //後退一頁，等同於history.go(-1)
history.forward() //前進一頁，等同於history.go(1)
history.go(0) //0是重新整理
用的不多。因為瀏覽器中已經自帶了這些功能的按鈕：
#2、navigator物件包含了瀏覽器相關資訊。
navigator.appName // Web瀏覽器全稱
navigator.userAgent // 客戶端絕大部分資訊
navigator.platform // 瀏覽器執行所在的作業系統
#3、可以用screen物件得到可用的螢幕寬讀和高度
screen.availWidth //可用的螢幕寬度
screen.availHeight //可用的螢幕高度
1.3 localtion物件
location.href //獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() //重新載入頁面
1.4 彈出系統對話方塊
alert(1)是window.alert(1)的簡寫，因為它是window的子方法。
系統對話方塊有三種：
alert("egon警告你：人醜還不讀書，是找不到女朋友的"); //不同瀏覽器中的外觀是不一樣的
confirm("你真的要這麼做嗎小夥子"); //相容不好
prompt("輸入使用者名稱："); //不推薦使用# 示例
var x=confirm("你真到要這麼做嗎")
console.log(x)
var username=prompt("輸入使用者名稱：")
console.log(username);
1.5 開啟關閉視窗
#1、open("url地址","新視窗的位置_blank或者_self"，"新視窗的特徵")
window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
#2、close()關閉當前視窗
var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
x.close()
1.6 瀏覽器視窗內部的高度和寬度
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
1.7 定時器
#1.setTimeOut()
只在指定時間後執行一次，通常用於延遲執行某方法或功能，
//定時器 非同步執行
function say(){
alert("hello");
}
//使用方法名字執行方法
var t1 = setTimeout(hello,1000);
var t2 = setTimeout("hello()",3000); //使用字串執行方法
clearTimeout(t2); //去掉定時器
#2.setInterval()
在指定時間為週期迴圈執行，通常用於重新整理表單，對於一些表單的假實時指定時間重新整理同步，動畫效果等。
//實時重新整理時間單位為毫秒
var t3 = setInterval(say,3000);
var t4 = setInterval('say()',3000);
clearInterval(t3);
clearInterval(t4);
2.DOM操作
2.1 介紹
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）,DOM標準規定HTML文件中的每個成員都是一個節點(node)，HTML DOM樹如下圖
2.2 查詢節點
#1、直接查詢
document.getElementById #根據ID獲取唯一一個標籤
document.getElementsByClassName #根據class屬性獲取一系列標籤
document.getElementsByTagName #根據標籤名獲取一系列標籤
#2、間接查詢如下表
| 語法 | 含義 |
|---|---|
| childNodes | 獲取所有的子節點，除了元素還有文字等 |
| children | 獲取所有元素子節點，不包含文字 |
| parentNode | 獲取父節點 |
| previousSibling | 獲取上一個兄弟節點，包含文字 |
| previousElementSibling | 獲取上一個兄弟元素節點，不包含文字 |
| nextSibling | 獲取下一個兄弟節點，包含文字 |
| nextElementSibling | 獲取下一個兄弟元素節點，不包含文字 |
| firstChild | 獲取第一個子節點，包含文字 |
| firstElementChild | 獲取第一個子節點，不包含文字 |
| lastChild | 獲取最後一個子節點，包含文字 |
| lastElementChild | 獲取父元素最後一個元素節點。不包含文字 |
2.3 增加節點
#1、建立新節點
var divEle = document.createElement('div');
#2、追加一個子節點（放到最後）
somenode.appendChild(新的子節點)；
#3、插入一個子節點（插入到某個節點前）
somenode.insertBefore(新的子節點,某個節點);
2.4 刪除、替換節點
somenode.removeChild(要刪除的子節點)；
somenode.replaceChild(新的子節點, 某個子節點);
2.5 修改/設定節點屬性
#1、獲取文字節點的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
#2、設定文字節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
#3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
#4、自帶的屬性還可以直接.屬性名來獲取和設定
imgEle.src
imgEle.src="..."
2.6 獲取元素的值
#適用於input、select、textarea標籤
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value
2.7 class操作
var x=document.getElementById('div1')
x.classList.remove('col1')
x.classList.add('col1')
x.classList.contains('col1')
x.classList.toggle('col1')
2.8 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
2.9 事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時執行一段JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
1、常用事件
onclick 當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。
onfocus 元素獲得焦點。 // 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅影象完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
onselect 在文字框中的文字被選中時發生。
onsubmit 確認按鈕被點選，使用的物件是form。
2、繫結方式
#方式一：
<div id="div1" onclick="changeColor(this);">我是div，我去你妹的，點我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是實參，表示觸發事件的當前元素。
函式定義過程中的ths為形參。
#方式二：
<div id="div1">來，點亮我的綠</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function() {
this.style.backgroundColor = 'red';
}
</script>