前端基礎之BOM和DOM

2022-10-11 05:00:15 字數 3126 閱讀 5247

bom(browser object model)是指瀏覽器物件模型,它使 j**ascript 有能力與瀏覽器進行「對話」。

dom (document object model)是指文件物件模型,通過它,可以訪問html文件的所有元素。

一、window的子物件:n**igator物件

n**igator.useragent  # 客戶端絕大部分資訊

n**igator.platform   # 瀏覽器執行所在的作業系統

二、location物件(#記住)

window.location 物件用於獲得當前頁面的位址 (url),並把瀏覽器重定向到新的頁面。

常用屬性和方法:

location.href # 獲取url

location.href="" # 跳轉到指定頁面

一、彈出框

可以在 j**ascript 中建立三種訊息框:警告框、確認框、提示框。

1、警告框

警告框經常用於確保使用者可以得到某些資訊。

當警告框出現後,使用者需要點選確定按鈕才能繼續進行操作。

用法:alert('不能')

2.確認框(了解即可)

確認框用於使使用者可以驗證或者接受某些資訊。

當確認框出現後,使用者需要點選確定或者取消按鈕才能繼續進行操作。

如果使用者點選確認,那麼返回值為 true。如果使用者點選取消,那麼返回值為 false。

語法:confirm('確定開啟嗎?')

3.提示框(了解即可)

提示框經常用於提示使用者在進入頁面前輸入某個值。

當提示框出現後,使用者需要輸入某個值,然後點選確認或取消按鈕才能繼續操縱。

如果使用者點選確認,那麼返回值為輸入的值。如果使用者點選取消,那麼返回值為 null。

語法:prompt(("請在下方輸入","你的答案"))

一、settimeout()

function f()

settimeout(f,3000) # 單位是毫秒,過3000毫秒在執行函式

# 清除定時器(關閉定時器):

let t = settimeout(f,5000)

cleartimeout(t) # 不會列印

二、cleartimeout()

function f()

setinterval(f,2000)

# 清除定時器(關閉定時器):

let t = setinterval(f,200)

clearinterval(t)

dom(document object model)是一套對文件的內容進行抽象和概念化的方法。 

當網頁被載入時,瀏覽器會建立頁面的文件物件模型(document object model)。

html dom 模型被構造為物件的樹。

dom標準規定html文件中的每個成分都是乙個節點(node):

文件節點(document物件):代表整個文件

元素節點(element 物件):代表乙個元素(標籤)

文字節點(text物件):代表元素(標籤)中的文字

屬性節點(attribute物件):代表乙個屬性,元素(標籤)才有屬性

注釋是注釋節點(comment物件) 

j**ascript 可以通過dom建立動態的 html:

j**ascript 能夠改變頁面中的所有 html 元素

j**ascript 能夠改變頁面中的所有 html 屬性

j**ascript 能夠改變頁面中的所有 css 樣式

j**ascript 能夠對頁面中的所有事件做出反應

直接查詢:

document.getelementbyid 根據id獲取乙個標籤

document.getelementsbyclassname 根據class屬性獲取

document.getelementsbytagname 根據標籤名獲取標籤合集

一、id查詢

d1d2

二、class屬性查詢

d1d2

三、標籤名查詢

d1d2

間接查詢用法:

parentelement 父節點標籤元素

children 所有子標籤

firstelementchild 第乙個子標籤元素

lastelementchild 最後乙個子標籤元素

nextelementsibling 下乙個兄弟標籤元素

previouselementsibling 上乙個兄弟標籤元素

一、父標籤查詢

dff span1

222

二、子元素查詢

span1

222

例子1:

例子2:

使用者名稱:

密碼:動畫

動漫 # 預設這個

用法:

classname 獲取所有樣式類名(字串)

classlist.remove(cls) 刪除指定類

classlist.add(cls) 新增類

classlist.contains(cls) 存在返回true,否則返回false

classlist.toggle(cls) 存在就刪除,否則新增

**:

div

繫結方法一:

點我第二種繫結方法:

點我

點我

點我

前端知識之BOM和DOM

window的子物件 了解 計時器相關 dom間接查詢 節點操作 新增節點 var imgele document.createelement img imgele.setattribute src var d1ele document.getelementbyid d1 刪除節點 替換節點 屬性節...

04 前端之BOM與DOM

目錄bom 瀏覽器物件模型 使用js操作瀏覽器 dom 文件物件模型 使用js操作前端頁面window.open 開啟新視窗 window.close 關閉當前視窗 history.forward 前進一頁 history.back 後退一頁 location.href 獲取url location...

前端基礎之BOM

bom簡介 bom browser object model 是指瀏覽器物件模型,它使 j ascript 有能力與瀏覽器進行 對話 bom操作 window.open 開啟新視窗 window.close 關閉當前視窗 history.forward 前進一頁 history.back 後退一頁 ...