前端基礎之BOM與DOM操做
目錄php
BOM 和 DOM 是個啥？css
BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。html
DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。node
BOM操做
全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。windows
全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。瀏覽器
全局變量是 window 對象的屬性。全局函數是 window 對象的方法。app
接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。dom
一些經常使用的Window方法（windows 能夠省略）：函數
- window.innerHeight - 瀏覽器窗口的內部高度
- window.innerWidth - 瀏覽器窗口的內部寬度
- window.open() - 打開新的連接地址的窗口
- window.close() - 關閉當前窗口
innerHeight
1014
innerWidth
1161
open("https://www.baidu.com")
navigator對象
能夠斷定用戶使用的瀏覽器的一些信息。ui
- navigator.appName Web瀏覽器全稱
- navigator.appVersion Web瀏覽器廠商和版本的詳細字符串
- navigator.userAgent 客戶端絕大部分信息（重點）
- navigator.platform 瀏覽器運行所在的操做系統
navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36" navigator.platform "Win32"
screen對象
屏幕對象，不經常使用。
一些屬性：
- screen.availWidth - 可用的屏幕寬度
- screen.availHeight - 可用的屏幕高度
history對象
window.history 對象包含瀏覽器的歷史。
瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。
- history.forward() 前進一頁
- history.back() 後退一頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack()
{
window.history.back()
windows.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
localtion對象
window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
經常使用屬性和方法：
- location.href：獲取當前頁面的URL地址
- location.href="URL" ： 跳轉到指定的url頁面
- location.reload() ：從新加載當前url頁面
彈出框
能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。
警告框
警告框常常用於確保用戶能夠獲得某些信息。
當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。
語法：
alert("你看到了嗎？");
確認框（瞭解便可）
確認框用於使用戶能夠驗證或者接受某些信息。
當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。
若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。
語法：
confirm("你肯定嗎？")
提示框（瞭解便可）
提示框常常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。
若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。
語法：
prompt("請在下方輸入","你的答案")
計時
經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。
setTimeout()
var t=setTimeout("JS語句",毫秒)
setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。
第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。
clearTimeout()
clearTimeout(setTimeout_variable)
// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);
setInterval()
setInterval("JS語句",時間間隔)
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
clearInterval()
clearInterval(setinterval返回的ID值)
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);
小例子：
<script>
function func() {
alert(123)
}
function show() {
var t = setInterval(func,3000) //設置定時器，每三秒執行一次彈窗
function inner() {
clearInterval(t)
}
setTimeout(inner,9000) //設置9秒以後執行inner函數：清除定時器
}
show()
</script>
<p>在頁面顯示一個時鐘</p>
<p id="demo"></p>
<script>
var myVar=setInterval(myTimer,1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
DOM操做
DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造爲對象的樹。
DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：
- 文檔節點(document對象)：表明整個文檔
- 元素節點(element 對象)：表明一個元素（標籤）
- 文本節點(text對象)：表明元素（標籤）中的文本
- 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
- 註釋是註釋節點(comment對象)
JavaScript 能夠經過DOM建立動態的 HTML：
- JavaScript 可以改變頁面中的全部 HTML 元素
- JavaScript 可以改變頁面中的全部 HTML 屬性
- JavaScript 可以改變頁面中的全部 CSS 樣式
- JavaScript 可以對頁面中的全部事件作出反應
查找標籤
一般，經過 JavaScript，您須要操做 HTML 元素。
爲了作到這件事情，您必須首先找到該元素。有三種方法來作這件事：
- 經過 id 找到 HTML 元素
- 經過標籤名找到 HTML 元素
- 經過類名找到 HTML 元素
直接查找
- document.getElementById 根據ID獲取一個標籤
- document.getElementsByClassName 根據class屬性獲取
- document.getElementsByTagName 根據標籤名獲取標籤合集
間接查找
- parentElement 父節點標籤元素
- children 全部子標籤
- firstElementChild 第一個子標籤元素
- lastElementChild 最後一個子標籤元素
- nextElementSibling 下一個兄弟標籤元素
- previousElementSibling 上一個兄弟標籤元素
節點操做
建立節點
createElement
var divEle = document.createElement("div");
添加節點
追加一個子節點（做爲最後的子節點）
xxx.appendChild(newnode)；
把增長的節點放到某個節點的前邊。
xxx.insertBefore(xxx,某個節點);
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);
刪除節點
得到要刪除的元素，經過父元素調用該方法刪除。
xxx.removeChild(要刪除的節點)
替換節點
xxx.replaceChild(newnode, 某個節點);
屬性節點
獲取文本節點的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
設置文本的值
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
// 使用setAttribute 設置屬性值
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."
獲取節點值
適用於如下標籤：
- input
- select
- textarea
document.getElementById("i1").value
class屬性操做
- className 獲取全部樣式類名(字符串)
- classList.remove(cls) 刪除指定類
- classList.add(cls) 添加類classList.contains(cls) 存在返回true，不然返回false
- classList.toggle(cls) 存在就刪除，不然添加
var divEle = document.getElementsByTagName("div")
divEle[0].classList.remove("bg_green")
divEle[0].classList.add("bg_red")
divEle[0].classList.toggle("bg_red")
divEle[0].classList.toggle("bg_red")
指定CSS樣式操做
obj.style.backgroundColor="red"
var pEle = document.getElementsByTagName("p")[0]
pEle.style.color="red"
pEle.style.backgroundColor = "black"
pEle.style.fontSize = "48px"
事件
有能力使 HTML 事件觸發瀏覽器中的動做（action）
當符合某個條件下，自動觸發的動做/響應。
經常使用事件
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 // 練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證. onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onselect 在文本框中的文本被選中時發生。 onsubmit 確認按鈕被點擊，使用的對象是form。
onkeydown
<input type="text" onkeydown="func()">
<script>
function func() {alert("你在輸入框裏輸入了字符")}
</script>
onkeyup
<p>當用戶在輸入字段釋放一個按鍵時觸發函數。函數將字符轉換爲大寫。</p>
輸入你的名稱: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
onsubmit
<p>當提交表單是，觸發函數並彈出提示信息。</p>
<form action="demo-form.php" onsubmit="myFunction()">
輸入名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
function myFunction() {
alert("表單已提交");
}
</script>
綁定方式
<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</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id="d1">變色按鈕</button>
<script>
// 獲取按鈕標籤的id值，而後用toggle 對class屬性進行增刪增刪
document.getElementById("d1").onclick=function () {
document.getElementsByClassName("c1")[0].classList.toggle("bg_red")
}
</script>
</body>
</html>
input框輸入獲取焦點例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="xxxxxx" id="d1" required="required" >
<script>
document.getElementById("d1").onfocus=function () {
document.getElementById("d1").value=""
}
document.getElementById("d1").onblur=function () {
document.getElementById("d1").value="請再次輸入"
}
</script>
</body>
</html>
展現時間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">開始</button>
<button id="b2">結束</button>
<script>
// 先定義一個全局變量，用來存儲定時器
var t
function showTime() {
document.getElementById("d1").value = new Date().toLocaleString()
}
document.getElementById("b1").onclick = function () {
if (!t){t = setInterval(showTime,1000)}
}
document.getElementById("b2").onclick = function () {
clearInterval(t)
t = null
}
</script>
</body>
</html>
省市聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1">省：
<option value="--請選擇--" selected="selected"></option></select>
<select name="" id="s2">市：</select>
<script>
// 先定義省市列表
var data = {
"北京":["朝陽區","海淀區","昌平區"],
"山東": ["威海市", "煙臺市",'青島'],
"上海":["靜安區",'黃浦區','徐彙區']
}
// 循環這個省市列表中的key，建立option標籤，添加到第一個選項框中
for (let p in data){
// 建立一個一個的option標籤
var optEle = document.createElement("option")
// 設置標籤的文本和屬性值
optEle.innerText = p
optEle.vale = p
// 將建立好的option標籤添加到select框中
document.getElementById("s1").appendChild(optEle)
}
// onchange 當選項框中的內容發生變化的時候
document.getElementById("s1").onchange = function () {
// 根據用戶選擇的選項獲取具體的城市列表
var citylist = data[this.value]
// 用戶選擇第二次的時候，將citylist城市列表清空，否則會一直累加
document.getElementById("s2").innerHTML = ""
// 對城市列表進行for 循環，添加到第二個select框中
for (let i=0;i<citylist.length;i++){
var optEle = document.createElement("option")
// 設置標籤的文本和屬性值
optEle.innerText = citylist[i]
optEle.vale = citylist[i]
// 將建立好的option標籤添加到select框中
document.getElementById("s2").appendChild(optEle)
}
}
</script>
</body>
</html>
- 1. 前端基礎之BOM和DOM操做
- 2. 前端基礎之BOM和DOM
- 3. 前端基礎 之 BOM和DOM
- 4. 前端之BOM與DOM
- 5. 前端——BOM與DOM
- 6. 前端三劍客之 JavaScript (BOM操做和DOM操做)
- 7. DOM、BOM 操做
- 8. 前端基礎知識-DOM操做
- 9. javaScript的DOM與BOM操做
- 10. JavaScript基礎之BOM操做
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端基礎之BOM和DOM操做
- 2. 前端基礎之BOM和DOM
- 3. 前端基礎 之 BOM和DOM
- 4. 前端之BOM與DOM
- 5. 前端——BOM與DOM
- 6. 前端三劍客之 JavaScript (BOM操做和DOM操做)
- 7. DOM、BOM 操做
- 8. 前端基礎知識-DOM操做
- 9. javaScript的DOM與BOM操做
- 10. JavaScript基礎之BOM操做