原生js 的一些DOM/樣式操作

寫在前面的話：

　　一直寫的jquery，原生的不用……寫篇東西幫助自己整理記憶一下吧 ，雖然都很基礎啊……

---

1.js找dom對象，以及創建/刪除 節點

　一貫的jquery操作：$(selector)

　原生的寫法（列一些常用的）：

document.getElementsByClassName（selector）
document.getElementsByTagName（selector）
document.getElementById（selector）
document.querySelector（selector）　　　　　　// 只會返回找到的第一個符合的dom
document.querySelectorAll（selector）　　　　// 會返回符合的所有dom

document.createElement('節點名');　　　　　　// 創造一個節點
parentDom.appendChild(childNode);　　　　　　// 父元素添加一個節點
parentDom.removeChild（childNode）；　　　　　// 刪除一個節點，只能由其父元素刪除

2.js 怎么操作 dom 的類？   詳情參見： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

　一般的用法如下：

加類：   dom.classList.add(className);
移除類： dom.classList.remove(className);
替換類： dom.classList.replace(className1,className2);
判斷類： dom.classList.contains(className);　　　　// 這個只能一次判斷一個 類

……

例如：　 document.getElementsByClassName('box')[0].classList.add('haha');
例如：　 document.getElementsByClassName('box')[0].classList.add('haha','hehe');
例如：　 document.getElementsByClassName('box')[0].classList.contains('ha');    // false

注： 這里寫在 classList前邊的dom要是一個具體的dom元素，而非數組，所以className找到的結果要記得加上 [序號]進行唯一化。

注： 兼容性：IE10以及以上支持，現代瀏覽器支持；

3. js如何操作style

dom.style.屬性名 = 屬性值;
//例如：
document.getElementsByClassName('box')[0].style.background = 'red';

4.js 如何獲取內存中的css樣式

function getStyle(obj, attr){
    var cs = obj.currentStyle || window.getComputedStyle(obj, null);   // 兼容 IE8
    return cs[attr];
}
// 例子：
var a = document.getElementsByTagName('div')[0]；
console.log(getStyle(a, 'background-color'));　　　　　　// background: red;    結果： rgb(255, 0, 0)

 注：所謂內存中的css樣式，是元素正在起作用的那些css樣式：

　如果沒有明確 地給一個div寬度，只是由子元素撐開，那么在IE中得到的width,永遠是auto；而在chrome，firefox中則是一個具體的寬度；

　如果是已經給了一個具體的寬度值，那么瀏覽器得到的都是這個具體寬度值；

5.js 如何獲取元素的文本屬性，表單元素的一些屬性值

// 文本屬性
dom.innerHTML 
dom.innerText

// 表單元素的一些屬性值
// html 代碼
<input type="text" id="inputId" title="inputTitle" class="inputClass" value="inputValue">
// js 代碼
var inputObj = document.getElementsByTagName('input')[0];

console.log(inputObj.type); // 獲取 type 屬性值
console.log(inputObj.id); // 獲取 id 屬性值
console.log(inputObj.title); // 獲取 title 屬性值
console.log(inputObj.class); // class 直接獲取時獲取不到的
console.log(inputObj.className); // 正確獲取 class 的屬性值
console.log(inputObj.value); // 獲取 value 的屬性值

// 或者是checkbox 的checked 屬性也是 dom.checked 

6.js & 事件

　6.1 事件的寫法：  

// onload 頁面加載完畢后執行的時間
window.onload = function(){
    alert('頁面加載完成, onload 事件被觸發!');
}

注：js 寫各種方法時，這個需要在事件名稱前面加上onxxx，而jquery直接是事件名。

 　 6.2 事件對象：

document.getElementsByTagName('div')[0].onclick = function(event){ // 這里用一個形參來接系統給的事件對象
　　var event = event || window.event;      // 兼容IE8
   console.log(event);
}

注： 時間對象中包含很多的信息，可以用來做一些操作的，比如點擊位置，這個元素的位置啥的都有。

　6.3 事件委托：

document.getElementsByTagName('div')[0].onclick = function(event){  // 這里用一個形參來接系統給的事件對象
    var event = event || window.event;
    event.target = event.srcElement || event.target;                    // 兼容 IE8
    console.log(event.target)                                       
}

7. Browser對象，W3Cschool上有詳細的說明，http://www.w3school.com.cn/jsref/dom_obj_window.asp

8. 常用的一些距離的寫法：

　　我做了一個實驗，頁面包含一個div, 讓瀏覽器出現水平以及豎直方向的滾動條，測量數據如下：

　　

　　注：不可能將所有瀏覽器都調到一個大小去量，所以數值主要是觀測同一瀏覽器不同屬性下的值之間的差異：

　　

　從結果看來：

　1） innerWidth，innerHeight  各個瀏覽器得到的數值都是一樣的，只是IE8不支持；高度指的是顯示內容區的“屏幕”高度；

　2） document.documentElement.xx   各瀏覽器都支持，然而數值是不一樣的，其中除了IE10,IE11之外，其他的瀏覽器都是不包含滾動條寬度的值；高度指的是顯示內容區的“屏幕”高度；

　3）document.body.xx   各瀏覽器都支持，然而寬度數值是不一樣的，其中除了IE10,IE11之外，其他的瀏覽器都是不包含滾動條寬度的值；高度一致，都表示內容的高度；

　4）IE8的滾動條寬度較其他瀏覽器多4px，21px；  IE10,IE11的滾動條體現不出來；IE9與Chrome,firefox的滾動條寬度為17px；