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