Javascript中怎么实现Dom编程

Javascript 中怎么实现Dom编程，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司专业为企业提供东兰网站建设、东兰做网站、东兰网站设计、东兰网站制作等企业网站建设、网页设计与制作、东兰企业网站模板建站服务，10年东兰做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

Javascript Dom编程

一：Document Object Model

在DOM模型中，每一个元素（element）、属性（attribute）、文本（text）都可以看做是一个对象，javascript可以访问独立访问这些对象，用一些方法可以找到和改变这些对象。

DOM是这样规定的，每个HTML的标签是一个元素节点，包含在元素中的文本是文本节点，每一个HTML属性是一个属性节点。

二：访问DOM的节点

A：通过ID获取元素

vartarget=document.getElementById("berenger");

B：通过TagName获取元素

varlistItems=document.getElementsByTagName("li");

listItems是一个类似数组的对象，可以用listItems.Length来获得对象的长度。

C：通过ClassName获取元素

Javascript Dom编程中大多数情况下使用className来获取元素比tagname要简便，但是dom没有提供相应的函数，所以我们要创建一个方法。

可以分解为以下三步：

1：搜索文档中的所有元素。

2：对每一个元素，把所属的class和所要找寻的class做比较。

3：如果相同，添加到list中。

js代码如下：

VarCore={};   Core.getElementsByClass=function(theClass)  {  varelementArray=[];  //IE中不支持getElementsByTagName("*")，用document.All。  if(document.all)  {  elementArray=document.all;  }  else  {  elementArray=document.getElementsByTagName("*");  }  varmatchedArray=[];  varpattern=newRegExp("(^|)"+theClass+"(|$)");  for(vari=0;i
三：操纵DOM树
parentNode：父元素。
childNodes：子元素。
firstChild：***个节点。
lastChild：***一个节点。
nextSibling：下一个同级节点。
previousSinbling：上一个同级节点。下面看一下Javascript Dom编程中的属性用法。
四：属性
A：获得属性值（getAttribute）
163  //js   varkoko=document.getElementById("koko");   varkokoHref=koko.getAttribute("href");
注：getAttribute不能用document对象调用。
B：设置属性值（setAttribute）
setAttribute不但可以修改现有属性的值，而且可以添加新的属性，类似getAttribute，它不能通过document调用，只能通过元素节点来调用。需要传递两个参数：
obiect.setAttribute(attribute,value)
例子
varkoko=document.GetElementById("koko");   koko.setAttribute("title","websiteinchina");
五：javascript与样式
A：style.style
Javascript Dom编程中中每一个元素节点都包含一个style.style，来改变此元素的呈现。
例：改变元素文本的颜色用style.Color
Varscarlet=document.getElementById("scarlet");   scarlet.style.Color="#FF0000";
B：使用class改变样式
在css中，内嵌的样式表被看做是不好的习惯，那么***的改变元素呈现的方法就是使用javascript改变元素的class。
首先我们判断是否含有要改变的class。
Core.hasClass=function(target,theClass)  {  varpattern=newRegExp("(^|)"+theClass+"(|$)");   if(pattern.test(target.className))  {  returntrue;  }  returnfalse;  };
1：添加class
Core.addClass=function(target,theClass)  {  if(!Core.hasClass(target,theClass))  {  if(target.className=="")  {  target.className=theClass;  }  else  {  target.className+=""+theClass;  }  }  };
2：清除class
Core.removeClass=function(target,theClass)  {  varpattern=newRegExp("(^|)"+theClass+"(|$)");  targettarget.className=target.className.replace(pattern,"$1");  targettarget.className=target.className.replace(/$/,"");  };
看完上述内容，你们掌握Javascript 中怎么实现Dom编程的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
            
            
                        

            分享文章：Javascript中怎么实现Dom编程            

            标题来源：http://cdkjz.cn/article/pgdico.html