用javascript定义和操作自定义HTML元素

前面的文章探讨了使用javascript来操纵HTML元素的自定义属性，那么在HTML页面中，除了系统支持的HTML元素外，是否可以建立自定义的HTML元素呢？答案是可以的。

自定义的HTML元素与系统自身的HTML元素地位相同，都可以用document.getElementById来获得，区别在于，自定义的HTML元素都是不可见的，类似于隐藏控件。

使用自定义HTML元素，我们就可以建立多种隐藏控件，而不一定拘泥于只能建立input的hidden元素了；另外，还可以用于某些特定方面的需求！

如在HTML页面中直接建立：

象创建系统自带的HTML元素那样添加：

var  cy  =  document.createElement( " YYY " );
cy.id  =  " customControl_YYY " ;
cy.value  =  " 自定义元素yyy " ;
cy.checked  =  true ;
document.body.appendChild(cy);

2）用javascript来操作：

alert(document.getElementById("customControl_YYY").value);
alert(document.getElementById("customControl_YYY").checked);

在这里，Firefox支持直接取值，而不须用attributes属性集合。

代码如下：

< html >
     < head >
         < title > 用javascript定义和操作自定义HTML元素 </ title >
         < script  language ="javascript" >
            function getXXXValue()
            {
                //alert(document.getElementById("customControl_XXX").value);                                                //IE中可以使用
                alert(document.getElementById("customControl_XXX").attributes["value"].value);            //IE Firefox中均可使用
            }
            
            //IE Firefox中均可使用
            function createYYYControl()
            {
                var cy = document.createElement("YYY");
                cy.id = "customControl_YYY";
                cy.value = "自定义元素yyy";
                cy.checked = true;
                document.body.appendChild(cy);
                
                alert(document.getElementById("customControl_YYY").value);
                alert(document.getElementById("customControl_YYY").checked);
            }
         </ script >
     </ head >
     < body >
         < xxx  id ="customControl_XXX"  value ="自定义元素xxx" ></ xxx >
         < input  type ="button"  value ="取得xxx元素的值"  onclick ="getXXXValue();" >
         < input  type ="button"  value ="生成yyy元素并取得该元素的值"  onclick ="createYYYControl();" >
     </ body >
</ html >

源代码: http://files.cnblogs.com/redleaf1995/CustomHtmlControl.rar

转载于:https://www.cnblogs.com/redleaf1995/archive/2008/04/17/1157709.html