UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  7. HTML Document

7. HTML Document

7.1 Ouvrir, écrire (dans) et fermer un document:

document.open()

document.write(balisage)

document.close()

document.open(); // ouvre un document

document.write("<h1>Hello !</h1>");

document.close();

7.2 Extraction d’éléments et d’attributs

document.getElementById(id_élément)

document.getElementById("p1")

document.getElementsByName(nom_élément)

//<div name="up">200</div>

//<div name="up">145</div>

//<div name="other">178</div>

up_divs = document.getElementsByName("up"); // retourne une liste de nodes

dump(up_divs.item(0).tagName); // returns "div"

document.getElementsByTagName(nom_balises)

elements = document.getElementsByTagName(h1); //retourne une liste des h1

Exemple 7-1: Extraction d’éléments avec leur id

// pour <p id="p1" class="reggy" align="right">texte</p>

premierParagraphe = document.getElementById("p1");

listeAttributs = premierParagraphe.attributes;

 

 

Quelques propriétés:

  • il existe plusieurs propriétés pour extraire qqs. éléments spécifiques, par ex.

document.forms

document.body

document.links

document.referrer

document.images

var listeimg = document.images;
for(var i = 0; i < listeimg.length; i++) {
    if(listeimg[i] == "xxx.gif") {
      alert("Attention aux noms d’images"!)
    }
}

Exemple 7-2: Tree walking: Collectionner les noms d’éléments

    var node_list = "";
 
    function do_document () {
      mark_tags(document.body);
      alert ("This text has the following elements: " + node_list);
    }
 
function mark_tags(node) {                     
    // Check if n is an Element Node
    if (node.nodeType == 1 /*Node.ELEMENT_NODE*/)  {
	// Append the node name to the list
	node_list += node.nodeName + " ";
	// Let's see if there are children
	if (node.hasChildNodes()) {
	    // Now get all children of n
	    var children = node.childNodes;               
	    // Loop through the children
	    for(var i=0; i < children.length; i++) {  
                mark_tags(children[i]);      // Recurse on each one
	    }	}   } }  
</script>
</head><body>
   <h1>Tree walking</h1>
    <input type=button onClick="do_document();" value="Show body node names">

7.3 Création et modification d’éléments

document.createElement (nom_du_tag)

var div = document.createElement("div");

document.createTextNode (texte)

parent_node.insertBefore(new_node, existing_node)

preface.insertBefore(new_div_node, titre)

Exemple 7-3: Création d’un élément et insertion dans le DOM

function change_me() {
      var doc       = window.document;
      var preface   = doc.getElementById("preface");
      var titre     = doc.getElementById("preface_title");
      
      // on cree un élément div
      var new_div_node = doc.createElement("div")
;
      // on cree un nouveau TextNode
      var contenu  = doc.createTextNode
 ("Auteur: DKS et collaborateurs");
      // on le met dans le div
      new_div_node.appendChild(contenu); 
     
      // et on insere ce div devant l'élément qui a l'ID "preface"
      preface.insertBefore(new_div_node, titre)
;
}
.....

Voici le fragment HTML:

   <div id="preface"
>
      <h2 id="preface_title
">La préface</h2>
      blabla (qui a écrit cela ?)
    </div>
    <p>  <button onclick="change_me()
;">Transformez-moi !</button>  <p>

Exemple 7-4: Création d’un élément et insertion dans le DOM 2


UPPREVIOUS NEXT -- TIE