JavaScript DOM的Element介绍

在JavaScript中除了document类型之外,Element类型就要算是Web编程中最常用的类型了。Element类型用于表现XML或者HTML元素,提供了对元素标签名,子节点及特性的访问; 特征: 1.nodeType的...

在JavaScript中除了document类型之外,Element类型就要算是Web编程中最常用的类型了。Element类型用于表现XML或者HTML元素,提供了对元素标签名,子节点及特性的访问;


特征:

1.nodeType的值为1;


2.nodeName的值为元素的标签名;


3.nodeValue的值为null;


4.parentNode可能是document或Element;


5.其子节点可能是Element,Text,Coment,ProcessingInstruction,CDATASection或EntityReference。


实例:

访问元素标签名:


<body>
<div id="myDiv">
 
</div>
 </body>
 
 <script>
var myDiv = document.getElementById('myDiv');
alert(myDiv.tagName);
alert(myDiv.tagName==myDiv.nodeName);
 </script>

再HTML中标签名始终都以全部大写表示,而在有的XML中标签名始终会与源代码保持一致,如果不确定标签名的大小写形式,建议统一转成小写;

对比标签名:

if(element,tagName.toLowerCase()=="div"){
//在此执行某些操作
}


HTM元素:

所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下拉标准特效。


1.id,元素在文档的唯一标识符。


2.title,有关元素的附加说明信息


3.lang,元素内容的语言代码,很少使用。


4.div,语言的方向


5.className元素的class特效对应,即为元素指定的css类。

<body>
<div id="myDiv" class="class" title="hello" lang="cn" > 
 
</div>
 </body>
 
 <script>
var myDiv = document.getElementById('myDiv');
alert(myDiv.tagName);
alert(myDiv.tagName==myDiv.nodeName);
alert(myDiv.id);
alert(myDiv.className);
alert(myDiv.title);
alert(myDiv.lang);
 
 </script>


attrubutes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,与NodeList类似,也是一个动态的集合。元素的每一个特性都由一个attr节点表示,每个节点都保存在namedNodeMap对象中。


遍历元素的特性:

<body>
<div id="myDiv" class="class" title="hello" lang="cn"> 
 
</div>
 </body>
 
 <script>
var myDiv = document.getElementById('myDiv');
alert(outAttributes(myDiv));
function outAttributes(element){
var pairs=new Array(),
attrName,attrValue,i,len;
for(i=0,len=element.attributes.length;i<len;i++){
attrName=element.attributes[i].nodeName;
attrValue=element.attributes[i].nodeValue;
pairs.push(attrName+"=\""+attrValue+"\"");
}
return pairs.join(" ");
}
 
 </script>

本函数使用了一个数组来保存名值对,最后再以空格分隔符拼接起来,这是序列化长字符串的椅子常用技巧;

创建元素:

 var div=document.createElement("div");


添加元素:

<script>
 var div=document.createElement("div");
div.id="newDiv";
div.classNmae="box";
 </script>


这样创建元素并未被添加到文档树种,我们要使用appendChild()方法insertBefore()或replaceChild()方法。

document.body.appendChild(div);


当然你也可以直接创建并且加上标签:

var input=document.createElement("<input type=\"checkbox\">");
document.body.appendChild(input);

当然jquery提供了更简单快捷的办法,有兴趣的可以自己去查看一下;

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
王凯
王凯

92 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章