javascript中的DOM操作及应用

时间：2016-08-12 00:56:00 阅读：308 评论：0 收藏：0 [点我收藏+]

标签：

　　javascript在dom中的应用是一个核心问题,它体现出了JavaScript的意义所在,它是我们操作页面变得动态化,操作页面变得更容易,但同时,大量的使用DOM操作,也会是浏览器的执行效率大打折扣,正确高效的使用DOM操作,是我们在实际工作中经常遇到的,那么我们就来看一下DOM操作:

　　当我们要对DOM元素进行各种操作的时候,我们首先要坐的就是先去获取这个元素:

1 <div id="example" class="divDom" >DOM操作 </div>
2 <input name="input1" type="button">
3 <script>
4 alert(document.getElementById(‘example‘));
5 
6 alert(document.getElementsByTagName(‘div‘));
7 alert(document.getElementsByName(‘input1‘));
8 alert(document.getElementsByClassName(‘divDom‘));
9 alert(document.getElementsByName(‘input1‘).getAttribute(‘name‘);
9 </script>

如上边所示代码,我们常用的关于获取DOM元素节点的方法有这么几种:

1>document.getElementById();通过节点的id获取到该节点,

2>document.getElementsByTagName()通过节点标签名选中该节点,

3>document.getElementsByName()通过标签中设定的name属性值来选中该标签,

4>document.getElementsByClassName()获取到所有指定类名的元素,返回的是nodelist,IE9以下不兼容

5>.getAttribute()用来获取特定元素的特定属性的值

6>setAttribute()用来设置特定元素的属性值

获取到了元素节点后,我们可以通过选中的元素节点来获取它的属性,一般有tagName和innerHTML

后者是可读可写的,可以通过innerHTML来改变节点内容.

二,在DOM操作中,节点可以分为文本节点,属性节点和元素节点:

从层次结构上来看,又可以分为父子节点,兄弟节点,所以当我们获取到一个节点后,可以通过相应的属性获得其他节点:

children代表的是寻找当前的子标签,

childNodes是获取当前元素的所有子节点.

firstChild可以获取当前元素的第一个子节点,

lastChild可以获取当前元素的最后一个子节点,

　　　　　　　　　　　parentNode获取当前节点的父节点

previousSibling:获取当前节点的上一个同级节点,

　　　　　　　　　　　nextSibling:获取当前节点的下一个同级节点

attributes这个属性是获取当前标签的属性节点的,

当我们获取到了节点,并且通过当前节点获取到了它的父节点或者子节点,或者同级节点后,我们就可以对节点进行操作了:

appendChild()添加节点到当前节点的末尾

　　　　　　　　　　 createElement()可以动态的生产出一个节点,这是我们的一个重点应用.

　　　　　　　　　　 insertChild()在指定的位置前插入节点,这里我们还可以进行延伸:

1 var div1 = document.createElement(‘div‘);
2 var divParent = document.getElementById(‘divBox‘);
3 divParent.insertChild(div1,oldNode);
4 //这里实现了将元素插入指定的元素前,
5 //那么我们可以根据insertChild来实现将元素插入到指定节点后边
6 divParent.insertChild(div1,oldNode.nextsiBling);
7 //通过nextsiBling就可以实现在当前元素之前添加

　　　　　　　　　　 removeChild()在父节点中将指定的子节点删除

replaceChild()使用新节点将旧节点进行替换

　　　　　　　　　　 cloneNode()克隆节点,即复制当前节点

上边的就是我们常用的一些操作方法,由于太过于基础,就不一一的演示了.下边要说的一个问题,其实算是事件机制中的问题,就是我们很多初学者在使用事件机制时,在事件中使用我们的DOM对象:

var div1 = document.getElementById(‘div‘);
div1.onclick = fun;

function fun(e){
    var e = e || window.event;
    var tar = e.target;
    //这时就获取了目标元素,
}

这是在事件的应用中,我们常用的一种获取dom元素的操作,当然,这里我们会在事件机制的随笔中做详细的介绍,在获取节点的属性的时候,我们不可避免的遇到了style和getComputedStyle的区别的问题,这里就引出了我们在获取CSS的大小,宽高,等属性在计算时的问题.首先来看一下

 1 var div1 = document.getElementById(‘div‘);
 2 alert(div1.style.width);
 3 alert(div1.style.height);//这里我们通过style来获取DOM元素的各种属性,
 4 //但是style的缺陷就在于它只能获取到行内style样式的属性,如果行内有,它就
 5 //返回,如果没有,它就返回为空,就是他的查找范围太过于狭窄.
 6 //那么这时就要用getComputedStyle:通过计算返回样式,它不管你是行内,链
 7 //接,内联,统统的都能通过计算来返回给你style属性值.
 8 //var style = window.getComputedStyle ?
 9 //window.getComputedStyle(box, null) : null || box.currentStyle;
10 //通过这种兼容性写法,