基礎常用的原生JavaScript

對於前端的童鞋們，應該知道，除了css與html的編碼，使用最多的編程那就是javascript了。

局部變數的設定：

在我們大量擷取元素時，是需要通過document.getElementById來擷取元素的id，或者for迴圈來遍曆元素，這樣大量的操作，可以通過設定一個中間局部變數來完成。代碼如下：

var doc = document;

var id = doc.getElementById(id);

/------------------------------------------/

var doc = document;

var element = doc.getElementsByTagName(p);

for(var i = 0;l=element.length;l<i;i++){

........()

}

DHTML程式編寫

其實DHTML很早之前就已經出現了，它的出現是為了更好的渲染出漂亮的頁面。在原生javascript編程中，DHTML是我們前端工程師所要做的最多的編程任務。

在原生javascript編程中，對於DHTML擷取元素的樣式的值時，有一點要注意。style這個屬性，只能在id的對象中才能獲得，而不是元素的數組。例子如下：

var doc = document;

var id = doc.getElementById(id);

id.style.width; //寬

id.style.height;//高

style這個屬性，類似與css樣式，基本擷取值的文法與css樣式大同小異。比如擷取padding或margin屬性，代碼如下:

id.style.paddingTop;

id.style.marginTop;

在DHTML編程中，還有四個比較常用的屬性。setTimeout,clearTimeout,setInterval,clearInterval[定時器]。用法如下：

setTimeout(function() {函數體}, 10);

擷取元素屬性：

在工作中，有些時候我們要擷取元素的屬性。比如<p class="wower" title="魔獸世界">wower</p>，在原生javascript我們如何擷取元素的屬性與改變元素的屬性，如何獲得元素的文本值呢。這裡可以用的是兩個原生的方法與一個事實標準的方法。getAttribute,setAttribute,innerHTML。這裡仍然需要注意一點，它們的方法只能在id的對象中獲得，而不是元素的數組。例子如下：

var doc = document;

var id = doc.getElementById(id);

id.getAttribute("class"); //返回wower

id.getAttribute("title"); //返回魔獸世界

id.innerHTML； //返回wower

id.setAttribute("class","newslow"); //返回改變class的屬性由wower變成newslow。

改變元素結構：

增刪改查，說的到這個感覺有些像資料庫語言了，不過這裡的增刪改查是對dom的節點而言的。操作元素的增刪改查，我這裡推薦一些比較常用的。比如createElement建立等待元素，appendChild插入元素，又比如hasChildNodes。代碼如下：

var doc = document;

var id = doc.getElementById(id);

var a = doc.createElement("p");

id.appendChild(a);

希望這些日常的經驗能協助到大家。