communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comparez les différences et les connexions entre BOM et DOM en Javascript

Comparez les différences et les connexions entre BOM et DOM en Javascript

巴扎黑
Libérer： 2017-08-09 11:18:14
original
1347 Les gens l'ont consulté

1.Composition Javascript

La mise en œuvre de JavaScript comprend les 3 parties suivantes :

1) Core (ECMAScript) : Décrit leJS 🎜 >Syntaxe et objets de base.

2

) Modèle objet de document (DOM) : Méthodes et interfaces de traitement du contenu Web

3

) Modèle objet du navigateur (BOM) : Méthodes et interfaces pour interagir avec le navigateur

ECMAScriptConnaissances étendues :

①

ECMAScript est un standard,JS n'en est qu'une implémentation, d'autres implémentations incluent ActionScript.

② "

ECMAScript peut fournir des fonctionnalités de script de base pour différents types d'environnements hôtes...", c'est-à-dire ECMAScript n'est pas lié à un environnement hôte spécifique. Par exemple, l'environnement hôte de JS est le navigateur, et l'environnement hôte de AS est Flash. ③

ECMAScript

décrit les éléments suivants : syntaxe, types, instructions, mots-clés, mots réservés, opérateurs, objets.

Nous savons tous que

javascript

comporte trois parties, ECMAScript, DOM et BOM , selon l'hôte (navigateur), la forme d'expression spécifique est également différente ie est très différente des autres navigateurs. 1. DOM

est une norme du

W3C [ est publiquement suivie par tous les navigateurs Standard ]2. BOM est l'implémentation de chaque fabricant de navigateur sur leurs navigateurs respectifs basés sur
DOM ;[
montre que différents navigateurs ont des définitions différentes,les méthodes de mise en œuvre sont différentes]la fenêtre est. un objet
BOM, pas un objet js DOM (Document Object Model) est une application ; interfaces de programmation (API) pour HTML et XML. La

BOM traite principalement des fenêtres et des cadres du navigateur, mais les extensions JavaScript spécifiques au navigateur sont généralement considérées comme faisant partie de la

BOM

. Ces extensions incluent : Ouvrir une nouvelle fenêtre de navigateur

Déplacer, fermer et redimensionner la fenêtre du navigateur

Fournir

Web

Objet d'ancrage des détails du navigateurObjet d'écran fournissant des détails sur la résolution de l'écran de l'utilisateur

Prise en charge des

cookies

IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

 

 

1.1 DOM, DOCUMENT, BOM, WINDOW 区别

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

Ces balises sont considérées comme un objet, et chaque objet est appelé un nœud. Le nœud peut être compris comme la classe parent de tous les objets du DOM.

A quoi sert le DOM ? Il s'agit d'exploiter des éléments en HTML. Par exemple, si nous voulons changer le titre de cette page Web via JS, faites simplement ceci :

document.title = 'comment faire l'amour';

Cette API permet de modifier le contenu d'une page web après son téléchargement dans le navigateur.

document

Lorsque le navigateur télécharge une page Web, généralement du HTML, ce HTML est appelé document (bien sûr, c'est aussi un nœud dans l'arborescence DOM), from Comme vous pouvez le voir sur la figure ci-dessus, le document est généralement le nœud racine de l'ensemble de l'arborescence DOM. Ce document contient des attributs tels que le titre (document.title) et l'URL (document.URL), accessibles directement dans JS.

Il peut y avoir plusieurs documents dans une fenêtre de navigateur, par exemple une page chargée via une iframe, chacun étant un document.

En JS, ses nœuds enfants sont accessibles via un document (en fait, n'importe quel nœud peut être utilisé), tel que

document.body;document.getElementById('xxx');


BOM

BOM est le modèle d'objet de navigateur, Comparez les différences et les connexions entre BOM et DOM en Javascript modèle d'objet de navigateur.


Je viens de dire que DOM est une interface qui semble gérer des documents, donc BOM, comme son nom l'indique, est en fait une interface qui semble contrôler le comportement du navigateur.

Que peut faire le navigateur ? Par exemple, pour passer à une autre page, avancer, reculer, etc., le programme peut également avoir besoin d'obtenir des paramètres tels que la taille de l'écran.

Donc BOM est l'interface qui semble résoudre ces problèmes. Par exemple, si nous voulons que le navigateur passe à une autre page, nous avons seulement besoin de

location.href = "http://www.xxxx.com";


Cet emplacement la nomenclature est-elle un objet dans .

window

window est également un objet du BOM En plus de "l'objet de sauvegarde" au sens de la programmation, cet objet peut être utilisé pour obtenir la fenêtre. position, déterminer la taille de la fenêtre, les boîtes de dialogue contextuelles, etc. Par exemple, je souhaite fermer la fenêtre actuelle :

window.close();



Pour résumer la question :

DOM est pour L'API est utilisée pour faire fonctionner le document, et le document est l'un de ses objets ;
BOM est l'API qui est utilisée pour faire fonctionner le navigateur, et window est l'un de ses objets ;

retourné aux DOM géré par :

Zone

E (c'est ce que vous avez dit document. Par web développeur A dossier écrit avec des efforts minutieux, qui contient index.html, CSS et JS Que diable, il est déployé sur le serveur. On peut saisir l'URL via la barre d'adresse du navigateur puis appuyer sur Entrée pour copier ce document. Charger en local, parcourir, faire un clic droit pour afficher le code source, etc.

Enregistré sur BOM :

<.>

Zone A

(onglets du navigateur, barre d'adresse, barre de recherche, barre de favoris, bouton de fermeture de restauration de l'agrandissement de la fenêtre, barre de menu, etc.)

Zone B

(menu clic droit du navigateur)

Zone

C

(document Barre d'état lors du chargement, affichant le code d'état http, etc.)

D

zone (barre de défilement barre de défilement)

BOM est le modèle objet du navigateur, DOM est le

Modèle objet du document , le premier est le navigateur lui-même qui fonctionne, et le second opère sur le contenu du navigateur (peut être considéré comme un conteneur)

BOM et DOM Diagramme schématique de la relation structurelle

2. Modèle d'objet de document (DOM)

DOM modèle d'arbre de nœuds (prenez l'arbre HTML DOM comme exemple ) Le modèle

DOM combine l'intégralité du document (document XML et HTML document) est visualisé sous forme d'arborescence,

dans DOM, HTML document La structure hiérarchique est représentée sous forme d'arborescence. et utilisez l'objet document pour représenter le document , et chaque nœud enfant de l'arborescence représente un contenu différent dans le document HTML.

Chaque document HTML chargé dans le navigateur deviendra un Document objet , Document est l'entrée pour explorerDOM,utiliser des variables globalesdocumentPeut accéder à l'objet Document

2.1 Comprendre le DOM

Regardez d'abord le code suivant

Décomposez le code HTML en un diagramme hiérarchique de nœuds DOM :

DOM représente les documents en créant des arborescences et décrit les méthodes et interfaces de traitement du contenu Web, donnant aux développeurs un contrôle sans précédent sur le contenu et la structure des documents. L'utilisation de l'API DOM peut supprimer. , ajoutez et remplacez facilement des nœuds.

1) Le type de nœud

DOM précise que chaque composant du document est un nœud (Node ) , le document HTML peut être considéré comme une collection de nœuds, les nœuds DOM ont  :

1. Nœud Élément (Élément) : dans l'image ci-dessus, , ,

, etc. sont tous des nœuds d'éléments, c'est-à-dire des étiquettes.

2. Nœud de texte (Texte) :Le contenu affiché à l'utilisateur , Tels que

  • ...
    • en JavaScript, DOM, CSS et autres textes.

    3. Nœud d'attribut (Attr) : attribut d'élément, uniquement l'élément a l'attribut , tel que attribut de lien href="http://www.baidu.com".

    1) DOMTrois attributs majeurs du nœud (XML DOM)

    1)nodeName : le nœud d'élément, le nœud d'attribut et le nœud de texte renvoient respectivement le nom de l'élément, le nom de l'attribut et #text chaîne.

    2)nodeType : nodeType des nœuds d'élément, des nœuds d'attribut et du texte nœuds Les valeurs sont 1, 2, 3.,

    3)nodeValue : Les valeurs de retour des nœuds d'élément, des nœuds d'attribut et des nœuds de texte sont null respectivement , les valeurs d'attribut et le contenu du nœud de texte.

    2.2 DOMOpérations communes

    Node est l'interface parent de tous les nœuds, qui définit un ensemble d'attributs communs et méthodes, comme suit :

    Comparez les différences et les connexions entre BOM et DOM en Javascript1) Obtenir le nœud

    ① Obtenir le nœud d'élément : via Trois méthodes de documentobjet pour obtenir

    document.getElementById("ID")

    document.getElementByName("name")

    document.getElementsByTagName("p");

    ② Obtenir le nœud d'attribut : le nœud d'attribut est attaché au nœud d'élément. Vous pouvez obtenir le nœud d'attribut via le getAttributeNode(attrName) méthode du nœud d'élément, ou vous pouvez obtenir la valeur de l'attribut directement via getAttribute(attrName). (En revanche, l'interface Element setAttribute(attrName , attrValue) méthode, si l'attribut n'existe pas, il est ajouté directement au nœud de l'élément)

    ③ Récupérer le nœud de texte : Le nœud de texte est un nœud enfant de le nœud de l'élément, et peut être transmis via l'élément Obtenu à partir de la méthode

    childnodes()[index] fournie par le nœud (interface Element) .

    childNodes //NodeList, une liste de tous les nœuds enfants

    firstChild //Node, pointant vers le premier nœud de la liste childNodes

    lastChild //Node , pointant vers le dernier nœud de la liste childNodes

    parentNode //Node, pointant vers le nœud parent

    previousSibling /Node, / pointant vers le nœud frère précédent : si ce nœud est le premier node, Alors la valeur est null

    nextSibling //Node, pointant vers le nœud frère suivant : si ce nœud est le dernier nœud, alors la valeur est null

    hasChildNodes()` // Booléen, lorsque ChildNodes contient un ou plusieurs nœuds, renvoie la vraie valeur

    Comparez les différences et les connexions entre BOM et DOM en Javascript2) Changer le nœud

    ① Changer la valeur du nœud d'attribut : Vous pouvez modifier la valeur de l'attribut directement via le

    nodeValue du nœud d'attribut, ou via le nœud d'élément La méthode setAttribute() change.

    ② Changer la valeur du nœud de texte : modifiez-le directement via le

    nodeValue du nœud de texte.

    Dans le

    HTML DOM, le moyen le plus simple d'obtenir et de modifier le contenu d'un élément est d'utiliser le innerHTML de l'élément. Attribut ( L'attribut innerText renvoie innerHTML) avec la balise supprimée)

    Développer :

    innerText, innerHTML, externalHTML, externalText

    innerText: 表示起始标签和结束标签之间的文本

    innerHTML: 表示元素的所有元素和文本的HTML代码

    如：

    Hello world
    Le innerText est Hello world et innerHTML est Hello world

    outerText : la différence avec le premier est que l'intégralité du nœud cible est remplacé et le problème renvoie le même contenu que innerText

    outerHTML : La différence avec l'ancien Il remplace l'intégralité du nœud cible et renvoie le code HTML complet de l'élément, y compris l'élément lui-même

    Une image pour comprendre OUTHTML, innerText et innerHTML :

    Changer le style HTML (attribut style) : élément .style.color ="rouge";

    3) Supprimer le nœud

    ① Supprimer le nœud d'élément : Pour supprimer le nœud d'élément A, vous devez obtenir A Le nœud parent B de peut être obtenu via la méthode de 17.1.1, ou directement via L'attribut parentNode d'A est obtenu (recommandé). Appelez B removeChild(A) pour supprimer le nœud A.

    ② Supprimer le nœud d'attribut : vous pouvez utiliser removeAttribute(attrName) ou removeAttributeNode(node) du nœud d'élément auquel le nœud d'attribut appartient. Supprimer.

    ③ Effacer le nœud de texte : La méthode la plus simple et la plus courante consiste à définir directement l'attribut nameNode du nœud de texte sur une chaîne vide : textNode.nodeValue =””.

    Point de confusion :

    Ceci est un texte

    var p = document.getElementById('example');

    p.nodeValue //null, p est l'élément node, Donc nodeValue est null

    p.getAttributeNode('id').nodeValue / /exemple , on obtient ici le nœud d'attribut de l'attribut id de p, nodeValue est sa valeur d'attribut

    p.childNodes[0].nodeValue // Ceci est un morceau de texte,

    p contient deux nœuds enfants For, bien que le texte inséré n'ait pas d'étiquette, il s'agit toujours d'un nœud. Le type de

    est un nœud de texte, et sa nodeValue est la chaîne qui y est écrite, y compris les sauts de ligne et l'indentation

    p.innerHTML//Ceci est un morceau de texte "

    IciinnerHTMLrenvoyép contient les différentes valeurs de tous les nœuds, sous forme de chaînes

    .

    4）创建和添加节点

    ① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

    ② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法。

    扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode)和x.appendChild(newNode)都可以向x后追加一个新的子节点。

    5）替换节点

    主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）

     

     

     

     

    2.3 DOM事件

    DOM同时两种事件模型：冒泡型事件和捕获型事件

    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

      

    Click Me

    触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

     

    捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确

    上面例子触发的顺序是：document、div

    DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

    Comparez les différences et les connexions entre BOM et DOM en Javascript1）事件处理函数/监听函数

    在JavaScript中：

    var oDiv = document.getElementById("div1");

    oDiv.onclick = function(){ //onclick只能用小写

       alert("Clicked!");

    }

    或者

    var elem =document.getElementById(“id”)

    elem.onmouseover=handleMouseOver  //handleMouseOver  是函数名

    Function handleMouseOve(e){...}

     

    在HTML中：

    //le cas onclick est arbitraire

    Extension :

    Gestionnaire d'événements IE attachEvent() et detachEvent()

    Dans IE, chaque élément et objet fenêtre a deux méthodes : attachEvent() et detachEvent(). Ces deux méthodes acceptent les deux mêmes paramètres, le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements, tels que :

    [object].attachEvent("name_of_event_handler","function_to_attach")

    [object].detachEvent("name_of_event_handler","function_to_remove")

    var fnClick = function() {

    alert("Clicked!");

    }

    oDiv.attachEvent("onclick", fnClick); //Ajouter une fonction de gestion des événements

    oDiv.attachEvent("onclick", fnClickAnother); //Vous pouvez ajouter plusieurs gestionnaires d'événements

    oDiv.detachEvent("onclick", fnClick); //Supprimer les gestionnaires d'événements

    Lors de l'utilisation Avec la méthode attachEvent(), le gestionnaire d'événements s'exécutera dans la portée globale, c'est donc égal à window.

    2) Les gestionnaires d'événements multi-navigateurs

    addHandler() et removeHandler()

    la méthode addHandler() appartient à une classe appelée EventUntil() Objet, les deux méthodes acceptent les trois mêmes paramètres, l'élément sur lequel opérer, le nom de l'événement et la fonction du gestionnaire d'événement.

    3) Types d'événements

    Événements de souris : click, dbclick, mousedown, mouseup, mouseover, mouseout, mousemove

    Événements de clavier : keydown, keypress , keyup

    Événements HTML : charger, décharger, abandonner, erreur, sélectionner, modifier, soumettre, réinitialiser, redimensionner, faire défiler, se concentrer, flou

    4) Gestionnaire d'événements

    Les programmes qui exécutent du code JavaScript répondent aux événements lorsqu'ils se produisent. Le code exécuté en réponse à un événement spécifique

    est appelé un gestionnaire d'événements.

    La syntaxe d'utilisation des gestionnaires d'événements dans les balises HTML est :

    6)DOM 0. Gestionnaire d'événements de niveau

    Gestionnaire d'événements DOM niveau 0 : attribuer une fonction à l'attribut de gestionnaire d'un événement

    var btn2=document.getElementById('btn2'); Récupère l'objet bouton btn2

    btn2.onclick //Ajouter onclick à btn2 Attribut, l'attribut a déclenché un gestionnaire d'événements

    btn2.onclick=function(){

    } //Ajouter une fonction anonyme

    btn2.onclick=null //Supprimer l'attribut onclick

    7)DOM 2 gestionnaire d'événements de niveau

    DOM Les événements de niveau 2 définissent deux méthodes pour spécifier et supprimer les opérations du gestionnaire d'événements. 🎜>Dans le DOM, addEventListener() et removeEventListener() sont utilisés pour allouer et supprimer des fonctions de gestion d'événements. Contrairement à IE, ces méthodes nécessitent trois paramètres : le nom de l'événement, à attribuer. Si les fonctions et les fonctions de traitement sont utilisées dans la phase de bouillonnement. (false) ou la phase de capture (true), la phase par défaut est la phase de bouillonnement false

    [object].addEventListener("name_of_event",fnhander,bcapture)

    [object].removeEventListener( "name_of_event",fnhander,bcapture)

    var fnClick = function(){

    alert("Clicked!");

    }

    oDiv. addEventListener("onclick", fnClick, false); //Ajouter une fonction de gestionnaire d'événements

    oDiv.addEventListener("onclick", fnClickAnother, false); // Identique à IE, vous pouvez ajouter plusieurs gestionnaires d'événements

    oDiv.removeEventListener("onclick", fnClick, false); //Supprimer les gestionnaires d'événements

    Si vous utilisez addEventListener( ) pour ajouter la fonction de gestionnaire d'événements à la phase de capture , vous devez indiquer la phase de capture dans removeEventListener() pour supprimer correctement la fonction de gestionnaire d'événements

    oDiv.onclick = fnClick;

    oDiv .onclick = fnClickAnother //Utiliser l'affectation directe, événement ultérieur; les fonctions de traitement écraseront les fonctions de traitement précédentes

    oDiv.onclick = fnClick;

    oDiv.addEventListener("onclick", fnClickAnother, false //Sera appelé dans l'ordre et n'écrasera pas);

    3.Modèle d'objet de navigateur(BOM)

    Le cœur de BOM est fenêtre , et l'objet window a un double rôle. Il s'agit d'une interface permettant d'accéder à la fenêtre du navigateur via js , un autre objet Global (global). Cela signifie que tout objet, variable et fonction défini dans une page Web a window comme objet global.


    3.1FenêtreObjet

    Fenêtre est l'objet de niveau supérieur dans la hiérarchie

    JavaScript. L'objet Window

    représente une fenêtre de navigateur ou un cadre. L'objet

    Fenêtre

    sera dans

    ou chacun Il est automatiquement créé lorsqu'il apparaît.

    1) Propriétés de l'objet

    fenêtre //

    Fenêtre elle-même

    , window=window. self est accessible à l'aide de la propriété globale windowWindow object paire de documents Une référence en lecture seule à l'objet

    Document

    . Voir l'objet Document. history Une référence en lecture seule à l'objet

    History

    . Veuillez paramétrer l'objet Historique. location

    Location

    objet pour une fenêtre ou un cadre. Voir l'objet Location. screen Une référence en lecture seule à l'objet

    Screen

    . Veuillez paramétrer l'objet Screen. navigator Une référence en lecture seule à l'objet

    Navigator

    . Veuillez paramétrer l'objet Navigator. defaultStatus Définit ou renvoie le texte par défaut dans la barre d'état de la fenêtre.

    innerheight renvoie la hauteur de la zone d'affichage du document de la fenêtre.

    innerwidth renvoie la largeur de la zone d'affichage du document de la fenêtre.

    outerheight renvoie la hauteur extérieure de la fenêtre.

    outerwidth renvoie la largeur extérieure de la fenêtre.

    pageXOffset définit ou renvoie la position

    X

    de la page actuelle par rapport au coin supérieur gauche de la zone d'affichage de la fenêtre. pageYOffset définit ou renvoie la position

    Y

    de la page actuelle par rapport au coin supérieur gauche de la zone d'affichage de la fenêtre. name définit ou renvoie le nom de la fenêtre.

    parent renvoie la fenêtre parent.

    top Retourne à la fenêtre ancêtre la plus haute.

    statut définit le texte de la barre d'état de la fenêtre.

    window.location //URL

    adresse, équipée de cet attribut, vous pouvez ouvrir une nouvelle page

    2) Méthode objet

    window.close(); //

    Ferme la fenêtre

    window.alert("message"); //

    fait apparaître une fenêtre avec

    OK La boîte de message système du bouton affiche le texte spécifié

    window.confirm("Êtes-vous sûr ?"); //ouvre une fenêtre avec OK et Annuler La boîte de dialogue de requête du bouton renvoie une valeur booléenne

    window.prompt("What's your name?", "Default"); // invite l'utilisateur à saisir des informations et en accepte deux. Paramètres. C'est-à-dire le texte à afficher à l'utilisateur et la valeur par défaut dans la zone de texte, renvoie la valeur dans la zone de texte sous forme de valeur de fonction

    window.status //. peut temporairement modifier le texte de la barre d'état

    window.defaultStatus //Informations de la barre d'état par défaut, qui peuvent modifier le texte avant que l'utilisateur ne quitte la page actuelle

    window.setTimeout("alert(' xxx')", 1000); //Défini pour exécuter le code spécifié après le nombre de millisecondes spécifié Accepte 2 paramètres, le code à exécuter et les millisecondes à attendre. Number

    window.clearTimeout("ID"); //Annuler la pause qui n'a pas encore été exécutée et passer la pause. ID à lui

    window.setInterval(function, 1000); //Répétez le code spécifié à l'infini à chaque période de temps spécifiée Les paramètres. sont identiques à setTimeout()Identique

    window.clearInterval("ID"); //Annulez l'intervalle de temps et passez le intervalleID à celui-ci

    window.history.go(-1) //Accéder à l'historique de la fenêtre du navigateur, un négatif un nombre signifie revenir en arrière, un nombre positif signifie avancer

    window history.back(); //Idem que ci-dessus

    window.history.forward. (); //Identique à ci-dessus

    window.history.length / /Vous pouvez afficher le nombre de pages dans l'historique

    clearInterval( ) Annulez le timeoutsetInterval() 🎜>.

    clearTimeout() annule le

    timeout défini par la méthode setTimeout() .

    createPopup() crée une fenêtre

    pop-up .

    moveBy() déplace la fenêtre des pixels spécifiés par rapport à ses coordonnées actuelles.

    moveTo() Déplace le coin supérieur gauche de la fenêtre vers une coordonnée spécifiée.

    open() Ouvre une nouvelle fenêtre de navigateur ou recherchez une fenêtre nommée.

    print() imprime le contenu de la fenêtre actuelle.

    resizeBy() Redimensionne la fenêtre en fonction des pixels spécifiés.

    resizeTo() Redimensionne la fenêtre à la largeur et à la hauteur spécifiées.

    scrollBy() fait défiler le contenu en fonction de la valeur de pixel spécifiée.

    scrollTo() fait défiler le contenu jusqu'aux coordonnées spécifiées.

    setInterval() Appelle une fonction ou évalue une expression à une période spécifiée (en millisecondes).

    setTimeout(

    Method,Seconds) Appelle une fonction ou une expression calculée après le nombre de millisecondes spécifié.

    timeOutEvent = setTimeout("longPress('" + obj + "')",1500); timer passe les paramètres

    3) Objet membre

    window.event

    window.document //

    Voir document détails de l'objet

    window.history

    window.screen

    window.navigator

    Window.external

    Extension

    ① Si le document contient des frames (balises

    frame ou iframe), le navigateur traitera le HTML documentez en tant que Créer un objet fenêtre et créez un objet fenêtre supplémentaire pour chaque image.

    ②

    window.frames Renvoie tous les cadres nommés dans la fenêtre

    ③parent est la fenêtre parent (si la fenêtre est une fenêtre de niveau supérieur, alors parent==self==top)

    top est la fenêtre parent de niveau supérieur (certaines fenêtres ont plusieurs couches de frameset ou iframe)

    self est la fenêtre actuelle (équivalent à window )

    opener est la fenêtre qui ouvre la fenêtre actuelle en utilisant la méthode open

    ④Méthodes liées aux boîtes de message : alert(String), confirm(String), prompt(String)

    ⑤Deux minuteries : setTimeout(code,latency) et setInterval(code, période)

    Remarque : setTimeout n'est exécuté qu'une seule fois code, si vous le souhaitez pour l'appeler plusieurs fois, vous pouvez Will code lui-même appeler setTimeout() à nouveau setInteval() ; Continuez à appeler le code jusqu'à ce que clearInterval() soit appelé.

    Historique 3.2Objet

    　window.history.length //Nombre de pages consultées

    history.back() //Revenir en arrière d'une étape dans l'historique de navigation

    history.forward() //Avancer dans la navigation history Plus loin

    　history.go(i) // jusqu'à la position i

    　//i>0Progrès,i<0Retraite

    　--- --------------------------------------------- ----- --------------

    3.3 écranObjet

    écranobjet : utilisé pour obtenir certaines informations sur l'écran de l'utilisateur. Vous pouvez également utiliser window.screen pour le référencer

    window.screen width //Largeur de l'écran

    　

    window.screen.height //Hauteur de l'écran

    window.screen .colorDepth //Profondeur de couleur de l'écran

    　

    window.screen.availWidth //Largeur disponible( À l'exclusion du hauteur de la barre des tâches)

    　

    window.screen.availHeight //Hauteur disponible(Sauf la hauteur de la barre des tâches)

    　

    --------------------- --- ----------------------- ------------------

    3.4 externeObjet

    　

    window.external.AddFavorite("Adresse"," Titre" ) //Ajouter le site Web aux favoris

    　-------------------------------------------- ------ ------ ------------------

    Navigateur 3.5Objet

    navigator`

     : contient de nombreuses informations sur le navigateur Web, très utile pour détecter les navigateurs et les systèmes d'exploitation

    　

    window.navigator.appCodeName //Nom du code du navigateur

    　

    window.navigator.appName //Navigateur nom de code Nom

    　

    window.navigator.appMinorVersion //Version du correctif du navigateur

    　

    window.navigator.cpuClass // cputypex86

    　

    window.navigator.platform //type de système d'exploitationwin32

    　

    window.navigator.plugins

    　

    window.navigator.opsProfile

    　

    window.navigator. userProfile

    　

    window.navigator.systemLanguage //Langue du système clientzh-cnChinois simplifié

    　

    window.navigator.userLanguage //Langue de l'utilisateur,Identique à ci-dessus

    window .navigator.appVersion //Version du navigateur(Y compris la version du système)

    　

    window.navigator.userAgent//Représentation sous forme de chaîne de l'en-tête de l'agent utilisateur

    　

    window.navigator.onLine //L'utilisateur n'est pas online

    　

    window.navigator.cookieEnabled //Si le navigateur prend en charge les cookie

    window .navigator.mimeTypes

    3.6 DocumentObjet

    1) L'attribut objet

    document.body//

    permet d'accéder directement à l'élément . Pour les documents qui définissent un frameset, cet attribut fait référence au le plus externe.

    document.cookie Renvoie tous les

    cookies liés au document actuel.

    document.title //

    Renvoie le titre du document équivalent au HTMLde titre Balises

    document.domain renvoie le nom de domaine du document actuel.

    document.bgColor //

    Retour à la couleur de fond de la page

    document.fgColor //

    Retour à la couleur de premier plan( Couleur du texte)

    document.linkColor //

    Couleur du lien non cliqué

    document.alinkColor //

    Activer la couleur du lien (focus sur ce lien)

    document.vlinkColor //

    Couleur du lien cliqué

    document.URL //

    Définissez la propriété URL pour ouvrir une autre page Web dans la même fenêtre

    document.fileCreatedDate //

    Date de création du fichier, attribut en lecture seule

    document.fileModifiedDate //

    Date de modification du fichier, attribut en lecture seule

    document.lastModified Renvoie la date et l'heure auxquelles le document a été modifié pour la dernière fois.

    document.fileSize //Taille du fichier, attribut en lecture seule

    document.cookie //Définir et lirecookie

    document.charset //Renvoie le jeu de caractères Chinois simplifié:gb2312

    document.URL Renvoie l'URL du document actuel.

    document.referrer renvoie l'URL du document qui a chargé le document actuel.

    document.styleSheets Renvoie une collection de feuilles de style,Valeur de retourCSSStyleSheet[]

    document.styleSheets[0].cssRules.style.paddingTop=”10px”Définissez le style,Supprimez les tirets du nom du style,

    2) Méthodes d'objet courantes

    document.write() //Écrire dynamiquement du contenu sur la page

    document.writeln () est équivalent. La différence avec la méthode write() est qu'un caractère de nouvelle ligne est écrit après chaque expression.

    document.createElement() //Créer un nouvel élément objet)

    document.getElementById(ID) //

    Obtenir l'objet avec la valeur ID spécifiée

    document .getElementsByName(Name) //

    Obtenir l'objet avec la valeur Name spécifiée

    getElementsByTagName() renvoie une collection d'objets avec le nom de balise spécifié.

    document.body.appendChild(oTag)

    ————————————————————————

    3) body-Sous-objet Corps

    document.body //

    Spécifie le début et la fin du corps du document qui est équivalent à body> /body>

    document.body.bgColor //

    Définir ou obtenir la couleur d'arrière-plan derrière l'objet

    document.body.link //

    Couleur du lien non cliqué

    document.body.alink //

    Activer le lien(Le focus est sur ce lien ) couleur

    document.body.vlink //

    Couleur du lien cliqué

    document.body.text / /

    Couleur du texte

    document.body.innerText //

    Paramètresbody>…/body> Texte entre /body>HTML

    code

    document.body.topMargin //Marge supérieure de la pagedocument.body.leftMargin //Marge gauche de la pagedocument.body.rightMargin //Marge droite de la pagedocument.body.bottomMargin //

    Marge inférieure de la page

    document.body.background //

    Image de fond

    document.body .appendChild( oTag) //

    Générer dynamiquement un objet

    HTML

    4) Événements d'objets communs

    document.body.onclick=

    ”

    func()”//

    Cliquer sur l'objet avec le pointeur de la souris est déclenché

    document.body.onmouseover=”func()”//Déclenché lorsque le pointeur de la souris se déplace vers l'objet

    document.body.onmouseout=”func()”//Souris Déclenché lorsque le pointeur sort de l'objet

    ————————————————————————

    5) location- Sous-objet Location

    location objet : URL représentant la fenêtre de chargement, également disponible window.locationRéférencez-le

    location.href //L'URL de la page actuellement chargée, telle que http://www.somewhere.com/pictures/index.htm

    location.portocol //Le protocole utilisé dans l'URL

    , c'est-à-dire avant la partie double barre oblique, telle que http

    location.host //

    Le nom du serveur, tel que www.wrox.com

    location.hostname //

    est généralement égal à host, parfois le précédent www

    location.port est omis //Le port demandé déclaré par URL

    Par défaut, la plupart des URL n'ont pas d'informations de port. , tel que 8080

    location.pathname // La partie après le nom d'hôte dans l'URL

    , telle que /pictures/index.htm

    location.search //

    Execute

    URL demandée par 🎜>GET est également appelée chaîne de requête, telle que ?param= xxxxlocation.hash //

    If

    URL contient #, renvoie ce symbole Le contenu suivant, tel que #anchor1location.assign(" http:www.baidu.com"); //

    est identique à

    location .href, la nouvelle adresse sera ajoutée à la pile d'historique du navigateurlocation.replace("http:www.baidu.com"); //

    Identique à

    assign(), mais la nouvelle adresse ne sera pas ajouté à la pile d'historique du navigateur et ne peut pas être transmis via l'emplacement retour et avantVisite. reload(true | false); //

    Recharger la page actuelle, qui est

    false est rechargé depuis le cache du navigateur, lorsqu'elle est true , il est rechargé côté serveur. La valeur par défaut est false document.location.reload(URL) //Ouvrez un nouveau. page web

    6) sélection-

    Sous-objet de sélection

    document.selection

    7 ) formulaires

    collection

    (formulaire en page) a) Référencé à travers la collection

    document.forms // correspond au

    formulaireTagdocument.forms. length //Le nombre de balises

    /formform

    sur la page correspondante

    document.forms[0] //ème1/formform balise

    document.forms[i] //thi-1/formformtag

    document.forms[i].length //thi-1/formform Nombre de contrôles

    document.forms[i].elements[j] //ième i-1/formformN° j-1contrôle

    b)par tag Le nom l'attribut fait directement référence à

    /formform name=”Myform”>input name= ”myctrl”/>/form

    document.Myform.myctrl // document. Nom du formulaire.Nom du contrôle

    c)Accéder aux propriétés du formulaire

    document .forms[ i].name // correspond à nom du formulaire>attribut

    document.forms[i].action //correspond à /formform action>attribut

    document.forms[i].encoding //correspond à /formform enctype>Attribut

    document.forms[i].target //correspond à/formform target>Attribut

    document.forms[i].appendChild(oTag) //Insérer dynamiquement un contrôle

    document.all.oDiv //Couche de référence oDiv

    document.all.oDiv.style.display=” // Calque défini sur visible

    document.all.oDiv.style.display=”aucun”//Couche défini sur caché

    document.getElementId(”oDiv”) //Référence objet document.getElementId(”

    oDiv

    ”).style=”document.getElementId(”

    oDiv

    ” ).display=” aucun”/*document.all signifie document

    Seul ie prend en charge cet attribut, il est donc également utilisé pour déterminer le type de navigateur

    */ ....3.7 HTMLElement

    Objet

    HTML DOM Nœud

    Dans le HTML DOM (Document Object Model), chaque partie est un nœud :

    1.Le document lui-même est un nœud de document

    2.TousHTMLles éléments sont des nœuds d'éléments

    3.TousLes attributs HTMLsont des nœuds d'attribut

    4 Le texte à l'intérieur de l'élément HTML est un nœud de texte

    5. les annotations sont un nœud d'annotation

    Élément objet

    dans le HTML DOM , L'objet Element représente l'élément HTML. L'objet

    Élément peut avoir des nœuds enfants de type nœud d'élément, nœud de texte et nœud de commentaire. L'objet

    NodeList représente une liste de nœuds, telle qu'une collection de nœuds enfants de l'élément HTML. Les éléments

    peuvent également avoir des attributs. L'attribut est un nœud d'attribut

    Get

    document.getElementById(ID) //Obtenir l'objet

    ID spécifié valeur 🎜>

    document.getElementsByName(Name) //

    Obtient l'objet avec le Nom valeur

    getElementsByTagName spécifié () renvoie la valeur avec la collection d'objets spécifiée de noms de balises.

    Attributs et méthodes

    Les paramètres de

    a,b dans la méthode servent juste à approfondir l'explication, Les autres éléments n'ont pas a,b, ce qui ne veut pas dire qu'il s'agit d'une méthode sans paramètre

    Element.add ()

    Ajouter la classe spécifiée à l'élément

    element.accessKey définit ou renvoie la touche de raccourci de l'élément.

    element.appendChild() ajoute un nouveau nœud enfant à l'élément en tant que dernier nœud enfant.

    element.attributes renvoie une collection d'attributs d'élément.

    element.childNodes renvoie une

    NodeList des nœuds enfants de l'élément.

    element.className définit ou renvoie l'attribut

    class de l'élément.

    element.clientHeight renvoie la hauteur visible de l'élément.

    element.clientWidth renvoie la largeur visible de l'élément.

    element.cloneNode() clone un élément.

    element.compareDocumentPosition() Compare les positions du document de deux éléments.

    element.contentEditable définit ou renvoie la direction du texte d'un élément.

    element.dir Définit ou renvoie la direction du texte d'un élément.

    element.firstChild renvoie le premier enfant de l'élément.

    element.getAttribute() renvoie la valeur d'attribut spécifiée du nœud d'élément.

    element.getAttributeNode() renvoie le nœud d'attribut spécifié.

    element.getElementsByTagName() renvoie une collection de tous les éléments enfants avec le nom de balise spécifié.

    element.getFeature() renvoie un objet de

    API qui implémente la fonctionnalité spécifiée.

    element.getUserData() renvoie l'objet de la clé sur l'élément associé.

    Element.hidden

    Obtient ou définit le statut d'existence de l'attribut hidden

    element.hasAttribute() si le L'élément a l'attribut spécifié, il renvoie

    true, sinon il renvoie false.

    element.hasAttributes() Renvoie

    true si l'élément a des attributs, sinon renvoie false.

    element.hasChildNodes() renvoie

    true si l'élément a des nœuds enfants, sinon false.

    element.id définit ou renvoie le

    id de l'élément.

    element.innerHTML Définit ou renvoie le contenu de l'élément.

    element.insertBefore(,) Insère un nouveau nœud avant le nœud enfant existant spécifié. A est inséré avant b

    element.isContentEditable définit ou renvoie le contenu de l'élément.

    element.isDefaultNamespace() Si le namespaceURI spécifié est la valeur par défaut, renvoie true, sinon renvoie faux.

    element.isEqualNode() vérifie si l'élément a est égal à l'élément actuel.

    element.isSameNode(a) Vérifie si l'élément spécifié est l'élément actuel .

    element.isSupported() Si l'élément prend en charge la fonctionnalité spécifiée, renvoie vrai.

    element.lang définit ou renvoie le code de langue de l'élément.

    element.lastChild renvoie le dernier élément enfant de l'élément.

    element.namespaceURI renvoie l'URI de l'espace de noms de l'élément.

    element.nextSibling Renvoie l'élément frère après l'élément actuel

    element.nodeName Renvoie le nom de l'élément.

    element.nodeType renvoie le type de nœud de l'élément.

    element.nodeValue définit ou renvoie la valeur de l'élément.

    element.normalize() Fusionne les nœuds de texte adjacents dans les éléments et supprime les nœuds de texte vides.

    element.offsetHeight renvoie la hauteur de l'élément.

    element.offsetWidth renvoie la largeur de l'élément.

    element.offsetLeft renvoie la position de décalage horizontal de l'élément.

    element.offsetParent renvoie le conteneur de décalage de l'élément.

    element.offsetTop renvoie la position de décalage vertical de l'élément.

    element.ownerDocument renvoie l'élément racine (objet document) de l'élément.

    element.parentNode renvoie le nœud parent de l'élément.

    element.previousSibling renvoie l'élément frère avant l'élément actuel

    Element.remove() Supprime la classe spécifiée de l'élément

    element.removeAttribute() Supprime l'attribut spécifié de l'élément.

    element.removeAttributeNode() supprime le nœud d'attribut spécifié et renvoie le nœud supprimé.

    element.removeChild(a) Supprime un nœud enfant d'un élément.

    element.replaceChild(a,b) Remplace les nœuds enfants dans l'élément.

    element.scrollHeight renvoie la hauteur totale de l'élément.

    element.scrollLeft renvoie la distance entre le bord gauche de l'élément et la vue.

    element.scrollTop renvoie la distance entre le bord supérieur de l'élément et la vue.

    element.scrollWidth renvoie la largeur totale de l'élément.

    element.setAttribute() Définit ou modifie l'attribut spécifié à la valeur spécifiée.

    element.setAttributeNode() Définit ou modifie le nœud d'attribut spécifié.

    element.setIdAttribute()

    element.setIdAttributeNode()

    element.setUserData() Associe un objet à une clé sur un élément.

    element.style définit ou renvoie l'attribut style de l'élément.

    Element.toggle()Si la classe n'existe pas, ajoutez-la et supprimez-la si elle existe

    element.tabIndex sets ou renvoie les touches onglet de l'élément qui contrôlent l'ordre.

    element.tagName renvoie le nom de balise de l'élément.

    element.textContent définit ou renvoie le contenu textuel du nœud et de ses descendants.

    element.title définit ou renvoie l'attribut title de l'élément.

    element.toString() Convertit un élément en chaîne.

    nodelist.item() renvoie le nœud situé à l'index spécifié dans NodeList .

    nodelist.length renvoie le nombre de nœuds dans NodeList .

    element.addEventListener(event, function, useCapture)

    Paramètres

    Description

    événement

    Obligatoire. Chaîne spécifiant le nom de l'événement.

    Remarque : N'utilisez pas le préfixe "on". Par exemple, utilisez "click", au lieu d'utiliser "onclick".

    Conseil : Pour tous les événements HTML DOM , consultez notre manuel complet de référence des objets HTML DOM Event.

    fonction

    Obligatoire. Spécifiez la fonction à exécuter lorsque l'événement est déclenché.

    Quand l'objet événement sera passé dans la fonction comme premier paramètre. Le type d'objet événement dépend de l'événement spécifique. Par exemple, l'événement "click" appartient à l'objet MouseEvent(MouseEvent).

    useCapture

    Facultatif. Une valeur booléenne qui spécifie si l'événement est exécuté en phase de capture ou de bouillonnement.

    Valeurs possibles :

    true - Le gestionnaire d'événements est exécuté pendant la phase de capture

    false- false- Par défaut. Le gestionnaire d'événements est exécuté pendant la phase de bouillonnement

    contentWindow attribut

    s'il y a une iframe dans le document Attribut Utilisez cet attribut pour renvoyer le contenu de iframe

    1) Table objet


    lignes La collection renvoie toutes les lignes du tableau (TableRow objets), l'ensemble comprend , , et Toutes les lignes définies dans

    TableRow Object

    TableRow L'objet représente une ligne de tableau HTML.

    Dans le document HTML un L'objet TableRow sera créé.

    TableRow

    Collection d'objets

    集合

    描述

    IE

    F

    O

    W3C

    cells[]

    返回包含行中所有单元格的一个数组。

    4

    1

    9

    Yes
    Collection    		 Description IE F O W3C cells[] Renvoie un tableau contenant toutes les cellules de la ligne. 4 1 9 Oui

    cellules La collection renvoie toutes les

    		ou Élément. L'objet

    TableCell représente une HTML cellule de tableau.

    Dans un document HTML

    		>TableCell l'objet sera créé3.8 Événement

    objet

    1) Attributs communs des objets Event

    typeChaîne
    Nom Description

    名称

    说明

    返回

    type

    事件的名称如mouseover

    字符串

    target

    事件指向的元素

    HTMLElement
    		Retour
    Le nom de l'événement est comme survol de la souris
    cible L'élément pointé par l'événement HTMLElement

    2) Fenêtre Propriétés de l'événement

    (Ceux sans bleu sont h 5 Nouvel événement)

    Événement déclenché pour l'objet fenêtre (s'applique à < body> tag) :

    attribut

    onafterprint Script qui s'exécute après l'impression du document.

    script onbeforeprint qui s'exécute avant l'impression du document.

    script onbeforeunload qui s'exécute avant le déchargement du document.

    onerror Script à exécuter lorsqu'une erreur se produit.

    onhaschange Script qui s'exécute lorsque le document a changé.

    onload Déclenché une fois le chargement de la page terminé.

    onmessage Un script qui s'exécute lorsqu'un message est déclenché.

    Vous pouvez utiliser l'appel postMessage () pour envoyer un message au fil de discussion principal Dans certains scénarios, l'appelant professionnel peut avoir besoin de communiquer activement avec le positionnement. le composant , peut être transmis html5 PostMessage initie activement la communication avec le composant de positionnement

    onoffline Un script qui s'exécute lorsque le document est hors ligne.

    ononline Script qui s'exécute lorsque le document est mis en ligne.

    onpagehide Script qui s'exécute lorsque la fenêtre est masquée.

    onpageshow Script qui s'exécute lorsque la fenêtre devient visible.

    onpopstate Script qui s'exécute lorsque l'historique de la fenêtre change.

    onredo Script qui s'exécute lorsqu'un document effectue une révocation (redo).

    onresize Se déclenche lorsque la fenêtre du navigateur est redimensionnée.

    onstorage Un script qui s'exécute après la mise à jour de la zone Web Storage .

    onundo Un script qui s'exécute lorsque le document exécute annuler .

    onunload Se déclenche une fois la page téléchargée (ou la fenêtre du navigateur fermée).

    3) Formulaire Événements

    Événements déclenchés par des actions dans le formulaire HTML (s'applique à presque tous les éléments HTML, mais le plus couramment utilisé dans l'élément form) :

    attribut

    onblur Script qui s'exécute lorsque l'élément perd le focus.

    onchange Un script qui s'exécute lorsque la valeur de l'élément est modifiée.

    oncontextmenu Script qui s'exécute lorsque le menu contextuel est déclenché.

    onfocus Un script qui s'exécute lorsqu'un élément perd le focus.

    onformchange Script qui s'exécute lorsque le formulaire change.

    onforminput Script qui s'exécute lorsque le formulaire reçoit une entrée de l'utilisateur.

    oninput Un script qui s'exécute lorsque l'élément reçoit une entrée de l'utilisateur.

    oninvalid Script qui s'exécute lorsqu'un élément n'est pas valide.

    onreset Se déclenche lorsque l'on clique sur le bouton de réinitialisation du formulaire. Non pris en charge en HTML5.

    onselect Se déclenche lorsque le texte de l'élément est sélectionné.

    onsubmit Se déclenche lorsque le formulaire est soumis.

    4) Utilisation de oninput, onpropertychange, onchange

    oninput :

    L'événement

    oninput est déclenché lorsque l'utilisateur entre.

    Cet événement est déclenché lorsque la valeur de l'élément ou