DOM
DOM常用節(jié)點(diǎn)類型
元素節(jié)點(diǎn) - 1；屬性節(jié)點(diǎn) - 2；文本節(jié)點(diǎn) - 3；注釋節(jié)點(diǎn) - 8；文檔節(jié)點(diǎn) - 9
查看節(jié)點(diǎn)
-
查看元素下的子節(jié)點(diǎn)
-
el.children 子元素（不是標(biāo)準(zhǔn)中的操作）
? lastElementChild 最后一個(gè)子元素
el.childNodes 子節(jié)點(diǎn)（包括空白內(nèi)容和轉(zhuǎn)行內(nèi)容）
-
-
查看元素的父元素（父節(jié)點(diǎn)）
- el.parentNode
-
下一個(gè)兄弟元素
- nextElementSibling 下一個(gè)兄弟元素(nextSibling 下一個(gè)兄弟節(jié)點(diǎn)，包括文本節(jié)點(diǎn))
-
上一個(gè)兄弟元素
- previousElementSibling 上一個(gè)兄弟元素 (previousSibling 上一個(gè)兄弟節(jié)點(diǎn)，包括文本節(jié)點(diǎn))
創(chuàng)建一個(gè)元素
object element createElement("tagName");
元素創(chuàng)建完，不添加到頁面中的話，看不到它
-
parent.appendChild(el);
在parent中追加一個(gè)子元素el，（把el添加到parent的最末尾），如果操作的是一個(gè)已經(jīng)存在頁面中的元素，會把元素從原來的父級下，直接剪切過來
-
parentNode.insertBefore(childNode1,childNode2)
往一個(gè)節(jié)點(diǎn)的指定子節(jié)點(diǎn)前邊插入一個(gè)節(jié)點(diǎn)，如上：childNode1插入到childNode2前邊
刪除一個(gè)節(jié)點(diǎn)
-
parentNode.removeChild(childNodes)
從一個(gè)節(jié)點(diǎn)中刪除指定的子節(jié)點(diǎn)。返回值： 被刪除的這個(gè)節(jié)點(diǎn)
?
定位父級
el.offsetParent
查找到el根據(jù)定位的父級元素，都沒有就查找到body
ofset
- offsetWidth/offsetHeight 可視寬/高
- offsetTop/offsetLeft 和定位父級之間的偏移
getBoundingClientRect()
-
獲取元素的盒模型信息
返回值對象 ｛
? left 元素左側(cè)相對于可視區(qū)左側(cè)的距離
? top 元素頂部相對于可視區(qū)頂部的距離
? right 元素右側(cè)相對于可視區(qū)左側(cè)的距離
? bottom 元素底部相對于可視區(qū)頂部的距離
? width 可視寬度
? height 可視高度
｝
-
獲取可視區(qū)寬高
- document.documentElement.clientWidth;//可視區(qū)寬度
- document.documentElement.clientHeight//可視區(qū)高度
-
client和offset的區(qū)別
offsetWidth/offsetHeight //width + padding + border
-
clientWidth/clientHeight //width + padding
?
offsetLeft/offsetTop //和定位父級之間的距離
clientLeft/clientTop //元素的邊框
屬性操作的第三種方法
注意： 盡量不要使用或者減少使用dom的操作，性能不太好
- node.getAttribute(attr) 獲取元素指定屬性名的屬性值
- node.setAttribute(attr,value) 設(shè)置元素指定屬性名的屬性值
- node.removeAttribute(attr) 刪除元素的指定屬性
特點(diǎn)：可以操作行間自定義的屬性；可以獲取src,href等的相對地址
節(jié)點(diǎn)操作
- parentNode.replaceChild(node,childNode)
- node用來替換的節(jié)點(diǎn)，childNodes被替換的子節(jié)點(diǎn)
- node.cloneNode(boolean) 克隆一個(gè)節(jié)點(diǎn)
- true：克隆元素和元素包含的子孫節(jié)點(diǎn)
- flase：克隆元素到但不包含元素的子孫節(jié)點(diǎn)
表格操作
- table.tHead 獲取thead
- table.tFoot 獲取tfoot
- table.tBodies[i] 獲取tbody 注意table可以擁有多個(gè)tbody，所以獲取到的是一組
- table.tHead.rows/table.rows 獲取tr 注意獲取到的是一組
- table.rows[i].cells 獲取單元格 th,td 注意獲取到的是一組，單元格要在row里邊獲取
表單操作
-
input
- text / radio / checkbox
select
-
textarea
統(tǒng)一使用node.value獲取值
獲取 radio / checkbox 是否選中用node.checkbox
表單事件
- onchange 主要用在 select / radio / checkbox / range 中 選中的狀態(tài)發(fā)生改變
- oninput 輸入類型表單控件value發(fā)生變化
- onfocus 當(dāng)元素獲得焦點(diǎn)時(shí)候
- node.focus() 使元素得到焦點(diǎn)
- onblur 當(dāng)元素失去焦點(diǎn)的時(shí)候
- node.blur() 使元素失去焦點(diǎn)
- onsubmit 當(dāng)表單提交的時(shí)候
- node.submit 提交這個(gè)表單
- onreset 當(dāng)表單重置的時(shí)候
- node.reset() 重置這個(gè)表單
BOM
dom屬于bom（bom包含dom）
bom事件
-
window.open(url,打開方式，窗口特征)
- 返回值：打開的新窗口的頁面屬性
winow.open在高版本下的限制
- 只能在事件中操作，否則可能會被阻止掉
- 一個(gè)事件只能打開一個(gè)，第二個(gè)可能會被阻止
window.close() 關(guān)閉當(dāng)前窗口
window下的對象
-
window.navigator 瀏覽器信息
- userAgent 用戶代理信息
-
window.location 地址欄信息
- href 完整的地址（讀/寫）
- search 地址欄查詢信息（問號到#號之間的所有內(nèi)容）
- hash #之后的字符（錨點(diǎn)）
- onhashchange hash發(fā)生改變的時(shí)候
-
window.screen 顯示器信息
-
scroll 滾動條
//獲取可視區(qū)和整個(gè)文檔的高度 window.innerWidth,window.innerHeight //可視區(qū) document.documentElement.clientHeight //可視區(qū) document.body.clientHeight//整個(gè)文檔高度 document.documentElement.scrollHeight//文檔高度 window.onscroll = function(){ //滾動條滾動 //滾動條滾動距離(滾動距離) console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft); //chrome下無效 console.log(document.body.scrollTop,document.body.scrollLeft); // 火狐下無效 IE整體不識別 console.log(window.scrollY,window.scrollX);//IE整體不識別 console.log(window.pageYOffset,window.pageXOffset);//IE8及以下不識別 /* IE9-IE11不識別 2,3 IE8一下只識別 1 */ ｝ ** 兼容不同瀏覽器 var scrollY = document.documentElement.scrollTop||document.body.scrollTop; **- window.scrollTo(x,y) 設(shè)置滾動條距離
-
-
window.history 瀏覽器歷史記錄
- history.back(); 返回歷史記錄的上一頁
- history.forward(); 進(jìn)入歷史記錄的下一頁
- history.go(nub); 進(jìn)入具體某一頁
