javascript學習循序漸進體驗--Dom體驗

web前端設計，js所起作用不用贅言，但很多初入門的人可能會對從那開始覺得困惑，我這以自己經驗與大家交流。

js的語法很簡單，很多人說軟件入門從js開始，也許是最沒壓力的。不過有很多人也許完全沒有語法經驗，也忘了曾經學的那點語法知識。光看很多基礎知識其實還只是望門興嘆，卻走不進這個門。其實最主要的是一切都必須從實際聯繫開始，不練習，不自己寫一些小例子，就無法說自己熟悉這些基礎知識。對dom的練習，可以最快速度的掌握對html頁面標籤的操作，可以對面向對象編程有一個比較直觀的瞭解，至少從這裏面我們可以知道這個對象所處位置。對父節點，子節點，兄弟節點這幾個概念有一個總體瞭解，parenNode，childNodes會經常用到。例如：

<div id="test">
	<p>我是將要被操作的節點</p>
</div>

<script type="text/javascript">

//刪除節點
function remove(){
	var test = document.getElementById("test");
	var children = test.childNodes;
	for(i=0;i<children.length;i++){
		test.removeChild(children[i]);
	}
}

//添加節點

function add(){
var test = document.getElementById("test");
var para = document.createElement("P");
var text = document.createTextNode("要添加的文本");
para.appendChild(text);
test.appendChild(para);
}

//動態改變一些節點的style信息

function allPara(){
//paras存找出所有p標籤信息

paras = document.getElementsByTagName("p");
//paraNum循環變量，用於選中每個單獨的段落
var paraNum;
//從零開始循環，paras.length是段落節點的個數
for (var paraNum=0;paraNum<paras.length;paraNum++)
{ 
//操作：給段落設置邊框。
paras[paraNum].style.border = "1px dashed pink"; 
}
}

//一下是取得標籤後得到相關標籤信息

function getName(){
var x = document.getElementById("test");
alert(x.nodeName);
}
function getValue(){
var x = document.getElementById("test");
alert(x.nodeValue);
}
function getType(){
var x = document.getElementById("test");
alert(x.nodeType);
}

 

</script>

 

以上的節點操作會在各個例子中用到，需要大家在使用中根據需要自己靈活組合，一定要記住一點就是寫例子之前，需要先明白想要做什麼，然後在去具體實現，而不是是事實而非的自己都不確定就先亂寫一起，要不然自會浪費自己的時間。