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
diasfb@mail2world.com
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="diasfb@mail2world.com">
<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
diasfb@mail2world.com
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 )
Téléchargement
Random flashcards
Commune de paris

0 Cartes Edune

Ce que beaucoup devaient savoir

0 Cartes Jule EDOH

découpe grammaticale

0 Cartes Beniani Ilyes

Anatomie membre inf

0 Cartes Axelle Bailleau

Fonction exponentielle.

3 Cartes axlb48

Créer des cartes mémoire