DOM

Liens utiles

• Site du livre eloquentjavascript.net
• Code source des exemples

parser(document.body) parser(document.documentElement) positions Animer ! HG

Noeux

document.documentElement

racine

document.body

racine du corps du document affiché

noeud.childNodes

instance de NodeList (length, mais pas de slice ou map). Ne retourne pas noeuds attributs.

Contournement: utiliser la_children=Array.from(lo_children)

noeud.children

sous-ensemble de childNodes avec uniquement les type 1 (element)

noeud.firstChild

previousSibling, nextSibling, lastChild, parentNode renvoie null ou noeud

noeud.nodeType

1: Node.ELEMENT_NODE, 3:Node.TEXT_NODE, 8: Node.COMMENT_NODE

noeud.nodeName

En majuscules (utiliser nom.toLowerCase())

noeud.nodeValue

valeur

noeud.textContent

valeur, Le texte à l’intérieur de l’élément : le HTML moins tous les <tags>.

noeud.getElementsByTagName("a")[0]

Retourne le premier descendant de type lien

noeud.getElementsByClassName("cache")[0]

Retourne le premier descendant de classe "cache"

noeud.remove()

Le supprime du parent

document.createTextNode(texte)

Inutile en général on peut utiliser textContent du noeud.

noeud.textContent="texte"

A préférer à innerText qui évalue ce qui est affiché et inutilisable si noeud non HTML. Par contre supprime les <br>

document.createElement(tagName)

noeud.appendChild(fils)

Ajoute un fils à la fin de childNodes

noeud.insertBefore(nouveau,filsRepere)

Ajoute un nouveau fils (ou déplace) dans childNodes, juste avant le fils repère.

noeud.replaceChild(nouveau,ancien)

Ajoute un nouveau fils dans childNodes, à la place de ancien.

noeud.attributes

liste (des noeuds) attributs d'un élément avec name et value (similaire à children)

noeud.setAttribute(nom,valeur)

et noeud.getAttribute(nom) pour noeuds de type 1 (element)

noeud.attribut==noeud.getAttribute("attribut") sauf pour noeud.className==noeud.getAttribute("class") (mot réservé) et attributs utilisateurs (conseil: préfixer par "data-")

noeud.offsetWidth

Largeur en pixels (resp. offsetHeight ). clientWidth la même chose sans la bordure.

noeud.getBoundingClientRect()

objet avec propriétés top,left relatives au point en HG de l'écran. bottom et right peuvent se déduire avec offset W et H

document.body.clientWidth

largeur de la page (scrollBar déduite et donc mieux que innerWidth)

window.innerHeight

hauteur de la fenêtre

window.pageYOffset

idem window.scrollY (resp X). Indique de combien de pixels est le scroll vertical ("position" du point HG de l'écran dans la page complète)

noeud.style

Accès aux éléments CSS (fontFamily, top ou left par exemple (ne pas oublier position:relative pour pouvoir bouger un objet)

document.querySelectorAll(".tableau td")

Retourne liste de noeuds. Aussi méthode des éléments. Syntaxe CSS.

document.querySelector("#tableau caption")

Retourne le premier élément qui correspond.

• Exercice montagnes
• byTagName

parser=function(po_noeud){
	let ls_retour='';
	//ls_retour+='\n<br>nodeType: '+po_noeud.nodeType
	if (po_noeud.nodeType==1){ // On met la liste des attributs puis on parse les noeuds enfants
		ls_retour+='\n<li><strong>'+po_noeud.nodeName+'</strong><ul>'
		la_attributs=po_noeud.attributes
		for (let i=0;i<la_attributs.length;i++) {ls_retour+='<em>'+la_attributs[i].name+'</em>=<font color=violet>'+la_attributs[i].value+'</font><br>'}
		for (let lo_child of  po_noeud.childNodes) ls_retour+=parser(lo_child);
	ls_retour+='</ul>'
	}
	if (po_noeud.nodeValue && po_noeud.nodeValue.trim()) ls_retour+= po_noeud.nodeValue.replace(/</g,"&lt;");
	return ls_retour
}


let go_img=document.getElementById("terre")
let go_lune=document.getElementById("lune")
let gd_angle=0
let gd_lastTime=0




function animer(pd_time) {
	var li_hauteur=(window.innerHeight-go_img.offsetHeight)/2
	var li_largeur=(document.body.clientWidth-go_img.offsetWidth)/2
	var ld_deltaAngle=0.0005; //radians par seconde
	gd_angle+=(pd_time-gd_lastTime)*ld_deltaAngle;
	gd_lastTime=pd_time;
	//console.log(gd_angle,go_img.style.top)
	go_img.style.top=li_hauteur+Math.round(Math.sin(gd_angle)*li_hauteur)+'px'
	go_img.style.left=li_largeur+Math.round(Math.cos(gd_angle)*li_largeur)+'px'
	go_lune.style.top=parseInt(go_img.style.top)+(go_img.offsetHeight/ 2)-(go_lune.offsetHeight/ 2)+Math.round(Math.sin(20*gd_angle+Math.PI/3)*30)+'px'
	go_lune.style.left=parseInt(go_img.style.left)+(go_img.offsetWidth/ 2)-(go_lune.offsetWidth/ 2)+Math.round(Math.cos(20*gd_angle+Math.PI/3)*30)+'px'
	//minuterie=setTimeout("animer("+Date.now()+")",20); //alternative à requestAnimationFrame
	minuterie=requestAnimationFrame(animer) //passe le temps écoulé en paramètre à la fonction callBack. cancelAnimationFrame(minuterie) 
}