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>

 

以上的节点操作会在各个例子中用到，需要大家在使用中根据需要自己灵活组合，一定要记住一点就是写例子之前，需要先明白想要做什么，然后在去具体实现，而不是是事实而非的自己都不确定就先乱写一起，要不然自会浪费自己的时间。