Au début de l'article, je voudrais mentionner en termes généraux qu'est-ce que DOM et qu'est-ce que BOM , car cet article s'adresse en fin de compte aux amis qui ont une certaine base JavaScript, mais qui ne comprennent pas ou ne connaissent même pas DOM et BOM. .
Cependant, avant de parler de ce qu'est DOM et de ce qu'est BOM , permettez-moi de vous montrer toute la structure de Javascript :
Dans l'image ci-dessus, nous pouvons voir qu'il y a quatre éléments : JavaScript, ECMAScript, DOM et BOM . Alors, quel est le lien entre les quatre ? Utilisez une équation pour résumer la relation entre eux :
JavaScript = ECMAscript + BOM + DOM
Donnons-en un aperçu un par un :
ECMAscript :
ECMAScript est un langage transmis par ECMA International (anciennement l'Association européenne des fabricants d'ordinateurs) via ECMA-262. un langage de programmation de script standardisé . C'est la norme pour JavaScript (JS en abrégé) et les navigateurs implémentent cette norme .
ECMAscript s'apparente davantage à une réglementation qui précise comment chaque navigateur exécute la syntaxe de JavaScript , car on sait que JavaScript est un langage de script qui s'exécute sur le navigateur ! Il existe des réglementations, mais il nous manque encore un moyen d'interagir avec chaque élément de la page . A cette époque, le DOM suivant est né !
DOM :
DOM ( Document Object Model ) est une interface de programmation d'application indépendante du langage permettant d'exploiter des documents XML et HTML .
Pour JavaScript : Afin de permettre à JavaScript de fonctionner en HTML , JavaScript possède sa propre interface de programmation DOM .
En une phrase : DOM fournit à JavaScript une "méthode" pour accéder et faire fonctionner les éléments HTML (la raison pour laquelle nous n'utilisons pas le mot interface est parce que nous avons peur que certains amis soient effrayés en voyant l'interface, mais en fait la description la plus précise est celle de JavaScript) l'interface est fournie )
BOM :
BOM est un modèle d'objet de navigateur, un modèle d'objet de navigateur . BOM est une interface qui semble contrôler le comportement du navigateur .
Pour JavaScript : Afin de permettre à JavaScript de contrôler le comportement du navigateur , JavaScript possède sa propre interface BOM .
En une phrase : BOM fournit à JavaScript une « méthode » pour contrôler le comportement du navigateur.
Enfin, parmi les trois composants JavaScript ci-dessus, ECMscript est une spécification , tandis que les deux autres fournissent des "méthodes", correspondant respectivement aux éléments HTML et aux navigateurs . Nous nous concentrons donc ci-dessous sur les deux derniers: DOM et BOM, donnons une explication systématique . Puisqu’il s’adresse aux débutants, mes explications suivantes seront aussi simples et faciles à comprendre que possible. Si vous n’avez pas de bonnes bases, vous pouvez le manger en toute confiance !
Tout d'abord, expliquons les connaissances associées au DOM . Je l'ai divisé en deux parties :
D'accord, alors qu'est-ce qu'un arbre DOM ?
Certains débutants qui ont appris le DOM ne connaissent peut-être pas ce mot, mais en fait, l'arborescence DOM n'est pas une chose particulièrement fantaisiste. Au contraire, pour le personnel front-end, l'arborescence DOM est le HTML des pages que vous traitez. chaque jour. L'arbre composé d'éléments :
Dans l'arborescence BOM , chaque nœud peut avoir deux identités : il peut être un nœud enfant du nœud parent, ou il peut être le nœud parent d'autres nœuds enfants Observons ensemble le code suivant :
<!DOCTYPE html>.
<html lang="fr">
<tête>
<méta charset="UTF-8">
<title>DOM_demo</title>
</tête>
<corps>
<p>
<a href="https://blog.csdn.net/qq_52736131">Écrevisses dansant le tango</a>
</p>
</corps>
</html> Pour le code ci-dessus, son arborescence DOM devrait ressembler à ceci :
En ce moment, quelqu'un veut demander, pensez-vous que l'arborescence DOM a depuis si longtemps quelque chose à voir avec le fonctionnement des éléments HTML ?
La réponse est très pertinente, et ce n'est qu'en comprenant la structure arborescente DOM du document que nous pouvons exploiter avec précision et efficacité les éléments DOM , sinon divers bugs inattendus apparaîtront. Avant d'exploiter les éléments HTML d'une page, nous devons avoir un dessin clair du DOM de la page entière . Même si nous ne dessinons pas réellement, nous devons avoir une structure contextuelle claire dans notre esprit.
Concernant certaines méthodes courantes d'exploitation des éléments html du DOM en JavaScript , je les ai divisées en plusieurs sous-parties pour vous les présenter :
// 1. Pass Get la valeur de l'attribut id de l'élément et renvoie un objet élément var element = document.getElementById(id_content) //2. Récupère l'élément via sa valeur d'attribut name et renvoie un tableau d'objets élément var element_list = document.getElementsByName(name_content) //3. Récupère l'élément via la valeur de l'attribut de classe de l'élément et renvoie un tableau d'objets élément var element_list = document.getElementsByClassName(class_content) //4. Récupère l'élément via le nom de la balise et renvoie un tableau d'objets élément var element_list = document.getElementsByTagName(tagName)
//1. Récupère la valeur d'attribut de l'élément. Les paramètres passés sont naturellement les noms d'attribut, tels que class, id, href. var attr = element.getAttribute (nom_attribut) //2. Définissez la valeur d'attribut de l'élément. Les paramètres passés sont naturellement le nom d'attribut de l'élément et la valeur d'attribut correspondante à définir element.setAttribute(attribute_name,attribute_value)
//1. Créez un élément html et le paramètre passé est le type d'élément, tel que p, h1-5, a, en prenant p comme exemple ci-dessous var element = document.createElement ( "p") //2. Créez un nœud de texte et transmettez le contenu de texte correspondant (notez qu'il s'agit d'un nœud de texte, pas d'un élément html) var text_node = document.createTextNode(texte) //3. Créez un nœud d'attribut et le paramètre transmis est le nom d'attribut correspondant var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Accordez une attention particulière à la troisième.Cette méthode de création d'un nœud d'attribut doit correspondre à un élément spécifique , c'est-à-dire que vous devez d'abord obtenir un élément d'élément spécifique, créer un nœud d'attribut et enfin l'ajouter. nœud d'attribut à cet élément ( setAttributeNode) .
//1. Ajoutez un nœud à la fin de l'élément. Le paramètre transmis est le type de nœud element.appendChild(Node) //2. Insérez un nœud devant un nœud existant à l'intérieur de l'élément, et transmettez toujours un paramètre de type de nœud element.insertBefore(new_Node,existent_Node).
Notez qu'avant d'ajouter un nœud , vous devez d'abord créer le nœud, et au niveau du nœud. En même temps Sélectionner l'élément du noeud parent .Dans la deuxième méthode, vous devez même trouver les noeuds frères derrière la position d'insertion .
//Supprimer un noeud dans l'élément.Le paramètre passé est le paramètre de type de noeud element.removeChild(Node).Notez
que lors de la suppression, vous devez trouver l'élément de noeud parent correspondant pour le supprimer en douceur .
Enfin, quelques attributs DOM courants :
//1. Récupère le nœud parent de l'élément actuel var element_father = element.parentNode //2. Récupère le nœud enfant du type d'élément HTML de l'élément actuel var element_son = element.children //3. Récupère tous les types de nœuds enfants de l'élément actuel, y compris les éléments HTML, le texte et les attributs var element_son = element.childNodes //4. Récupère le premier nœud enfant de l'élément actuel var element_first = element.firstChild //5. Récupère l'élément frère précédent de l'élément actuel var element_pre = element.previousSibling //6. Récupère l'élément frère suivant de l'élément actuel var element_next = element.nextSibling //7. Récupère tout le texte de l'élément actuel, y compris le code source HTML et le texte var element_innerHTML = element.innerHTML //8. Récupère tout le texte de l'élément actuel, à l'exclusion du code source html var element_innerTEXT = element.innerText
Parmi eux, le septième signifie convertir le code html et le texte de l'élément en texte , ainsi que le code html d'origine. est exécuté. , le convertir en texte équivaut à le transformer en une chaîne ordinaire !
Ensuite, nous reparlerons de BOM En raison de l'espace limité, BOM ne sera pas expliqué en détail (le côté pratique n'est en effet pas aussi grand que DOM). Revoyons l'introduction sur BOM au début :
BOM fournit plusieurs "méthodes" permettant à JavaScript de faire fonctionner le navigateur.
Tout d'abord, utilisons une image pour trier la structure de l'ensemble du BOM. Semblable au DOM, le BOM a également une structure arborescente :
L'image ci-dessus montre :
window est le sommet de toute la chaîne alimentaire de l'arbre BOM , donc chaque fenêtre nouvellement ouverte est considérée comme un objet window.
L'objet window a les propriétés et méthodes communes suivantes :
| Propriété/Méthode | Signification |
| opener | La fenêtre parent de la |
| longueur | de fenêtre actuelleLe nombre d'images dans le |
| document | fenêtreL'objet document actuellement affiché dans la fenêtre |
| alert(string) | Crée une boîte de dialogue d'avertissement et affiche un message |
| close() | Ferme la fenêtre |
| confirm() | Créer une boîte de dialogue qui nécessite la confirmation de l'utilisateur |
| open(url, name, [options]) | Ouvrir une nouvelle fenêtre et renvoyer l' |
| invite du nouvel objet fenêtre (text, defaultInput) | Créer une boîte de dialogue qui nécessite que l'utilisateur saisisse des informations |
| setInterval(expression, milliseconds) | calcule une expression après l'intervalle de temps spécifié |
| setInterval(function, millis enconds, [arguments]) | appelle une fonction setTimeout(expression, milliseconds) après l'intervalle de temps spécifié |
| setTimeout(expression, milli seconds | |
| ) | after the timer expire | calcule une fonction après l'expiration du timer |
Parmi eux, vous pouvez voir qu'il y a une fonction alert() ci-dessus , car lorsque nous apprenons JavaScript, la plupart d'entre elles . Nous utilisons la fenêtre contextuelle de la fonction alert() comme flux d'entrée et de sortie. Ceci est ma première démo , donc quand vous voyez cela, vous pouvez demander :
Lorsque j'ai utilisé la fonction alert(), il semblait que la fenêtre n'était pas mentionnée. . Alors , alert() est-il ici le même alert() que j'ai appris auparavant ? La réponse est la suivante :
ces deux alert() sont en effet la même fonction . La raison pour laquelle window peut être omise est que toutes les propriétés et méthodes de window peuvent être exprimées de deux manières :
(1) window.property/window Méthode ()
(2) L'appel direct d'attribut/méthode ()
n'est pas seulement alert(), tous les attributs et fonctions de fenêtre ci-dessus sont valides, les amis intéressés peuvent l'essayer par eux-mêmes.
Qu'est-ce qu'un objet de localisation ?
L'objet location est un attribut de l'objet window qui fournit des informations sur le document chargé dans la fenêtre actuelle et fournit également certaines fonctions de navigation.
L'objet location possède les attributs et méthodes communs suivants :
| Contenu | de l'attribut/de la méthode | |
| hôte | nom d'hôte : numéro de port | |
| d'hôte | nom d'hôte | |
| href | URL complète | |
| d'accès | nom de chemin | |
| port | numéro de port | |
| partie | du protocole | |
| chaîne de | requête de recherche | |
| reload() | recharge l'URL actuelle | |
| à l'aide | de repalce() | La nouvelle URL remplace la page actuelle. |
En fait, si l'on observe attentivement le diagramme de structure ci-dessus, nous constaterons que
l'objet location n'est pas seulement un attribut de l'objet window, mais aussi un attribut de l'objet document.
Cela signifie :
window.location = location = document.location
Qu'est-ce que l'objet historique ?
L'objet historique est un attribut de l'objet fenêtre. Il sauvegarde l'enregistrement de l'accès Internet de l'utilisateur. L'horodatage de cet enregistrement est calculé à partir du moment où la fenêtre a été ouverte.
L'objet historique possède les attributs et méthodes communs suivants :
| de la description | de l'attribut/de la méthode |
| Le | nombre d'enregistrements dans l'objet historique. |
| back() | va à l'URL précédente de l'entrée de l'historique du navigateur, de la même manière que revenir |
| en avant () | va à l'URL suivante. de l'entrée de l'historique du navigateur, similaire à avancer |
| (num) | Le navigateur avance ou recule dans l'objet historique |
Enfin, introduisons l'objet navigateur :
L'objet navigateur est un attribut de fenêtre dans la nomenclature qui identifie le navigateur client.
Quelques attributs courants liés au navigateur :
| description | de l'attribut |
| appName | nom complet du navigateur et informations sur la version |
| plate | -forme système sur laquelle se |
| plugins | tableau d'informations sur les plug-ins installés dans le navigateur |
| userAgent | chaîne de l'agent utilisateur du navigateur |
| userLanguage | langue par défaut du système d'exploitation |