Utiliser les HTMLElement s avec n'importe quel navigateur (enfin pour Firefox, Opera, IE 6 & 7b2 testé)
L'implémentation de méthode sur ces classes permet de ne pas à avoir à faire une boucle sur tous les éléments du documents et d'ajouter à chaque élements la fonction et les problèmes que cela pose (perfomance, créations de nouveaux éléments en live ...).
behavior.htc (pour ie !)
<PUBLIC:COMPONENT>
<script type="text/javascript">
[#green]/*
HTMLElements Prototyping
Thank to Jason Davis, http://www.browserland.org/scripts/htmlelement/
and http://www.webmasterworld.com/forum91/4886.htm
Here copying all methods & fields prototyped by script
*/[/#]
[#green]// inherite all methods & fields of HTMLElement[/#]
for(var j in HTMLElement.prototype)
element[j] = HTMLElement.prototype[j];
[#green]//if nodeName field exist & if is not document (HTMLElement methods & fields inherited)[/#]
if(typeof element.nodeName != 'undefined' && element.nodeName != '#document')
{
var constructorName = 'HTML'+ constructors[element.nodeName] +'Element';
[#green]// inherite all methods & fields of self HTMLElement constructor[/#]
for(var j in eval(constructorName).prototype)
element[j]= eval(constructorName).prototype[j];
}
</script>
</PUBLIC:COMPONENT>
script.js (le javascript)
var constructors = {
HTML: 'Html', HEAD: 'Head', LINK: 'Link', TITLE: 'Title', META: 'Meta',
BASE: 'Base', ISINDEX: 'IsIndex', STYLE: 'Style', BODY: 'Body',
FORM: 'Form', SELECT: 'Select', OPTGROUP: 'OptGroup', OPTION: 'Option',
INPUT: 'Input', TEXTAREA: 'TextArea', BUTTON: 'Button', LABEL: 'Label',
FIELDSET: 'FieldSet', LEGEND: 'Legend', UL: 'UList', OL: 'OList',
DL: 'DList', DT: 'Span', DD: 'Span', DIR: 'Directory', MENU: 'Menu', LI: 'LI', DIV: 'Div',
P: 'Paragraph', H1: 'Heading', H2: 'Heading', H3: 'Heading', H4: 'Heading',
H5: 'Heading', H6: 'Heading', Q: 'Quote', PRE: 'Pre', BR: 'BR',
BASEFONT: 'BaseFont', FONT: 'Font', HR: 'HR', INS: 'Mod', A: 'Anchor',
IMG: 'Image', OBJECT: 'Object', PARAM: 'Param', APPLET: 'Applet',
MAP: 'Map', AREA: 'Area', SCRIPT: 'Script', TABLE: 'Table',
CAPTION: 'TableCaption', COL: 'TableCol', TBODY: 'TableSection',
THEAD: 'TableSection', TFOOT: 'TableSection', TR: 'TableRow',
TD: 'TableCell', TH: 'TableCell', FRAMESET: 'FrameSet', FRAME: 'Frame', IFRAME: 'IFrame',
SPAN: 'Span', FIELDSET : 'FieldSet'
};
[#green]//pour la Classe [#darkred]HTMLElement[/#][/#]
if(typeof HTMLElement == 'undefined') var HTMLElement = function(){};
[#green]//Pour les sousClasses [#darkred]HTML[/#]Xxx[#darkred]Element[/#] ou Xxx est contenu dans le tableau [i]constructor[/i][/#]
for(var j in constructors)
{
var constructorName = 'HTML'+ constructors[j] +'Element';
if(eval('typeof ' + constructorName +' == \'undefined\''))
eval('var ' + constructorName + ' = function(){}');
}
[#green]//Et la partie la plus interéssante du script celle pour laquel tout ce script est fait : l'implémentation de méthode au classes HTMLElement s
Ici c'est l'implémentation de la méthode foo() sur tous les éléments Inputs[/#]
[#blue]HTMLInputElement.prototype.foo = function()
{
alert(this.value)
};[/#]
index.html (pour le test)
<html>
<head>
<title>HTMLElement.prototype</title>
<script type="text/javascript" src="script.js"></script>
[#green]<!--[if ie]>
<style type="text/css">
*{behavior:url(behavior.htc)}
</style>
<![endif]-->[/#]
</head>
<body>
<input type="button" onclick="this.foo()" value="click">
</body>
</html>
Lors du clique sur le bouton il doit appraître une alertbox avec la valeur de l'input (c.a.d. "click").
Modifié par heyman85 (14 Jun 2006 - 12:15)
