15.1 DOM概覽
15.2 選取文檔元素
- getElementById()
function getElementId(){
var elements = {};
for(var i=0;i<arguments.length;i++){
var id = arguments[i];
var elt = documemt.getElementById(id);
if(elt == null){
throw new Error('no elements with id:' + id);
}
elements[id] = elt;
}
return elements;
}
- getElementsByName()
- getElementsByTagName()
- getElementsByClassName()
- querySelectorAll()/querySelector()
15.3 文檔結(jié)構(gòu)和遍歷
- 作為節(jié)點樹的文檔
- parentNode
- childNodes：只讀的類數(shù)組對象
兩種方法可以將類數(shù)組對象轉(zhuǎn)化為數(shù)組 :
- ES6中 Array .from()[需要編譯]
-
- Array.prototype.slice.call(someNode.childNodes,0);
- firstChild / lastChild ：沒有返回null
- nextSibling / prevSibling：這兩個屬性將節(jié)點之間以雙向鏈表的形式連接起來
- nodeType
- nodeValue : Text節(jié)點或者Comment節(jié)點的文本內(nèi)容
- nodeName：元素的標簽名，以大寫形式表示
- 作為元素樹的文檔
- firstElementChild / lastElementChild
- nextElementSibling / prevElementSibling
- childElementCount：返回子元素的數(shù)量 == children.length
15.4 屬性
- html屬性：document.getElementById('myimg').src;
- 設(shè)置獲取非標準html屬性
- getAttribute()
- setAttribute()
- hasAttribute()
- removeAttribute()
- 數(shù)據(jù)值屬性
- HTML5中設(shè)置了"data-x" == dataset.x 例如：data-jquery-test == dataset.jqueryTest(駝峰表示法)
- Attr節(jié)點的屬性：attributes屬性，用法與childNode屬性類似.
15.5 元素的內(nèi)容
- 作為html元素的內(nèi)容：
- innerHTML瀏覽器擅長解析HTML，但是“+= 效率低下，因為既要序列化又要解析”
- outerHTML:包含當前標簽名的輸出
- 作為純文本的元素內(nèi)容
- textContent：將指定元素中的多有后代Text節(jié)點簡單的串聯(lián)在一起
- innerText：不反悔
<script>標簽內(nèi)的內(nèi)容，并試圖表留意表格形式，針對某些表格元素<table>等相關(guān)元素都是只讀屬性
- 作為Text節(jié)點的元素內(nèi)容:nodeValue屬性保存text節(jié)點的內(nèi)容。
textContent，innerHTML，innerText對比
15.6 創(chuàng)建插入刪除節(jié)點
- createElement()
- cloneNode()[true深復(fù)制]-[false淺復(fù)制] / 除了IE瀏覽器，Document.importNode()方法也可以創(chuàng)建節(jié)點副本[第一個參數(shù)為要插入的節(jié)點，第二個參數(shù)如果是true則表示遞歸所有的后代節(jié)點]
- appendChild()
- insertBefore()[帶插入的節(jié)點]-[已經(jīng)存在的節(jié)點]
- removeChild()
- replaceChild()[新節(jié)點]-[需要代替的節(jié)點],是childNodes中的節(jié)點，包括文本節(jié)點注釋節(jié)點
function embolden(n){
if(typeof n == "string"){
n = document.getElementById(n);
}//如果參數(shù)為字符串而不是節(jié)點，將其當做元素的id
var parent = n.parentNode;
var b = document.createElement("b");
parent.replaceChild(b,n);
b.appendChild(n);
}//用一個新的<b>元素代替 n 節(jié)點。并使n節(jié)點成為該元素的子節(jié)點
15.8 文檔和元素的幾何形狀和滾動
- 文檔坐標（整個網(wǎng)頁的大?。┖鸵暱谧鴺耍匆姷拇翱冢话üぞ邨l收藏夾什么的）
- 查詢窗口滾動條的位置
//以一個對象的x 和y屬性的方式返回滾動條的偏移量
function getScrollOffsets(w){
//使用指定的窗口，如果不帶參數(shù)則使用當前窗口。
w = w || window;
//除了IE8及更早的版本，其他瀏覽器都可以使用
if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
//對標準模式下的IE
var d = w.documentl;
if(document.compatMode == "CSS1Compat")
return {x:d.documentElemet.scrollLeft,y:d.documentElemet.scrollTop};
//對怪異模式下的瀏覽器
return {x:d.body.scrollLeft,y:d.body.scrollTop};
}
- 查詢窗口的視口尺寸
function getViewportSize(){
//使用指定的窗口，如果不帶參數(shù)則使用當前窗口。
w = w || window;
//除了IE8及更早的版本，其他瀏覽器都可以使用
if(w.innerWidth != null) return {w:w.innerWidth,h:w.innerHeight};
//對標準模式下的IE
var d = w.documentl;
if(document.compatMode == "CSS1Compat")
return { w:d.documentElemet.clientWidth,
h:d.documentElemet.clientHeight };
//對怪異模式下的瀏覽器
return {x:d.body.clientWidth,y:d.body.clientHeight};
}
-
查詢元素的幾何尺寸：
- getBoundingClientRect()不需要參數(shù)，返回一個具有l(wèi)eft,right,top,bottom四個屬性的對象,left,top表示鈣元素左上角的X和Y的坐標，right和bottom表示元素右下角的X和Y的坐標,返回的包含padding,不包含margin.
- 返回元素在視口中的位置
var box = e.getBoundingClientRect(); var offsets = getScrollOffsets(); var x = box.left + offsets.x; var y = box.top + offsets.y;在原始的IE中實現(xiàn)
var box = e.getBoundingClientRect(); var w = box.width || (box.right - box.left); var h = box.height || (box.bottom - box.top); -
滾動
- scrollTop()接受一個X和Y的坐標（文檔坐標作為滾動條的偏移量設(shè)置他們）
- scrollIntoView()默認參數(shù)為將元素的上邊緣或盡量接近視口的上邊緣。false對應(yīng)下邊緣
var documentHeight = document.documentElement.offsetHeight;//獲得文檔高度
var viewportHeight = window.innerHeight;//或者 getViewportSize()//獲取視口高度
window.scrollTo(0,documentHeight - viewportHeight);//滾動讓最后一頁在視中可見
