JavaScript DOM(三) Element 类型

Dear 丶 2022-08-23 05:43 185阅读 0赞

# 简介: #

在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");

## 添加元素： ##

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

document.body.appendChild(div);

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

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

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