innerText innerHTML outerHTML textContent JavaScript EcmaScript HTML
publicité
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Les Propriété s innerText – innerHTML - outerHTML - textContent JAVASCRIPT (Programmation Internet) VOL. XXIV J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [email protected] I. LES BALISES HTML : Les éléments HTML existent sous deux moutures : à balise ouverte (<br />, <input />, <img />…) et à balise fermée qui exigent leur pair fermante (<div></div>, <quote></quote>, <html></html>…). On peut accéder ou modifier le contenu des balises fermées via leurs propriétés intrinsèques : « innerHTML », « outerHTML », « innerText », « textContent ». « el.innerHTML » comme membre de gauche (+=) (assignment left-hand side) 1. conserve le code de formatage du texte 2. utilise le <\br> pour le retour de ligne « el.innerHTML » ou « el.textContent » comme membre de droite (assignment right-hand side) 1. reconnaît et utilise les balises HTML 2. conserve le code de formatage du texte « el.outerHTML » comme membre de droite (assignment right-hand side) 1. retient tout l'élément (les deux balises HTML et le contenu) 2. conserve le code de formatage du texte « el.outerHTML » comme membre de gauche (assignment left-hand side) innerText-innerHTML-outerHTML-textContent - 1/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV 1. remplace, naturellement, tout l'élément (les deux balises HTML et le contenu) par le texte spécifié (à ne faire que si vraiment nécessaire), et 2. conserve le code de formatage du texte affecté « el.innerText » comme membre de droite (assignment right-hand side) 1. Ne lit que le texte utile 2. Ignore (saute, rejette, escamote) les balises HTML 3. Ignore les codes de formatage du texte « el.innerText » comme membre de gauche (+=) (assignment left-hand side) Prend le texte en brut rejette tous les codes de formatage même pour des textes saisis avant, avec « el.innerHTML » comme ici, et EMPÊCHE DE FRECONNAÎTRE TOUT ÉLÉMENT (BALISE) HTML, comme le < hr > mais accepte le < br >. Pour le retour à la ligne, utilisez le caractère d'échappement « \n » à la place de la balise < br >. Bien entendu, le respect des formats ne se fait que dans les éléments qui acceptent le formatage de textes (<p>, </div>, etc), pas par exemple dans le <textarea> ou le <input>… <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows1252" /> <base target="_top"> <title>innerText innerHTML outerHTML textContent</title> <meta content="30 days" name=Revisit-after> <meta name=ROBOTS content="INDEX,FOLLOW"> <meta http-equiv=Page-Enter content="RevealTrans(Duration=3,Transition=23)"> <meta http-equiv=Page-Exit content="RevealTrans(Duration=3,Transition=23)"> <meta http-equiv=Content-Language content=fr-be> <meta name=Title content="Propriétés innerText innerHTML outerHTML textContent|Informatique"> <meta name=Created content="Mardi 07 mai 2019 - 09:08:28 (AM)"> <meta name=Modified content="Mardi 07 mai 2019 - 13:31:22 (PM)"> <meta name=description content="Les propriétés innerText innerHTML outerHTML textContent"> <meta name=keywords content="machine à voter,vote,élections,scrutin,urnes,candidat,postulant,prétendant,candidats,postula nts,prétendants,scruter"> <meta name="author" content="Dr. Jean-Baptiste Dadet DIASOLUKA Nzoyifuanga Luyalu (CNOM : 0866) - Ophtalmologiste"> <meta name="license" content="gratuit"> <meta name="author-address" content="[email protected]"> <meta name="author-site" content="http://diasmath.blogg.org"> <meta name="author-site2" content="http://www.amessi.org/diasoluka"> <meta name="author-site3" content="https://www.vk.com/diasoluyalu"> <style> innerText-innerHTML-outerHTML-textContent - 2/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV div{ width:450;border:solid 1pt; margin-bottom:30pt;padding:5pt} </style> </head> <body> <div class="ndiv"> <b>Bold <u>Souligné</u></b> Normal </div> <div class="test" onclick="frepl()"> <b>Bold <u>Souligné</u></b> Normal </div> NHTML<br> <div id="nhtml"> </div> NTEXT<br> <div id="ntext"> </div> </body> <script const const const const type = "text/javascript"> "use strict"; el=document.querySelector(".ndiv"); nhtml=document.getElementById("nhtml"); ntxt=document.getElementById("ntext"); test=document.querySelector(".test"); nhtml.innerHTML+= `<b>« el.innerHTML » comme <i>membre de <u>gauche</u></i> (+=)</b><br>(assignment left-hand side)<ol>`+ `<li>conserve le code de formatage du texte`+ `<li>utilise le < br > pour le retour de ligne</ol>`+ `<b>« el.innerHTML » ou « el.textContent » comme <i>membre de <u>droite</u></i></b><br>(assignment right-hand side)<ol>`+ `<li>reconnaît et utilise les balises HTML`+ `<li>conserve le code de formatage du texte</ol>`+ `<b>« el.outerHTML » comme <i>membre de <u>droite</u></i></b><br>(assignment right-hand side)<ol>`+ `<li>retient tout l'élément (les deux balises HTML et le contenu)`+ `<li>conserve le code de formatage du texte</ol>`+ `<b>« el.outerHTML » comme <i>membre de <u>gauche</u></i></b><br>(assignment left-hand side)<ol>`+ `<li>remplace, naturellement, tout l'élément (les deux balises HTML et le contenu) par le texte spécifié (à ne faire que si vraiment nécessaire), et`+ `<li>conserve le code de formatage du texte affecté</ol>`+ `<b>« el.innerText » comme <i>membre de <u>droite</u></i></b><br>(assignment right-hand side)<ol>`+ `<li>Ne lit que le texte utile`+ `<li>Ignore (saute, rejette, escamote) les balises HTML`+ `<li>Ignore les codes de formatage du texte</ol><hr>`; nhtml.innerHTML+= nhtml.innerHTML+= nhtml.innerHTML+= nhtml.innerHTML+= nhtml.innerHTML+= nhtml.innerHTML+= `1. `2. `3. `4. `5. `6. nhtml.innerHTML+=el.innerHTML= ${el.innerHTML}<br>`; nhtml.innerHTML+=el.innerText= ${el.innerText}<br>`; nhtml.innerHTML+=el.innerHTML= ${el.innerHTML}<br>`; nhtml.innerHTML+=el.innerText= ${el.innerText}<br>`; nhtml.textContent+=el.innerText= ${el.textContent}<br>`; nhtml.outerHTML+=el.innerText= ${el.outerHTML}`; ntext.innerHTML+= `<b>« el.innerText » comme <i>membre de <u>gauche</u></i> innerText-innerHTML-outerHTML-textContent - 3/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV (+=)</b><br>(assignment left-hand side)<br><ol>`+ `<li>Prend le texte en brut<li>rejette tous les codes de formatage même pour des textes saisis avant, avec « el.innerHTML » comme ici, et EMPÊCHE DE FRECONNAÎTRE TOUT ÉLÉMENT (BALISE) HTML, comme le < hr > mais accepte le < br >.<br><li>Pour le retour à la ligne, utilisez le caractère d'échappement « \\n » à la place de la balise < br >.<br>${"=".repeat(50)}<br>`; ntext.innerText+= ntext.innerText+= ntext.innerText+= ntext.innerText+= ntext.innerText+= ntext.innerText+= `7. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`; `8. ntext.innerText+= el.innerText= ${el.innerText}\n\n`; `9. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`; `10. ntext.innerText+= el.innerHTML= ${el.innerHTML}\n`; `11. ntext.innerText+= el.innerText= ${el.innerText}\n\n`; `12. ntext.innerText+= el.innerText= ${el.innerText}`; function frepl(){ test.outerHTML= `13. test.outerHTML= nhtml.outerHTML= `+ `<strike>${nhtml.outerHTML}</strike>\n`; } </script> </html> Exécution : innerText-innerHTML-outerHTML-textContent - 4/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu innerText-innerHTML-outerHTML-textContent JavaScript Tome- XXIV - 5/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Observez bien ce couple d’éléments. Cliquez-en le deuxième et tout son « outerHTML » sera remplacé par le « outerHTML » de l’élément « DIV id=nhtml », par la fonction ci-dessous. Pour reconnaître facilement ce nouvel élément, on va la rayer : function frepl(){ test.outerHTML= `13. test.outerHTML= nhtml.outerHTML= `+ `<strike>${nhtml.outerHTML}</strike>\n`; } Après le clic sur le deuxième élément, il se transforme en ceci : innerText-innerHTML-outerHTML-textContent - 6/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV La suite est restée inchangée : innerText-innerHTML-outerHTML-textContent - 7/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV Kinshasa, le 7 mai 2019 (5:26 ). Mots-clés : innerText, innerHTM, outerHTML, textContent, HTML, JAVASCRIPT, ECMASCRIPT, programmation internet, balises, balises HTML, éléments HTML, balise ouverte, balise ouvrante, balise fermée, propriétés intrinsèques, assignment left-hand side, assignment right-hand side, code de formatage, texte brut, caractère d’échappement DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/Le-Dosage-Des-MedicamentsinnerText-innerHTML-outerHTML-textContent - 8/9 mardi, 7. mai 2019 (5:26 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome- XXIV en-Cac-Cas • https://www.scribd.com/document/377035454/Le-Hasard-Des-ThermometresNon-contact-a-Infrarouge • https://www.scribd.com/document/376222482/Petite-Introduction-AuxFonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-PourQuoi-Faire • https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire • https://www.scribd.com/document/375349851/La-variable-This • https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS • https://www.scribd.com/document/374789297/Format-Interne-Des-ObjetsJavaScript • https://www.scribd.com/document/374788758/Iterations-en-JavaScript • https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation • https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMCindice-de-doduite-Selon-Dr-Diasoluka • https://www.scribd.com/document/373847209/Property-Descriptors • https://www.scribd.com/document/373833282/l-Objet-Global-Window • https://www.scribd.com/document/372665249/Javascript-Tome-II • https://www.scribd.com/document/355291488/motilite-oculaire-2 • https://www.scribd.com/document/355291239/motilite-oculaire-I • https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs • https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques • https://www.scribd.com/document/320856721/Emission-31-Jul-2016 • https://www.scribd.com/document/318182982/Complication-Visuelle-duTraitement-de-La-Malaria • https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-EtType-Respiration • https://www.scribd.com/document/315746265/Classification-DesMedicaments • https://www.scribd.com/document/315745909/Incongruences-Heresies-etHeterodoxies-de-la-Notion-de-Laboratoire • https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-EtType-Respiration innerText-innerHTML-outerHTML-textContent - 9/9 mardi, 7. mai 2019 (5:26 )
