javascript针对DOM的应用

所谓针对DOM的应用。也就我这里只教大家用javascript操作页面中dom元素做交互。我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果。所以我这里只教大家最实际，最有用的javascript应用。但是前提大家最好有一些javascript或者jquery的编程的基础。好废话不多说了。
今天第一篇，就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照JQuery来讲。
如果页面中的元素是ID属性
<div id="dom"></div>

JQ的方法：$("#dom"),
原生js的方法：var a = document.getElementById("dom");这个a就等价于$("#dom");

如果我想获取父级元素下的一个元素
<div id="dom">
< span></span>
< /div>

JQ的方法：$("#dom span"),
原生js的方法：var b = document.getElementById("dom").getElementsByTagName("span")[0];这个b就等价于$("#dom span")
其实还有一种简单方法var b = document.getElementById("dom").childNodes[0] 但是在FF下会出问题，这个我们以后讨论

获取页面中的一组元素
<div id = "dom">
< ul>
< li></li>
< li></li>
< li></li>
< ul>
< /div>

JQ的方法：$("#dom ul li")或者$("#dom li")或者$("#dom > li"),
原生JS方法：var c = document.getElementById("dom").getElementsByTagName("li");但是这个c不等同于上面，因为不能像上面JQ那样直接使用。需要用for循环才能一起使用。如果单个使用比如说我只用第一个li，只需要var c = document.getElementById("dom").getElementsByTagName("li")[0]，用第二个就是var c = document.getElementById("dom").getElementsByTagName("li")[1],以此类推。因为DOM元素在JS中是以数组形式存放的。

上面的都还算好理解。现在我要讲的这个是大家都常用的。但是在原生JS里获取也是最麻烦的一个属性就是class属性,
< div class = "dom'>
< /div>

JQ的方法:很简单$(".dom");
原生JS方法：这就有些麻烦了，需要写一个函数。因为原生JS没有提供直接获取class的方法。所以我们需要这样。我先把函数写出来
function $class(domclass){
var odiv = document.body.getElementByTagName("*");
var a;
for(var i = 0;i<odiv.length;i++){
if(odiv.className ==domclass){
a = odiv
}
return a;
}
}
用这个函数来获取就很简单了只需要var d = $class("dom");

我就说说这个函数的意思吧，
var odiv = document.body.getElementByTagName("*");
这句意思是获取页面中所有的DOM元素

for(var i = 0;i<odiv.length;i++){
if(odiv.className ==domclass){
a = odiv
}
这个是遍历页面中所有元素然后拿他们的class进行比对。如果和我们传进来的domclass这个参数一样就把这个元素拿给a；
return a;把a返回出来

所以用var d = $class("dom");就相当于var d = a;

大家都知道在JQ中想获取一个元素的兄弟元素，父级元素，子元素等等是非常方便的。其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器，因为FF会把你的换行也当做一个DOM元素。比如说
<div id = "dom">
< div></div>
< div></div>
< /div>
我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById("dom").getElementsByTagName("div");这个没问题。可以alert(a.length)提示会是2，但是我们现在换一种方法获取就是我上章提到的var b = document.getElementById("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是2，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
function del_space(elem){
var elem_child = elem.childNodes;
for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

我解释一下这个函数
var elem_child = elem.childNodes;
把传进来的elem元素的子元素都扔给elem_child;

for(var i=0;i<elem_child.length;i++){
if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}
遍历这些子元素。如果这些元素里面有节点类型是文本并且这个文本类型节点的节点值是空的。就把它删除

(nodeName是JS里的一个属性，得到这个节点的节点类型，/\S/这个是非空字符在JS里的正规表达式。前面加一个感叹号就表示是空字符。test是JS的一个方法，就是把它里面的东西和外面的东西对比一下。nodeValue表示得到这个节点里的值removeChild也是个方法就删除外面这个元素的某个子元素)

这样只需要在调用这些属性之前调用这个函数把空格清理一下就能放心用了比如
<div id = "dom">
<div></div>
<div></div>
</div>

<script>
function dom(){
var a = document.getElementById("dom");
del_space(a);调用清理空格的函数
var b = a.childNodes;获取a的全部子节点；
var c = a.parentNode;获取a的父节点；
var d = a.nextSbiling;获取a的下一个兄弟节点
var e = a.previousSbiling;获取a的上一个兄弟节点
var f = a.firstChild;获取a的第一个子节点
var g = a.lastChild;获取a的最后一个子节点

}
</script>

(另外说下。var b = a.childNodes;获取的也是一个数组；所以比如我要用第一个节点就是childNodes[0];我要用第二个节点就是childNodes[1];以此类推)

前两章讲了获取DOM元素。这章就开始讲如何操作dom。1.针对页面上有的DOM元素操作，无非就是对这个dom元素的样式进行操作。如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。
今天这章我们就讲这两个应用
（一）对html里现有的DOM元素进行操作。
我上面说了，对现有的DOM元素进行操作，无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。

一是直接在html文档里写入样式例如
<div style="width:300px;height:200px;background000;"></div>。

二是在html文档头部用样式标签插入例如
<style>
#dom{width:300px;height:200px;background000;}
< /style>

三就是我们常用的链入方式例如
<link rel="stylesheet" type="text/css" href="css.css" />

这三种的用JS操作它样式的方法都不太相同
重点我们说第一种链入样式操作，因为是最常用的，也是最方便的。
第二种链入样式操作麻烦。
第三种链入样式操作麻烦不说，而且无法直接修改样式，想修改的话还必须用第一种的方法，也就是说只能看不能摸

第一种链入样式的操作方法
例<div id="dom" style="width:300px;height:200px;background000;margin-top:10px;"></div>
获取它的高度属性，首先当然是获取DOM元素了,用前几章的方法
var a = document.getElementById("dom");
再来获取它的高度属性，很简单
var h = a.style.height;
以此类推，获取宽度，获取背景色
var w = a.style.width;
var bg = a.style.background;
注意那个外边距属性是margin-top;
要获取这个不能直接写
var mt = a.style.margin-top;
要用JQ中提到的骆驼写法
var mt = a.style.marginTop;

获取它当然没什么用处，我们要能修改，修改起来也很方便。例如我们要把它的高度变为100，很简单,就一句
a.style.height = "100px";
其他的以此类推，我不再多说；

第二种链入样式的操作方法
<style>
#dom{width:300px;height:200px;background:#000;margin-top:10px;}
< /style>
这种操作需要区分浏览器。因为IE和FF对这个获取的代码不同,比如获取高度的方法是
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[0].style.height;
修改的话是这样的
domcss[0].style.height = "100px";
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

第三种链入样式的操作方法
<link rel="stylesheet" type="text/css" href="css.css" />
这种操作也需要区分浏览器。
获取的话一般都是写个函数，函数是这样的
function CurrentStyle(element){
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
假如我们那个css.css文件里面有height属性
获取方法是var a = CurrentStyle("dom").height;
无法用这里的方法直接修改，只能用第一种方法修改
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

（二）用JS动态创建DOM元素。
其实这个很简单就是几个JS的方法而已，不过要像盖房子一样一步一步来，比如我要创建一个这样的DOM元素：
<div id="dom" style="width:100px;height:100px;background:#000;margin-top:10px;"></div>

第一步，要创建一个div节点。var newobj = document.createElement("div");

第二步，要给这个节加一个id属性，并且属性名是dom。newobj.setAttribute("id","dom");

第三步，要给这个节点加属性了这里有两种方，一种就是我们前面说到的修改样式是这样的newobj.style.width = "100px";还有一种就是第二步用到的那个方法newobj.setAttribute("width","100px"),其他属性以此类推

第四步，就是要把这个节点给放到html文档里，方法是这样的document.body.appendChild(newobj)这句的意思是这样的。document.body就是获取了body元素
，appendChild(newobj)就是向这个body元素里添加一个孩子元素就是我们创建的那个节点。

如果你想移除这个节点是这样document.body.removeChild(newobj);
（这个可以换的，换成你想要向那个里面添加子元素的的那个元素，比如我想向id为con的这个元素添加节点我们就这样写document.getElementById("con").appendChild(newobj)）

从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡，用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多。下面我就写几个给大家看看
一，点击传参方法
<script>
function tab(dom){
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
for(var i=0;i<list.length;i++){
if(list==dom){
list.className = "on";
con.style.display = "block";
}
else{
list.className="";
con.style.display="none";
}
}
}
</script>
< div id="list">
< ul>
< li class="on">1</li>
< li>2</li>
< li>3</li>
< li>4</li>
< /ul>
< /div>
< div id="con">
< div style="display:block;">111111</div>
< div style="display:none;">222222</div>
< div style="display:none;">333333</div>
< div style="display:none;">444444</div>
< /div>
我解释一下
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
获取dom元素，这个不用说了吧。写什么效果第一件事都是获取元素
for(var i=0;i<list.length;i++){
if(list==dom){
list.className = "on";
con.style.display = "block";
}
else{
list.className="";
con.style.display="none";
}
遍历一下所有的li元素，找到和传进来的dom一样的东西，然后把他的class设置为on,并且把相对应的div给显示出来，其他的就全部把className设置为空，并且把对应的div给隐藏。
大概就是这样。但是大家肯定就都发现了这样的写法的缺点，就是每个li都要设置一个onclick时间传入它自己。这样有点违反了结构与表现相分离的道理。所以我们就换种写法
二，直接写入鼠标事件方法
<script>
function tab(){
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
for(var i = 0;i<list.length;i++)
{
list.onclick=function(){
for(var i=0;i<list.length;i++){
if(list==this){
list.className = "on";
con.style.display = "block";
}
else{
list.className="";
con.style.display="none";
}
}
}
}
}
window.onload=function(){tab();}
< /script>
< div id="list">
< ul>
< li class="on">1</li>
< li>2</li>
< li>3</li>
< li>4</li>
< /ul>
< /div>
< div id="con">
< div style="display:block;">111111</div>
< div style="display:none;">222222</div>
< div style="display:none;">333333</div>
< div style="display:none;">444444</div>
< /div>
只是简单的改动一下就可以了，因为在JS中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下，如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同，然后下面的操作和第一种方法一样
（这样两种方法都是比较简单的写法，在JS里还有一些比较高级复杂的写法，但是用到的思想和这两种写法大多一样。）