Maison > Article > interface Web > Extension DOM des programmes avancés JS

Extension DOM des programmes avancés JS

小云云original: 2018-03-07 13:30:131472parcourir

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.

e9132549569fb02f168a4ec8b3ac532894b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
2cacc6d41bbb37262a98f745aa00fbf0

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 HTML

var 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>

3 : méthode insertAdjeacentHTML()

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 : 2cdf5bf648cf2f33323966d7f58a7f3f externe, c9ccee2e6ea535a969eb3f532ad9fe89 intégré et en utilisant l'attribut style pour le modifier dans la balise element.

12.2.1 Accès aux styles d'éléments

Propriétés CSS ; style.backgroundImage Style couleur

affichage style.display

font-family style. fontFamily

1 : Attributs et méthodes de style DOM :

"Style DOM niveau 2 "La spécification définit également certaines propriétés et méthodes pour l'objet de style. Ces propriétés et méthodes peuvent également modifier le style tout en fournissant les propriétés de style de l'élément. Ces propriétés et méthodes sont répertoriées ci-dessous.

cssText : Vous pouvez accéder au code CSS dans le style

length : Le nombre d'attributs CSS appliqués à votre élément.

parentRule : objet CSSRule représentant les informations CSS

getPropertyCssValue(propertyName) : renvoie un objet CssVal contenant la valeur de propriété donnée.

getPropertyPriority(propertyName) : Si la propriété est donnée ! paramètre important, puis revenez ! important, sinon il renvoie une chaîne vide

getPropertyValue() renvoie la valeur de chaîne de la propriété donnée

item() renvoie le nom de la propriété CSS à la position donnée

removeProperty (propertyName) : supprime le style donné du style

setProperty() définit la propriété donnée sur la valeur correspondante, plus l'indicateur d'autorisation prioritaire.

Dans le développement réel, getPropertyValue() est utilisée plus fréquemment

2 styles calculés

méthode getComputedStyle(). Cette méthode doit accepter deux paramètres : l'élément pour obtenir le style calculé et une chaîne de pseudo-élément. Si vous n'avez pas besoin d'une chaîne de pseudo-éléments, vous pouvez remplir null.

Exemple : Obtenir le style de l'élément

12.2.2 Feuille de style de fonctionnement

CSSStyleSheet hérite de StyleSheet, qui peut être utilisée comme interface pour définir non -Feuille de styles CSS. Les propriétés héritées de l'interface StyleSheet sont les suivantes.

disable : Valeur booléenne indiquant si la feuille de style est désactivée

href : Si la feuille de style est incluse via 2cdf5bf648cf2f33323966d7f58a7f3f, c'est l'URL de la feuille de style : sinon, c'est null

media : une collection de tous les types de médias pris en charge par la feuille de style actuelle

ownerNode : un pointeur vers le nœud qui possède la feuille de style actuelle

parentStyleSheet : un pointeur vers la feuille de style importée

title : la valeur de l'attribut title dans OwnerNode.

type : Une chaîne représentant le type de feuille de style

cssRules Une collection de règles dans la feuille de style cssRules

ownerRule : Si la feuille de style est importée via @import, cela l'attribut est un pointeur, pointant vers la règle importée, sinon la valeur est nulle

deleteRule(index) : Supprimez la règle spécifiée

insertRule : (Méthode) Insérez la chaîne de règle dans la cssRule collection

Tous les styles appliqués au document sont représentés à travers la collection document.stylesheets

1 : Règles CSS :

L'objet CSSStyleSheet contient les objets suivants :

cssText : Renvoie le texte correspondant à l'intégralité de la règle.

parentRule : Si la règle actuelle est une règle d'importation, cet attribut renvoie la règle d'importation ; sinon il est nul

parentStyleSheet : La feuille de style à laquelle appartient la règle actuelle

SelectorText : renvoie la règle actuelle. Le texte du sélecteur.

Style : Un objet CSSStyleDeclaration, grâce auquel vous pouvez définir et obtenir la feuille de style d'un style spécifique dans la règle.

type : une valeur constante représentant le type de règle.

Les attributs les plus couramment utilisés sont cssText, selectorText et Style.

2 : Créer des règles

Règlements DOM. Pour ajouter une nouvelle règle à la table désormais stylisée, vous devez utiliser la méthode insertRule(). Cette méthode accepte deux paramètres : le texte de la règle et l'index inséré

Exemple :

sheet.insertRule("body{background-color:silver}",0);//Méthode DOM.

Pour insérer des règles de manière multi-navigateurs, vous pouvez utiliser la fonction suivante. Cette fonction accepte quatre valeurs : la feuille de style à laquelle la règle doit être ajoutée et les trois mêmes paramètres que addRule(), comme indiqué dans la figure :

3. Supprimez la règle :

de la feuille de style La méthode pour supprimer une règle est deleteRule()

1: offset

La taille visible de l'élément est déterminée par sa hauteur et sa largeur, y compris tout le remplissage et la taille de la bordure de la barre de défilement (attention, hors frontières extérieures). Le décalage de l'élément peut être obtenu grâce aux quatre propriétés suivantes.

offsetHeight : La taille de l'espace occupé par l'élément dans la direction verticale, mesurée en un pixel

offsetWidth : La taille de l'espace occupé par l'élément dans la direction horizontale, mesurée en pixels.

offsetLeft : La distance en pixels entre la bordure gauche de l'élément et la bordure intérieure gauche de l'élément conteneur.

offsetTop : La distance entre la bordure extérieure de l'élément et la bordure intérieure de l'élément.

Les attributs offsetLeft et offsetTop sont liés à l'élément conteneur, et la référence de l'élément conteneur existe dans l'attribut offsetParent

2 : La taille de la zone client :

Le modèle de boîte est divisé en marges (marge), marge intérieure (padding), bordure (bordure) et zone de contenu (contenir)

La zone client est similaire à la zone de contenu du modèle de boîte. deux attributs, clienWidth et clienHeight

3 : Taille du défilement :

La taille du défilement fait référence à la taille de l'élément contenant le contenu défilant

contient quatre valeurs :

scrollHeight : En l'absence de barres de défilement, La hauteur totale du contenu de l'élément

scrollWidth : la largeur totale du contenu de l'élément sans les barres de défilement

scrollLeft : le nombre de pixels cachés sur le côté gauche de la zone de contenu

scrollTop : le nombre de pixels cachés au-dessus de la zone de contenu

scrollHeight et scrollWidth ne sont utilisés que pour déterminer la taille réelle du contenu de l'élément.

Les attributs scrollLeft et scrollRgiht peuvent être utilisés pour déterminer l'état de défilement actuel et définir la position de défilement de l'élément.

4 : Déterminer la taille de l'élément

Chaque navigateur fournit une méthode getBoundingClientRect() pour chaque élément. Cette méthode renvoie un objet rectangulaire contenant quatre attributs : left, top, right et bottom.

12.3 Traversée

Le module de traversée et de plage au niveau DOM2 définit deux types pour aider à terminer la traversée séquentielle de la structure DOM : NodeIterator et TreeWalker.

12.3.1 NodeIterator

Le type NodeIterator est le plus simple des deux, et vous pouvez utiliser la méthode document.creatNodeIterator() pour en créer une nouvelle instance. Cette méthode reçoit quatre paramètres

root : le nœud de l'arborescence que vous souhaitez utiliser comme point de départ de la recherche.

whatToshow : Code numérique indiquant les nœuds à visiter.

filter : est un objet NodeFilter

entityReferenceExpansion : valeur booléenne, indiquant s'il faut étendre la référence d'entité.

Traversée et portée au niveau DOM2

(1) La traversée consiste à utiliser NodeIterator ou TreeWalker pour effectuer une traversée en profondeur du DOM

(2) NodeIterator est une interface simple cela permet uniquement d'avancer et de reculer par étapes d'un nœud. Bien que TreeWalker offre la même fonctionnalité, il prend également en charge les mouvements dans toutes les directions de la structure DOM, y compris les nœuds parents, les nœuds frères et les nœuds enfants.

(3) Scope est un moyen de sélectionner une partie spécifique de la structure DOM puis d'effectuer l'opération correspondante.

(4) Utilisez la sélection de plage pour supprimer certaines parties du document tout en gardant la structure du document dans un bon format, ou pour copier la partie correspondante du document.

(5) IE8 et les versions antérieures ne prennent pas en charge le module « Traversée et plage de niveau DOM2 », mais il fournit un objet de plage de texte propriétaire qui peut être utilisé pour effectuer des opérations de plage de texte simples. IE9 prend entièrement en charge la traversée du DOM

Chapitre 17 : Gestion des erreurs et débogage :
17.1.1 IE

IE是唯一一个在浏览器界面窗体中显示JS错误的，发生JS错误时，浏览器左下角会出现一个黄色的图标，旁边显示着Error on page

17.2.1try-catch语句：

try{
    //可能出错的语句
}catch（error）{
    //怎么处理 
}

1：finally子句

finally在try语句中一定会被执行，不管catch语句是否已经执行，他会忽略catch语句。

2：错误类型：

Error

EvalError

RangeError

ReferenceError

SyntaxError

Articles Liés

Voir plus