【重學JS】鞏固基礎-day10-BOM瀏覽器對象模型

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰css

☆☆☆ 溫故而知新! 今天學習鞏固的js內容(BOM瀏覽器對象模型) !加油! ☆☆☆html

可做爲初學者的學習路線, 可參考一下, 學習進度也不是特別趕! 持續更新,web

用本身的理解, 簡單又全面歸納基礎知識點, 大部份內容爲白話文內容, 基礎中的基礎方便加深理解!數組

鞏固學習 JavaScript 基礎知識, 加深理解記憶, 打牢地基才能築高樓! 加油瀏覽器

如需更詳細瞭解學習- 推薦查看 MDN-JavaScript 文檔, (紅寶書/白皮書/藍皮書/..)進行學習進階!markdown

開始今天的學習吧! 認真對待!!app

一、梳理昨天學習知識點

數組 Arraydom
- 數組的操做方法：
- 數組去重
- 數組排序: 1. 冒泡 2. 選擇
- 數組新增功能 : forEach indexOf map filter reduce
string ：異步

操做方法：函數
- charAt
- charCodeAt
- String.fromCharCode
- indexOf lastIndexOf
- substr(start,length) sunstring(start,end)
- replace
- 字符串.split
- 數組.join
- trim()
- toLowerCase toUpperCase
Math
- random()
- Math.ceil()
- Math.floor() Math.round()

function rand(min, max) {
  return Math.round(Math.random() * (max - min) + min)
}
複製代碼

Date
- var d1 = new Date();
- var d2 = new Date("2018-09-08");
- 時間差 : ( d1.getTime()-d2.getTime() ) / 1000
- 時間設置：
  
  d1.setDate( d.getDate() + 3 );

二、BOM 瀏覽器對象模型 Browser Object Model

window 對象

2.1 window 對象的方法：

window 對象的全部屬性和方法調用時均可以省略 window.

全部的全局變量都是 window 對象的屬性

全部的全局函數都是 window 對象的方法

2.2 三個彈出對話框：

confirm() 彈出一個確認框點擊肯定返回 true 點擊取消返回 false
alert() 彈出一個警告框
prompt() 彈出一個輸入框

2.3 兩個定時器：

setInterval( 要執行的任務，間隔時間 ) 連續執行 clearInterval()

用法一：

setInterval(function(){},間隔時間)
用法二：

setInterval( 函數名 , 間隔時間 ) function 函數名(){ }
用法三 :

setInterval( "函數名()" , 間隔時間 )

setTimeout( 要執行的任務，間隔時間 ); 延時性定時器只執行一次自動中止

clearTimeout() 用法同 setInterval()
定時器特色：

定時器後面的代碼先執行定時器內部的代碼後執行（這種現象叫作異步）

var num = 10
setTimeout(function () {
  alert(num)
  undefined
  var num = 20
  alert(num)
  20
}, 1000)
alert(num)
10
複製代碼

2.4 一個彈出窗口：

open("url","_blank","窗口外觀")方法返回的是彈出的窗口對象

外觀： "width=200; height=200;left=30;top=90"

open() 方法彈出的窗口，子窗口和主窗口之間能夠互相操做（擴展）

close() 關閉窗口

window.opener 屬性獲取父窗口對象

三、文檔對象 document window.document

要作事先找人（找對象）

查找頁面元素：

document.getElementById() 查找的元素具備惟一性

querySelector( css 選擇器 ) 兼容問題

getElementsByTagName("標籤名") 標籤名

查找的元素是一個集合（僞數組）使用時必須加下標下標從 0 開始，找到一個元素也要加下標[0]
getElementsByClassName() 類名兼容問題「hh」
getElementsByName() 經過 name 值 "qx"
querySelectorAll(css 選擇器) 兼容問題 ".hh""#hh""h1"
document.body 查找 body
document.title 查找 title
document.head 查找 head
document.documentElement 查找文檔根節點至關於 html （沒有 document.html）

四、js 如何操做頁面元素

4.1 操做樣式：

使用方法:

obj.style.樣式 = 值
複製代碼

obj.style.cssText = 'width:200px;height:200px;background-color:red'

obj.className = '類名'
複製代碼

4.2 操做屬性：

obj.屬性 = 值

4.3 操做內容:

標籤：

innerHTML 能夠解析 html 標籤
innerText
outerHTML 操做對象自己（破壞了頁面結構）表單： value

五、location 對象地址對象

5.1 頁面跳轉：

location = "url"

location.href = "url" 設置頁面跳轉 獲取頁面地址欄信息 ： location.href

location.assign("url")

location.replace("url") 替換了當前頁面內容（沒法實現後退）

5.2 頁面刷新:

location.reload()

六、history 歷史記錄對象（瞭解）

前進： history.go(1) 或 history.forward()

後退： history.go(-1) 或 history.back()

刷新 : history.go(0)

預告: 加油, 追夢人

學習就是一個不斷進行的過程, 堅持下去, 定有收穫!

日積月累, 鞏固基礎, 早進大廠!

堅持很不容易, 堅持下來更不容易, 你真棒!

Calm Down & Carry On!