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