2012年4月11日星期三

基础常用的原生JavaScript

基础常用的原生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 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);

希望这些日常的经验能帮助到大家。



TAG: