DOM
JS的組成
ECMAScript js的基礎語法
DOM 文檔對象模型
BOM 瀏覽器對象模型
DOM
Document Object Model(文檔對象模型)
學習DOM就是學習封裝好的操作頁面的API(應用程序接口)邻储，Application programming interface 就是一些封裝好的方法
DOM：文檔對象模型(Document Object Model)牛柒，又稱為文檔樹模型。是一套操作HTML和XML文檔的API
DOM是由哪些部分組成的吗冤？
首先是由節(jié)點組成的呐馆，節(jié)點又分以下幾部分：
元素 屬性 文本 注釋
1纽谒、獲得頁面元素的方式
- document.getElementById() 通過標簽的Id獲得的是唯一的頁面標簽對象
var li2 = document.getElementById("li2"); //通過id的方式獲得頁面中的標簽，是唯一的一個對象
- document.getElementsByTagName() 通過標簽(元素)名
var lis = document.getElementsByTagName("li"); // 通過標簽的方式獲得所有的li元素,是一個標簽對象的數(shù)組
- document.getElementsByClassName() 通過標簽的類名:在JS中不推薦使用這種方式妄壶，因為有兼容性的問題
var divs = document.getElementsByClassName("box"); // 通過類名的方式獲得的也是標簽對象的數(shù)組
- H5的獲取元素節(jié)點： document.querySelector("")
- H5的獲取元素節(jié)點： document.querySelectorAll("")
注意：DOM對象的屬性和標簽的屬性幾乎是一模一樣的，用DOM的方法獲得的標簽對象就是DOM對象
2键耕、獲取元素后的一些操作
獲取元素內的內容
textContent
innerHTML
區(qū)別：textContent與innerHTML方法類似會返回對象節(jié)點下所有的文本內容寺滚，但是textContent返回的內容只有去HTML化的文本節(jié)點的內容
設置內容
textContent
innerHTML
innerHTML會直接渲染成對應的HTML標簽
標簽的屬性操作
- 獲取屬性值（可以獲的自定義屬性的值）：dom.getAttribute(name)
- 設置屬性值（可以獲的自定義屬性的值）：dom.setAttribute(name, value)
- 移除屬性值：dom.removeAttribute(name)
- 特列：獲取class的值 dom.className , 設置則可以賦值設置，返回的是個字符串
- 特列：獲取class的值 dom.classList.add() | remove() , 添加或者刪除屈雄，返回的是一個類名數(shù)組
js設置樣式
通過js動態(tài)添加類名從而達到更改樣式
-
通過dom.style屬性獲取樣式 或者設置樣式
dom.style.width = "100px" dom.style.heigth = "100px" dom.style.color = "red" dom.style.border = "1px solid red" dom.style.backgroundColor = "yellow"
3. 節(jié)點
DOM是由節(jié)點組成的 節(jié)點：標簽村视，文本，學習節(jié)點的目的酒奶，是為了讓我們對DOM操作更加的靈活一些蚁孔。
節(jié)點獲取：
- dom.parentNode： 獲取dom節(jié)點的父節(jié)點
- dom.children: 獲取dom節(jié)點的子節(jié)點惋嚎，是一個數(shù)組
- dom.nextElementSibling : 獲取dom的下一個元素節(jié)點
- dom.nextSibling ：獲取dom的下一個節(jié)點（包括元素節(jié)點）
- dom.previousSibling
- dom.previousElementSibling 同上
節(jié)點的創(chuàng)建和插入：
-
document.createElement()
<script> var box = document.getElementById("box"); var ul = document.createElement("ul"); // 創(chuàng)建的是一對標簽 box.appendChild(ul);// 將創(chuàng)建出來的ul標簽追加到box中 var li = document.createElement("li"); // 創(chuàng)建的一個標簽對象 ul.appendChild(li); li.innerHTML = "這是新添加的內容"; </script> cloneNode
appendChild
//var li11 = dom.cloneNode(false); // 如果參數(shù)是false的話杠氢，表示淺度克隆，只克隆標簽另伍，不會克隆標簽之間的內容
var li11 = li1.cloneNode(true);// 如果參數(shù)為true的話鼻百，表示 深度克隆，會克隆標簽內的一切內容
// var li11 = li1.cloneNode();// 如果不寫參數(shù)的話质况，與false一致
// console.log(li11);
// 可以將克隆出來的內容追加到任何一個節(jié)點上
// appendChild
ul.appendChild(li11); // 在當前父級元素的最后愕宋，追加一個克隆出來的標簽節(jié)點
console.log(ul);
- m.insertBefore(k,n) 在m元素的k節(jié)點前添加n節(jié)點
刪除節(jié)點
- m.removeChild(n)刪除m元素中的n節(jié)點
4、事件
JavaScript是一種事件驅動的語言结榄，事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間中贝。分為觸發(fā)和響應
- 觸發(fā)：交互的某個瞬間
- 響應：就是要執(zhí)行的某些代碼要達到一定的效果
事件三要素
事件源 要給誰注冊事件
事件類型 要給事件源注冊什么樣的事件
事件處理程序 要執(zhí)行的代碼，去達到某種效果 函數(shù)或是匿名函數(shù)
注冊事件
- On的方式注冊事件
- addEventListener()
移除事件
dom.removeEventListener(type,listener) 高級瀏覽器支持的方式
事件冒泡
事件冒泡: 當一個元素上的事件被觸發(fā)的時候臼朗，比如說鼠標點擊了一個按鈕邻寿，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡视哑；這個事件從原始元素開始一直冒泡到DOM樹的最上層绣否。
事件委托
本來要自己做的事，可以委托其它的標簽去做挡毅，這種方式叫做事件委托
比來要給li注冊的事件蒜撮，現(xiàn)在只需要注冊到ul即可，通過事件冒泡的方式跪呈，也可以達到相應的效果段磨。
阻止事件冒泡
取消冒泡和捕獲: stopPropagation() 取消冒泡和捕獲
事件捕獲 剛好和事件委托相反
是從DOM的最外層到目標對象執(zhí)行觸發(fā)
而冒泡是從當前對象往DOM的最頂級元素去執(zhí)行觸發(fā)
事件的三個階段
事件對象event
任何事件觸發(fā)的時候，程序都會提供給我們一個事件對象event
存儲著一些與事件相關的信息
也是有兼容生的耗绿，高級瀏覽器是支持的苹支，但是IE8及以下的瀏覽器的是支持的window.event
Var e = event || window.event;
三個坐標
event.clientX/Y 可視區(qū)，以瀏覽器可視區(qū)的左上角為基準
event.pageX/Y 以頁面的左上角為基準
event.screenX/Y 以電腦屏幕的左上角為基準
pageX/Y是有兼容性的误阻，
event.pageX/Y = event.clientX/Y+event.scrollTop/Left
DOM事件的Event對象的常見應用：
- event.preventDefault() : 阻止默認事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了該事件的冒泡行為被阻止之外(event.stopPropagation方法的作用),該元素綁定的后序相同類型事件的監(jiān)聽函數(shù)的執(zhí)行也將被阻止.
- event.target: 返回觸發(fā)事件的元素
- event.currentTarget: 返回綁定事件的元素
DOM 的事件級別
DOM1也是存在债蜜，只是沒有涉及到事件晴埂，DOM3比DOM2多了鍵盤和鼠標一些事件
DOM的自定義事件：
var eve = new Event('eventName')
dom.addEventListener('eventName',function(){
}) //注冊事件
dom.dispatchEvent(eve); // 觸發(fā)事件，
---------------------------------------------------------
這個事件不能添加參數(shù)寻定，想要添加參數(shù)儒洛，得自定義 CustomEvent事件
// 添加一個適當?shù)氖录O(jiān)聽器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 創(chuàng)建并分發(fā)事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
其他事件類型：
Onmouseover 鼠標移入的事件
Onmouseout 鼠標離開的事件
Onfocus 獲得焦點的事件
Onblur 失去焦點的事件
Ondblclick 鼠標的雙擊事件
移動端的事件
click事件
單擊事件，類似于PC端的click特姐，但在移動端中晶丘，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲
touch類事件
觸摸事件黍氮，有touchstart touchmove touchend touchcancel 四種之分
touchstart：手指觸摸到屏幕會觸發(fā)
touchmove：當手指在屏幕上移動時唐含，會觸發(fā)
touchend：當手指離開屏幕時，會觸發(fā)
touchcancel：可由系統(tǒng)進行的觸發(fā)沫浆，比如手指觸摸屏幕的時候捷枯，突然alert了一下，或者系統(tǒng)中其他打斷了touch的行為专执，則可以觸發(fā)該事件
tap類事件
觸碰事件淮捆，我目前還不知道它和touch的區(qū)別，一般用于代替click事件本股，有tap longTap singleTap doubleTap四種之分
tap: 手指碰一下屏幕會觸發(fā)
longTap: 手指長按屏幕會觸發(fā)
singleTap: 手指碰一下屏幕會觸發(fā)
doubleTap: 手指雙擊屏幕會觸發(fā)
