摘要:方法可用的屏幕高度窗口可用的屏幕寬度瀏覽器表示的顏色位數(shù)用戶瀏覽器表示的顏色位數(shù)屏幕的像素高度屏幕的像素寬度對象返回前一個返回下一個返回某個具體頁面
事件
事件:鼠標(biāo)事件,鍵盤事件,進(jìn)度事件,表單事件,觸摸事件,拖拉事件,其他常見事件.GlobalEventHandler接口
DOM(文檔對象模型)是JavaScript操作網(wǎng)頁的接口,將網(wǎng)頁轉(zhuǎn)為一個樹狀結(jié)構(gòu),所有的節(jié)點都有借口.
DOM的最小單位是節(jié)點,節(jié)點的類型有七種且都繼承Node,Document(整個文檔樹的頂層節(jié)點),DocumentType(doctype標(biāo)簽),
Element(網(wǎng)頁的各種HTML標(biāo)簽),Attrbute(網(wǎng)頁元素的屬性),Text(標(biāo)簽之間或標(biāo)簽包含的文本),Commnet(注釋), DocumentFragment(文檔的片段).
瀏覽器原生提供document節(jié)點,代表整個文檔.網(wǎng)頁的第一個標(biāo)簽,作為根節(jié)點,其他節(jié)點有三種層級關(guān)系:父節(jié)點關(guān)系,子節(jié)點關(guān)系,同級關(guān)系.
DOM:nodeName:節(jié)點的名稱nodeValue節(jié)點的值nodeType:節(jié)點的類型.除根節(jié)點,所有節(jié)點都有:父節(jié)點,子節(jié)點,同級節(jié)點.
(1):子節(jié)點: childNodes:獲取子節(jié)點列表 firstChild:第一個節(jié)點 lastChild:最后一個節(jié)點 children: 元素的子節(jié)點 firstElementChild:第一個子元素節(jié)點 lastElementChild :最后一個節(jié)點
兄弟節(jié)點: previousSibling:前一個兄弟節(jié)點 nextSibling下一個兄弟節(jié)點 previousElementSibling:前一個兄弟元素節(jié)點. nextElementSibling :后一個兄弟元素節(jié)點.
創(chuàng)建節(jié)點: createElement() : 創(chuàng)建新的元素節(jié)點 createTextNode():創(chuàng)建一個新的文本節(jié)點
node_textContent : 獲取或設(shè)置元素節(jié)點的文本內(nèi)容 node_innerHTML :獲取或設(shè)置元素的HTML內(nèi)容
向上獲取:parentNode 獲取已知節(jié)點的父節(jié)點. parentElement和closest
向下獲取:querySelector() querySelectorAll() children firstchildren lastChildren chilNodes
兄弟元素: nextElementSibling prevliousElementSibling nextSibling previousSibling
2.document(4):
getElementsByName() : 返回帶有"指定名稱"的節(jié)點樹對象的"集合""==返回元素的數(shù)組.
getElementsByTagName() : 返回帶有指定”標(biāo)簽名的節(jié)點對象”的集合,返回的順序與在文檔中相同.
getElementById() : 獲取元素ID.
getElementsByClassName(classname) :返回所有指定class元素相同的元素.
document.querySelector("CSS選擇器") //返回的內(nèi)容始終找到的是HTML中指定的第一個元素.
document.querySelectorAll("CSS選擇器") // 函數(shù)返回所有元素,它找到匹配你提供的任何選擇器.
3.屬性操作(3):
獲取屬性 getAttribute() : 通過元素節(jié)點的屬性名稱獲取屬性的值.
設(shè)置屬性 setSttribue() : 創(chuàng)建或改變元素節(jié)點的屬性.
刪除屬性 removeAttribute : 通過元素節(jié)點的屬性名稱刪除節(jié)點屬性.
4.節(jié)點操作(8):
插入節(jié)點 appendChild() :在指定節(jié)點的最后一個子節(jié)點列表之后插入一個新的子節(jié)點
插入節(jié)點 insertBefore() : 在已有的子節(jié)點前插入一個新的子節(jié)點.
刪除節(jié)點 removeChild() : 刪除子節(jié)點列表的某個節(jié)點,刪除成功,返回被刪除的節(jié)點,否返回null.
復(fù)制節(jié)點 cloneNode 語法: 節(jié)點.cloneNode(true/flase). 復(fù)制當(dāng)前節(jié)點及其所有子節(jié)點 flase 僅復(fù)制當(dāng)前節(jié)點.
替換節(jié)點 replaceChild() : 實現(xiàn)子節(jié)點(對象)的替換,返回被替換對象的引用.
創(chuàng)建元素節(jié)點createElement:創(chuàng)建元素節(jié)點,此方法可返回一個Element對象.語法document.createElement(tagName).
創(chuàng)建文本節(jié)點 createTextNode : 創(chuàng)建新的文本節(jié)點,返回新創(chuàng)建的Text節(jié)點. 語法: document.createNode(data).
創(chuàng)建屬性節(jié)點createAttribute :創(chuàng)建屬性節(jié)點.語法: document.createAttribute(元素元素屬性).
5.文本操作(6):
insertData(offset,String) : 從offset指定位置插入string.
appendData(String) : 將string插入文本節(jié)點的末尾處.
deletaDate(offset,count) : 從offset起刪除count個字符.
replaceData(off,count,string) 從off將count個字符用string替代.
splitData(offset) 從offset起將文本分成兩個節(jié)點.
substring(offset,count) 返回由offset起的count個節(jié)點.
6.小操作
console.log(document.getElementsByTagName("*"));
console.log(document.all);
事件:所有的元素都有事件,為事件綁定函數(shù),元素事件發(fā)生,就會觸發(fā)對應(yīng)的函數(shù).
HTML與JS之間的交互通過事件來實現(xiàn),事件是文檔與瀏覽器窗口發(fā)生的一些特定的交互瞬間,每種動作:load,click等.
冒泡事件:由里向外,最里層的元素先執(zhí)行,然后冒泡到外層.
捕獲事件:由外到內(nèi),最外層的元素先執(zhí)行,然后傳遞到內(nèi)部.
只需修改 addEventListener的第三個參數(shù),true 為捕獲,false 為冒泡,默認(rèn)為冒泡
在頁首的腳本添加onload事件,可以使其延遲加載.等待DOM結(jié)構(gòu)完成之后,故最好將外部js腳本放在頁尾.
常見事件:
onclick 鼠標(biāo)單擊時觸發(fā)的事件 ondblclick 鼠標(biāo)雙擊時觸發(fā)的事件 onmouseover 鼠標(biāo)移動到某對象范圍的上方時觸發(fā)此事件
onmouseout 鼠標(biāo)離開某對象范圍時觸發(fā) onmousedown 鼠標(biāo)按下時觸發(fā)此事件 onmouseup 鼠標(biāo)按下后松開鼠標(biāo)時觸發(fā)此事件
onmousemove 鼠標(biāo)移動時觸發(fā)此事件
鍵盤事件:
onkeypress 鍵盤上的某個鍵被按下并且釋放時觸發(fā)此事件 onkeydown 鍵盤上某個按鍵被按下時觸發(fā)此事件
onkeyup 當(dāng)鍵盤上某個按鍵被按放開時觸發(fā)此事件
頁面相關(guān)事件:
onscroll 瀏覽器的滾動條位置發(fā)生變化時觸發(fā)此事件 onload 頁面內(nèi)容完成時觸發(fā)此事件
onbeforeunload 當(dāng)前頁面的內(nèi)容將要被改變時觸發(fā)此事件 onerror 出現(xiàn)錯誤時觸發(fā)此事件
onmove 瀏覽器的窗口被移動時觸發(fā)此事件 onresize 當(dāng)瀏覽器的窗口大小被改變時觸發(fā)此事件
onstop 瀏覽器的停止按鈕被按下時觸發(fā)此事件或者正在下載的文件被中斷 onunload 當(dāng)前頁面將被改變時觸發(fā)此事件
表單相關(guān)事件:
onfocus 當(dāng)某個元素獲得焦點時觸發(fā)此事件 onchange 當(dāng)前元素失去焦點并且元素的內(nèi)容發(fā)生改變而觸發(fā)此事件
onsubmit 一個表單被遞交時觸發(fā)此事件 onreset 當(dāng)表單中RESET的屬性被激發(fā)時觸發(fā)此事件
頁面編輯事件:
onbeforecopy 當(dāng)頁面當(dāng)前的被選擇內(nèi)容將要[復(fù)制]到瀏覽者系統(tǒng)的剪貼板前觸發(fā)此事件
onbeforecut 當(dāng)頁面當(dāng)前的被選擇內(nèi)容將要[剪切]到瀏覽者系統(tǒng)的剪貼板前觸發(fā)此事件
onbeforeeditfocus 當(dāng)前元素將要進(jìn)入[編輯]狀態(tài)
onbeforepaste 內(nèi)容將要從瀏覽者的系統(tǒng)剪貼板傳送[粘貼]到頁面中時觸發(fā)此事件
onbeforeupdate 當(dāng)瀏覽者[粘貼]系統(tǒng)剪貼板中的內(nèi)容時通知目標(biāo)對象
oncontextmenu 當(dāng)瀏覽者按下鼠標(biāo)右鍵出現(xiàn)菜單時或者通過鍵盤的按鍵觸發(fā)頁面菜單時觸發(fā)的事件
oncopy 當(dāng)頁面當(dāng)前的被選擇內(nèi)容被[復(fù)制]后觸發(fā)此事件 oncut 當(dāng)頁面當(dāng)前的被選擇內(nèi)容被剪切時觸發(fā)此事件
onpaste 當(dāng)內(nèi)容被粘貼時觸發(fā)此事件 onselect 當(dāng)文本內(nèi)容被選擇時的事件
onselectstart 當(dāng)文本內(nèi)容選擇將開始發(fā)生時觸發(fā)的事件ondrag 當(dāng)某個對象被拖動時觸發(fā)此事件 [活動事件]
ondragdrop 一個外部對象被鼠標(biāo)拖進(jìn)當(dāng)前窗口或者幀
ondragend 當(dāng)鼠標(biāo)拖動結(jié)束時觸發(fā)此事件,即鼠標(biāo)的按鈕被釋放了
ondragenter 當(dāng)對象被鼠標(biāo)拖動的對象進(jìn)入其容器范圍內(nèi)時觸發(fā)此事件
ondragleave 當(dāng)對象被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
ondragover 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
ondragstart 當(dāng)某對象將被拖動時觸發(fā)此事件 ondrop 在一個拖動過程中,釋放鼠標(biāo)鍵時觸發(fā)此事件
onlosecapture 當(dāng)元素失去鼠標(biāo)移動所形成的選擇焦點時觸發(fā)此事件
數(shù)據(jù)綁定:
onafterupdate 當(dāng)數(shù)據(jù)完成由數(shù)據(jù)源到對象的傳送時觸發(fā)此事件
oncellchange 當(dāng)數(shù)據(jù)來源發(fā)生變化時
ondataavailable 當(dāng)數(shù)據(jù)接收完成時觸發(fā)事件
ondatasetchanged 數(shù)據(jù)在數(shù)據(jù)源發(fā)生變化時觸發(fā)的事件
ondatasetcomplete 當(dāng)來子數(shù)據(jù)源的全部有效數(shù)據(jù)讀取完畢時觸發(fā)此事件
onerrorupdate 當(dāng)使用onBeforeUpdate事件觸發(fā)取消了數(shù)據(jù)傳送時,代替onAfterUpdate事件
onrowenter 當(dāng)前數(shù)據(jù)源的數(shù)據(jù)發(fā)生變化并且有新的有效數(shù)據(jù)時觸發(fā)的事件
onrowexit 當(dāng)前數(shù)據(jù)源的數(shù)據(jù)將要發(fā)生變化時觸發(fā)的事件
onrowsdelete 當(dāng)前數(shù)據(jù)記錄將被刪除時觸發(fā)此事件
onrowsinserted 當(dāng)前數(shù)據(jù)源將要插入新數(shù)據(jù)記錄時觸發(fā)此事件
外部事件:
onafterprint 當(dāng)文檔被打印后觸發(fā)此事件 onbeforeprint 當(dāng)文檔即將打印時觸發(fā)此事件
onfilterchange 當(dāng)某個對象的濾鏡效果發(fā)生變化時觸發(fā)的事件 onhelp 當(dāng)瀏覽者按下F1或者瀏覽器的幫助選擇時觸發(fā)此事件
onpropertychange 當(dāng)對象的屬性之一發(fā)生變化時觸發(fā)此事件 onreadystatechange 當(dāng)對象的初始化屬性值發(fā)生變化時觸發(fā)此事件
BOM:瀏覽器對象模型.瀏覽器內(nèi)置JavaScript腳本語言,也就是內(nèi)置JS引擎.提供各種借口.讓JS控制瀏覽器各種功能.
location用于存儲當(dāng)前頁面URL信息的對象.
方法: reload(): 無參數(shù),重新載入當(dāng)前頁面,也可以location=location.
Navigator 對象包含有關(guān)瀏覽器的信息
方法: appCodeName:瀏覽器名字符串表示 appName:返回瀏覽器的名稱 appVersion:返回瀏覽器的平臺和版本信息 platform:返回運行瀏覽器的操作系統(tǒng)平臺 userAgent 返回由客戶機發(fā)送服務(wù)器的user-agent頭部的值
screen對象用于獲取用戶的屏幕信息。
方法: availHeight:可用的屏幕高度. availWidth:窗口可用的屏幕寬度. colorDepth:瀏覽器表示的顏色位數(shù). pixelDepth:用戶瀏覽器表示的顏色位數(shù). height:屏幕的像素高度. width:屏幕的像素寬度.
history對象: back()返回前一個url forward()返回下一個url go(+1/-1)返回某個具體頁面.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/101755.html
摘要:前端一種新一代高性能全棧開發(fā)實踐背景本項目將使用配合最簡單的邏輯來展示一個基于的全新一代高性能全棧開發(fā)實踐的為什么是對于為何不是等著名框架,或許可能很多人會產(chǎn)生疑惑,本身和非常的相似,而它的出現(xiàn),不僅是大大改進(jìn)過去時代性能低下通病,外加配 SanicCRUD-vue Sanic + 前端MVVM 一種新一代Python高性能全棧開發(fā)實踐showImg(https://segmentfa...
摘要:前端一種新一代高性能全棧開發(fā)實踐背景本項目將使用配合最簡單的邏輯來展示一個基于的全新一代高性能全棧開發(fā)實踐的為什么是對于為何不是等著名框架,或許可能很多人會產(chǎn)生疑惑,本身和非常的相似,而它的出現(xiàn),不僅是大大改進(jìn)過去時代性能低下通病,外加配 SanicCRUD-vue Sanic + 前端MVVM 一種新一代Python高性能全棧開發(fā)實踐showImg(https://segmentfa...
摘要:前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂,盡量保持不重復(fù)沖突,盡量不要用。我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來的名稱,會生成。 前端編碼規(guī)范之:Git使用規(guī)范 前端編碼規(guī)范之:樣式(scss)編碼規(guī)范 前端編碼規(guī)范之:HTML結(jié)構(gòu)規(guī)范 前端編碼規(guī)范之:Vue最佳實踐 前端編碼規(guī)范...
摘要:異步最佳實踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字,讀完需 8 分鐘,速讀需 2 分鐘。翻譯自...
閱讀 2048·2021-11-22 15:33
閱讀 3058·2021-11-18 10:02
閱讀 2686·2021-11-08 13:16
閱讀 1706·2021-10-09 09:57
閱讀 1448·2021-09-30 09:47
閱讀 2068·2019-08-29 13:05
閱讀 3128·2019-08-29 12:46
閱讀 1066·2019-08-29 12:19