js中級小知識5
元素的屬性
div.attributes是所有標籤屬性構成的資料集合
div.classList是所有class名構成的陣列集合
在classList的原型鏈上可以看到add()和remove()
1.client系列
clientWidth/clientHeight是我們設定的寬和高架上內邊距（沒有邊框）
clientLeft/clientTop就是我們設定的邊框值
2.Offset系列
offsetWidth/offsetHeight是我們設定的寬和高加上內邊距加上邊框
offsetTop/offsetLeft是元素外邊距離到父級的內邊距的距離
offsetTop參照物由父級元素身上的position：absolute/fixed決定的；如果父級元素沒有就逐層向上查詢直到body。
offsetParent返回這個元素的父級元素
3.scroll系列
scrollwidth/scrollHeight就是我們設定的寬高加上內邊距（內容沒有一處的情況下）
如果超出了範圍就按內容而定
scrollTop/scrollLeft滾動條捲走的高度和寬度
如果我們設定了小數，都會向上取整
案例分析
Offset往往我們和我們做元素的運動有關
1.offset必須和position配合使用往往這個值還必須是absolute。
2.offsetLeft有初始值 在標準瀏覽器下是8px 低版本沒有。
3.
document.body獲取的是文件中的body標籤
document.documentElement獲取的是文件中的根節點
document.body.clientWidth
document.documentElement.clientWidth
二者獲取的width的值不一樣差16px，怎樣讓他們一樣。
一個css就搞定了
Ie6不支援document.documentElement,
相容性寫法
var w=doucument.documentElemnt.clientWidth||document.body.clientWidth
獲取瀏覽器可見區的寬度
邏輯運算 || && !
||遇到第一個為真就返回
&&遇到第一個為假就終止，返回false，如果沒有遇到返回最後那一個
5&&4&&2&&1 ==》1
5&&0&&3&&0 ==》0
5||2&&3且的優先順序高於或 2&&3=》3 5||3==》5
==============================================================================================================================================================================================================================jjs操作css樣式
div.style.width="100px".在div標籤內我們添加了一個style屬性，並設定了width值。這種寫法還會個大量標籤帶來style屬性，跟實際專案不符。
我們沒有讓css和html分離
所以如果是為了獲取css樣式
window.getComputedStyle()獲取經過計算機計算的所有屬性
就是隻要渲染出來的都是經過計算的。
getComputeedStyle()第一個引數是當前元素，第二個一般我們寫null
並且這個方法是隻讀，
Ie6-8不支援這個用法，ie的是用currentStyle
2.try{
}catch(error){}不報錯執行try裡面的程式碼塊，報錯執行catch裡面的程式碼塊。
前提條件時報錯，如果不是報錯不能使用
var csss;
try{
csss=window.getComputedStyle(aa,null)
}catch(e){
csss=aa.currentStyle
}
console.log(csss)
總結
Js解決相容的方法
1.||
var dd=documen.documentElement.clientWidth||document.body.clientWidth
2.if()else()
if(window.getComputedStyle){
csss=window.getComputedStyle(aa,null)
}else{
csss=aa.currentStyle
}
console.log(csss)
3.try()catch(){}
3.try{}catch(err){}
必須在報錯的條件下，和if else比較效能上比較差，不在萬不得已的情況下不使用
只讀 可寫
只讀:只能獲取不能修改
可寫:可以修改的
Null和undefined的區別
Null和undefined都表示沒有值
Null 是這個東西是天生存在的但是沒給值。
如果我們需要清除瀏覽器變數的記憶體需要賦值null
比如
var aa=doument.getElmentById("aa")
console.log(aa.parentNode.parentNode.parentNode.parentNode) null
Undefined這個東西壓根就不存在的是人未定義的並且沒賦值。
1.var a；undefined
2.div.aa undefined
元素節點的樹狀圖
document>documentElement>body>tagName
offsetLeft/offsetTop結合運動
滾動輪播
===========================================================================================================================================-==================================================
面試題作用域
+function(){
console.log(a)
var a=5;
function a(){}
console.log(a)
function b(){}
b=6
console.log(b)
var c=d=b
}()
console.log(b)
console.log(c)
畫圖分析
1.DOM document object model
(1)節點樹狀圖
document》documentElement》body》tagname
2.我們常用的節點型別
元素節點（標籤）
文字節點（文字節點）
屬性節點（標籤裡的屬性）
3.document有個屬性叫nodeType返回的是數字
1代表元素節點 2代表屬性節點 3代表文字節點
4.節點的獲取
元素節點獲取有很多方法
document.getElmentById()
document.getElementsByClassName()
document.getElementsByTagName()
docuemnt.querySelector()
document.querySelectorAll()
屬性節點的獲取
元素.attributes 獲取元素身上所有屬性構成的集合（陣列）
得到裡面的值 元素.attributes[1].value
元素.getAttributes("屬性名")獲取屬性值的方法
元素.setAttribute("屬性名","屬性值")給元素設定屬性和屬性值
元素.removeAttribute("屬性")刪除屬性
文字節點
沒有獲取的方法，沒有意思
5.獲取元素的子節點
元素.childNodes這個屬性 這個屬性有相容性 標準瀏覽器會獲取到文字節點
而低版本瀏覽器不會。所以建議使用children這個屬性。
獲取單個子節點
獲取第一個孩子
標準下 元素.firstElementChild
非標準下 元素.firstChild
相容下寫法
var list=document.getElementById("list")
var fist=list.firstElementChild||list.firstChild
console.log(first)
獲取最後一個節點
元素.lastElementChild 元素.lastchild
獲取上一個兄弟結點
元素.previousSibling
元素.previousElementSibling
獲取下一個兄弟結點
元素.nextSibling
元素.nextElementSibling
6.獲取父節點
元素.parentNode 沒有相容性
元素.parentNode和parentNode的區別
區分 offsetParent和parentNode的區別
DOM2 動態建立節點
1.生成節點的方法 document.createElemnt("div")
2.插入生成節點方法 父元素.appendChild(新節點)
在父節點中的子節點後面插入新的節點
3.在指定的位置插入新的節點
(1)父元素.insertBefore(新節點，誰的前面) 將新節點插入指定的元素前面
4.刪除元素節點 父元素.removeChild()
案例分析
仿留言板
相容性。
元素沒有子節點，IE低版本會讀取不到，二標準瀏覽器會。
因為標準瀏覽器會把文字節點當作子節點，而ie6-8不會。
超連結a的屬性href分析
<a href="">點選會重新整理頁面，相當於向後臺傳送一次請求。
<a href="#s">錨點跳轉 跳轉到某一個id叫s的位置上
<a href="javascript:;">取消重新整理頁面的功能
拓展
字串拼接和Dom建立都是渲染的方式
Dom建立
優點：是一個獨立的個體，不會影響到原有的元素
缺點：處理資料量過大會比較麻煩，會造成DOM迴流
字串拼接
優點 簡單，層次感強，可以處理大量資料
缺點：字串拼接會影響到原有子元素的事件
Dom迴流
頁面渲染時，我們對html結構簡單的增刪查改時，瀏覽器會對所有的dom進行重新排列，這就是Dom迴流，嚴重影響瀏覽器的效能。
補充
提升頁面效能優化
1.多采用雪碧圖
2.阻止超連結的預設行為
3.減少Dom迴流
4.減少向伺服器請求的次數