11.1 API Selector :
Les deux méthodes principales de SelectorsAPI sont : querySelector() et querySlelctorAll() Dans les navigateurs compatibles, elles peuvent être appelées via des instances de types Domcument et Element.
Méthode 11.1.1 querySelector() :
La méthode querySelector() reçoit un sélecteur CSS et renvoie le premier élément qui correspond au sélecteur. S'il n'y a pas de correspondance, elle renvoie null.
L'appel de la méthode querySelector() via le document trouvera les éléments correspondants dans la plage des éléments du document.
Elementquery appelant la méthode querySelector() ne trouvera que les éléments correspondants dans les éléments descendants de l'élément
11.1.2querySelectorAll()
var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
// var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
}11.1.3matchesSelector
Cette méthode reçoit un paramètre, qui est le sélecteur CSS, et renvoie true si la méthode appelée correspond à l'élément.
11.2 Element Traversal
L'API Element Traversal ajoute les 5 attributs suivants aux éléments DOM.
1 : childElementCount : renvoie le nombre d'éléments enfants
2 : firstElementChild : pointe vers le premier élément enfant, version de l'élément firstChild
3 : lastElementChild : pointe vers le dernier élément Child, version de l'élément lastChild ;
4 : previousElementSibling : pointe vers l'élément frère précédent
5 : nextElementSibling : pointe vers l'élément frère suivant ; HTML5
11.3.1 Extensions liées aux classes
1 : getElementByClassName() Cette méthode reçoit un paramètre, une chaîne d'un ou plusieurs noms de classe, et renvoie une NodeList avec tous les éléments spécifiés.
2 : attribut classList : (pour class="Opération ici")
L'attribut classList est une instance du nouveau type de collection DOMTokenList. Semblable aux autres collections DOM. Possède les méthodes suivantes :
add(value) : ajoute la chaîne donnée à la liste.
contains(value) : Indique si la valeur donnée existe dans la liste. Si c'est le cas, elle retournera true. Sinon, elle retournera false.
remove(value) Supprime la chaîne donnée de la liste
toggle (Si la valeur donnée existe dans la liste, supprimez-la, si la valeur donnée n'existe pas, ajoutez-la.)
À ce stade, vous pouvez utiliser la méthode ci-dessus pour manipuler les paramètres à l'intérieur.<p id="select" class="aa ss dd ff hh "></p>
<script>
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
</script>11.3.2 Gestion des focus
HTML5 ajoute également la fonction de gestion auxiliaire du DOM. La première est la propriété document.activeElement, qui fait toujours référence à l'élément actuellement ciblé du DOM. Obtient l'élément sur lequel l'utilisateur actuel se concentre.
Utiliser. Méthode focus()
11.3.3 Modifications dans HTMLDocument
1 : attribut readyState
Cet attribut a deux valeurs
1 ; Document
2 : complet, le document a été chargé.
La manière la plus appropriée d'utiliser la propriété document.readyState est de l'utiliser pour implémenter un indicateur indiquant que le document a été chargé. Indique que le document a été chargé.
2 : Mode de compatibilité :if(document.readyState=="complete"){
//执行操作
}Depuis qu'IE6 a commencé à distinguer si le mode de rendu de la page est standard ou mixte, IE a ajouté un attribut appelé compatMode au document pour indiquer au développeur la page utilise ce mode de rendu.
a deux valeurs de retour : CSS1compat et BackComapat.
correspond respectivement au mode standard et au mode mixte.
3 : Si l'attribut head
ne peut pas être utilisé via document.head, utilisez document.getElementByTagName();
11.3.4 Attribut de jeu de caractères
via le document .charSet=""; pour modifier le format d'encodage de la page
11.3.6 Marque d'insertion
1 : attribut innerHTML
En mode lecture, le L'attribut innerHTML renvoie les balises HTML de l'élément appelant correspondant à tous les nœuds enfants. En mode écriture, innerHTML créera une nouvelle arborescence DOM basée sur la valeur spécifiée.
Vous pouvez utiliser cet attribut pour ajouter des balises aux balises spécifiées, mais toutes les balises ne sont pas prises en charge
2 : attribut externalHTML
En mode lecture, externalHTML Renvoie la balise HTML de l'élément appelant et tous ses nœuds enfants. En mode écriture, externalHTML créera une nouvelle arborescence DOM basée sur les caractères HTML spécifiés, puis remplacera complètement l'élément appelant par ce sous-arbre DOM.
Mode lecture : renvoie toutes les balises HTMLvar val = elem.outerHTML;
Mode écriture : remplace les éléments DOM correspondants.
<p id="select" class="aa ss dd ff hh "> <p>this is a test Demo</p> </p>
elem.outerHTML="<p>这是一个测试的demo</p>"
La dernière méthode pour insérer un balisage.
reçoit deux paramètres : la position d'insertion et le texte HTML à insérer. Le premier élément doit être l'une des valeurs suivantes.
1 : avant de commencer, insérez un élément frère adjacent avant l'élément actuel.
2 : après le début, insérez un nouvel élément enfant sous l'élément actuel ou insérez un nouvel élément avant le premier élément
3 : avant la fin, insérez un nouvel élément sous l'élément enfant actuel ou insérez un nouvel élément après le dernier élément
4 : afterend, ajoutez un élément frère adjacent après l'élément.
4 : Problèmes de mémoire et de performances ;
L'utilisation de la méthode présentée dans cette section pour remplacer les nœuds enfants peut provoquer des problèmes de mémoire dans le navigateur, mais l'utilisation de l'attribut innerHTML nous apportera quand même beaucoup de traversal , la raison est que lors de la définition de innerHTML ou externalHTML, un analyseur HTML sera créé. Cet analyseur s'exécute sur la base du code au niveau du navigateur, il est donc beaucoup plus rapide que js.
11.3.7 Méthode scrollIntoView
Scroll
11.4.1 Mode document :
Le mode document détermine quel niveau de CSS vous pouvez utiliser et quelles API peuvent être utilisées dans js :
Il existe quatre modes de document au total :
IE5 : afficher la page en mode promiscuité , Les nouvelles fonctionnalités de IE8 et versions supérieures ne peuvent pas être utilisées
IE7 : afficher la page en mode standard IE7, les nouvelles fonctionnalités de IE8 et versions supérieures ne peuvent pas être utilisées
IE8 : afficher la page dans les normes IE8 Rendu modal, les nouvelles fonctionnalités d'IE8 sont toutes disponibles, vous pouvez donc utiliser l'API SelectorsAPI, davantage de sélecteurs de niveau CSS2 et certaines fonctionnalités CSS3. Il existe également quelques fonctionnalités HTML5
IE9 - Page de rendu en mode standards IE9. Toutes les nouvelles fonctionnalités sont disponibles. Par exemple, la fonction d'EMACSript5.
11.4.2 attribut children
Il n'y a presque aucune différence entre l'attribut children et childNodes. Ils sont tous deux utilisés pour renvoyer tous les nœuds enfants
11.4.3contain (contain). méthode :
est utilisé pour déterminer si le nœud est un nœud descendant d'un certain nœud. Vous pouvez directement comprendre le sens littéral en anglais, y compris.
Noeud parent.contain (un certain nœud) : si true est renvoyé, il est inclus, sinon false est renvoyé.
Vous pouvez également utiliser compareDocumentPosition() pour comparer les positions des fichiers, ce qui renverra des masques pour déterminer la relation de position
Afin d'imiter la méthode contain(), vous devez faire attention au retour 16;
11.4.4 Insertion de texte :
1 : L'attribut innerText
opérera sur toutes les valeursde l'élément et assemblera les documents à partir de superficiel à profond. La différence entre
et innerHTML est la suivante : innerHTML affichera toutes les balises d'élément, mais innerText ne renverra que la chaîne épissée.
n'affichera qu'un seul nœud enfant de texte lors de l'écriture.
2 : attribut externalText
Il n'y a fondamentalement pas de grande différence entre externalText et innerText, sauf que la portée est étendue pour inclure ses nœuds. Les résultats sont exactement les mêmes lors de la lecture d’un texte, mais complètement différents lors de l’écriture. externalText remplacera non seulement les éléments enfants de l'élément qui l'appelle, mais remplacera l'intégralité de l'élément. Il est recommandé de ne pas l'utiliser.
11.4.5 Défilement :
1 : scrollIntoviewIfNeeded(alignCenter) : faites défiler le navigateur uniquement lorsque l'élément n'est pas visible dans la fenêtre.
2 : scrollByLines(lineCount) : Faites défiler le contenu de l'élément jusqu'à la hauteur de page spécifiée. lineCount peut être une valeur positive ou négative.
3 : scrollBypage(pageCount) : faites défiler le contenu de l'élément jusqu'à la hauteur de page spécifiée. La hauteur spécifique est déterminée par la hauteur de l'élément.
Remarque : scrollIntoView() et scrollIntoviewIfNeeded(alignCenter) fonctionnent sur le conteneur d'éléments, tandis que scrollByLines(lineCount) et scrollBypage(pageCount) fonctionnent sur l'élément lui-même.
Chapitre 12 : DOM2 et DOM3
12.1.1 Modifications des espaces de noms XML
Avec les espaces de noms XML, les éléments de différents documents XML peuvent être mélangés, ne vous inquiétez pas conflits de noms, techniquement parlant, HTML ne prend pas en charge les espaces de noms XML, mais XHTML prend en charge les espaces de noms XML.
1 : Modifications du type de nœud
Au niveau DOM2, le type de nœud contient les attributs spécifiques à l'espace de noms suivants.
localName : nom du nœud sans préfixe d'espace de noms.
namespaceURL : L'URL de l'espace de noms est nulle.
préfixe : préfixe d'espace de noms ou null.
2 : Modifications du type de document
Le type de document au niveau DOM2 a également changé, y compris les méthodes suivantes liées à l'espace de noms.
createElementNs(namespaceURI,tagName) : crée un nouvel élément appartenant à l'espace de noms namespaceURI en utilisant le tagName donné.
createAttributeNS(nameSpaceURI, attribueName) Crée un nouvel attribut appartenant à l'espace de noms nameSpaceURI en utilisant le nom d'attribut donné.
getElementByTagNameNs(namespaceURI, tagName) renvoie une NodeList d'éléments tagName appartenant à l'URI de l'espace de noms.
3 : Modifications du type d'élément
Les modifications liées à l'élément dans le "DOM niveau 2" concernent principalement les caractéristiques opérationnelles. La nouvelle méthode est la suivante.
getAttributeNS (namespaceURI, localName) Obtient l'attribut nommé localName appartenant à l'URI de l'espace de noms
getAttributeNodeNS (namespaceURI, localName) Obtient le nœud d'attribut nommé localName appartenant à l'URI de l'espace de noms
getElementsByTagNameNS(namespaceURI, tagName) renvoie la nodeList appartenant à l'URI de l'espace de noms
hasAttributeNS(namespaceURI, localName) détermine que l'élément actuel est un attribut nommé localNaem et que l'espace de noms de cet attribut est namespaceURI
removeAttributeNS(namespaceURI, localName) supprime l'attribut qui appartient à l'URI de l'espace de noms et est nommé localName
setAttributeNS(namespaceURI,qualifiedName, value) : définit la valeur de l'attribut qui appartient à l'URI de l'espace de noms et est nomméqualifiedName to value
setAttributeNodeNS (attNode) définit le nœud d'attribut appartenant à l'espace de noms namespaceURI
4 : Modifications du type NamedNodeMap
Étant donné que les attributs sont représentés par NamedNodeMap, ces méthodes sont uniquement pour l'utilisation de la fonctionnalité
1 : getNamedItemNS(namespaceURI, localName) : obtenez l'élément nommé localName qui appartient à l'espace de noms namespaceURI et est nommé localName
2 : RemoveNamedItemNS(namespaceURI, localName) : supprimez le élément qui appartient à l'espace de noms namespaceURI et est nommé localName Élément nommé localName
3 : setNamedItemNS (node) : ajoutez un nœud dont les informations d'espace de noms sont spécifiées à l'avance.
Étant donné que les propriétés sont généralement accessibles via des éléments, ces méthodes sont rarement utilisées.
12.1.2 Autres modifications
1 : Modifications du type documentType
Ajout de trois attributs : publicID systemId et internalSubset.
2 : Modifications du type de document :
Le cœur du DOM niveau 2 est toujours le document. L'objet d'implémentation spécifie deux nouvelles méthodes : creatDocumentType() et creatDocument()
La première est utilisée pour créer un nouveau nœud DocumentType et accepte trois paramètres : type de document, publicID, systemID
Lorsque lors de la création d'un nouveau document, vous devez utiliser la méthode createDocument(), qui accepte également trois paramètres : namesp-aceURI, le nom de la balise de l'élément du document et le nouveau type de document
3 : Modifications du type de nœud
Ajoutez simplement la méthode isSupported() : utilisée pour déterminer les capacités du nœud actuel.
Cette méthode reçoit deux paramètres, le nom de la fonctionnalité et le numéro de version de la fonctionnalité.
12.2 Style
Il existe trois façons de définir des styles en HTML : externe,