interface Web
js tutoriel
Explication détaillée des méthodes d'attribut DOM et des problèmes de compatibilité
Explication détaillée des méthodes d'attribut DOM et des problèmes de compatibilité
Type d'élément dans DOM : (tous les attributs suivants ne sont que des attributs en lecture seule)
1. comme type de valeur numérique.
Il existe 12 types de nœuds différents, qui peuvent avoir des nœuds enfants de différents types de nœuds (les trois premiers sont importants) : 
if(ul .nodeType == Node.ELEMENT_NODE){
alert('Le nœud est un élément');
}
Le code ci-dessus peut s'exécuter normalement sous les navigateurs standards, mais ne peut pas s'exécuter normalement sous les navigateurs non standard (sous ie8).
Solution :
if(ul.nodeType ==1){ alert('Node is an element'); } Utilisez l'attribut nodeType pour comparer avec les nombres.
2. La valeur nodeName est le nom de balise du type d'élément, tel que ul, p, etc.
nodeValue est nulle.
ParentNode peut être un document ou un élément, et les nœuds enfants peuvent l'être. Élément, Texte, Commentaire, ProcessingInstruction, CDATASection, EntityReference.
Caractéristiques de fonctionnement
1. Obtenir les caractéristiques via les attributs des éléments HTML
Tous les éléments HTML transmettent le type HTMLElement ou ses sous-types (HTMLDivElement, HTMLImageElement ) indique que le type HTMLElement hérite du type Element, mais ajoute des attributs uniques. Le sous-type possède également ses propres attributs et méthodes uniques. Par exemple, img possède des attributs uniques tels que src et title. Une remarque spéciale est que puisque class est un mot-clé dans js, className doit être utilisé pour obtenir la valeur de class.
Les méthodes d'acquisition et de réglage ainsi que les endroits auxquels il faut prêter attention sont décrits par comparaison en 2 et 3.
2. element.getAttribute(attributename) renvoie la valeur d'attribut du nom d'attribut spécifié.
Cette méthode transmet une chaîne de noms d'attributs, qui n'est pas sensible à la casse.
Par exemple, ul.getAttribute('class'); Puisque le paramètre est une chaîne, vous pouvez utiliser class au lieu de className. Les attributs personnalisés peuvent être obtenus via cette méthode. Dans certains noms d'attributs contenant des caractères utilisés dans des mots non-clés, il est particulièrement pratique d'utiliser cette méthode pour obtenir la valeur de l'attribut. Par exemple, dans la spécification HTML5, les attributs personnalisés doivent être. précédé du préfixe data-. Pour faciliter la vérification, s'il contient le caractère illégal '-', vous pouvez utiliser ul.getAttribute('data-index');
Spécialement, lorsque le nom d'attribut est style, cette méthode renvoie un objet dans les versions antérieures à IE7, tandis que les autres versions de navigateurs renvoient du texte CSS. Lorsque le nom d'attribut est un gestionnaire d'événements tel que onclick, cette méthode renvoie une méthode ou null dans les versions antérieures à IE7, et d'autres versions de navigateurs renvoient une chaîne de code de fonction.
L'obtention d'attributs via les attributs d'éléments HTML est assez différente de getAttribute().
1. Différences dans l'accès aux attributs personnalisés :
Lors de l'analyse du code HTML, les navigateurs standard n'ajouteront pas les attributs personnalisés de l'élément à l'objet DOM. Les attributs personnalisés sont accessibles en js via les attributs. le résultat n'est pas défini. Les navigateurs non standard ajouteront cet attribut personnalisé à l'objet DOM et le résultat sera accessible dans js.
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ul1" index="hehe"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var ul = document.getElementById('ul1');
alert(ul.id); /*标准与非标准都是div1*/
alert(ul.index);/*标准为undefined 非标准为hehe*/ </script> </body></html>1234567891011121314151617181920212. Lorsque l'attribut est style, un objet est renvoyé. Lorsque l'attribut est gestion d'événement, la fonction copiée est renvoyée.
En résumé, lors de la manipulation des attributs d'objets DOM, les attributs d'éléments HTML sont généralement utilisés pour obtenir des attributs uniquement lors de l'obtention de la valeur des attributs personnalisés et de certains noms d'attributs contenant des caractères illégaux lors de l'utilisation de la méthode getAttribute.
.
3. element.setAttribute(attributename,attributvalue) ajoute l'attribut spécifié et lui attribue la valeur spécifiée.
Par rapport à la manière de définir les attributs via les attributs d'élément HTML, cette méthode peut ajouter des attributs personnalisés qui ne sont pas disponibles et attribuer des valeurs, mais les attributs définis via les attributs d'élément HTML ne seront pas définis. Dans le même temps, cette méthode comporte également des exceptions dans les versions antérieures à IE7. Ainsi, en plus de définir des attributs personnalisés, il existe d'autres moyens de définir des propriétés via les attributs d'éléments HTML.
4. RemoveAttribute() supprime les attributs, mais n'est pas fréquemment utilisé. Les versions antérieures à IE6 ne prennent pas en charge cette méthode.
Contenu de l'opération
1. childNodes : représente une collection de nœuds enfants d'un élément et renvoie un objet NodeList.
Sous les navigateurs standards : les nœuds enfants renvoyés incluent le type de texte, le type d'élément, le type de commentaire, etc., en particulier le texte vide dans le type de texte, ce qu'on appelle le saut de ligne.
Dans les navigateurs non standard : les nœuds enfants renvoyés ne contiennent pas de texte creux de type texte et sont également liés à la position du nœud, à la méthode d'analyse, etc.
<ul id="ul1"> <li>22222</li>
111111 <!--33333--></ul><script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.childNodes.length);</script>在标准浏览器下：得到的结果为5（li元素前的换行空文本，li元素，注释到</li>之间这一段文本，注释，注释到</ul>的空白） 在非标准的浏览器下得到的结果为1 但是将<li>22222</li> 111111互换位置之后得到的结果为2.1234567891011所以当运行下面代码的时候为出问题：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){
oul.childNodes[i].style.backgroundColor = 'red';
} /*标准： Cannot set property 'backgroundColor' of undefined*/ /*非标准：（ie8之前）正常*/
</script> </body></html>原因很简单，就是因为在标准浏览器下childNodes返回的子节点中包含非元素类型的节点。12345678910111213141516171819202122232425 Moyens de résoudre le problème ci-dessus :
Déterminez si le nœud enfant est un type d'élément via l'attribut nodeType :
for(var i = 0; i<oul.childNodes.length; i++){
if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
}1234Dans les documents HTML imbriqués illégalement En raison des méthodes d'analyse différentes, les résultats présentés dans les navigateurs standard et non standard sont entièrement liés à la méthode d'analyse du noyau du navigateur. Par exemple :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <p>5555555</p> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1'); for(var i = 0; i<oul.childNodes.length; i++){ if(oul.childNodes[i].nodeType === 1)
oul.childNodes[i].style.backgroundColor = 'red';
} </script> </body> </html>1234567891011121314151617181920212223对于一些分标准的浏览器比如ie7 解析的时候他会把这种那个不符合语义的p元素放到最后一个li中，但对于其他的浏览器并不会这样。换句话说，在标准浏览器下p是ul的子节点，但是在非标准的浏览器下p是最后一个li的子节点，这完全和浏览器内核的系欸小方式有关。
由此可以看出，对于在书写html文档的时候，结构化语义是多么的重要，至少能为添加js方便不少。
二、element.childern仅仅返回元素类型的子节点集合，返回NodeList 对象。
Children比childNodes要好得多，因为他仅仅获取那些为元素类型的子节点。但是还是不能免于非法嵌套带来的问题，这本身至于浏览器的近稀饭时有关，与用那种属性没有关系。
三、element.firstChild（firstElementChild）：获取第一个子点
element.lastChild（lastElementChild）：获取最后一个子节点
element.nextSibling（nextElementSibling）：获取相邻的下一个兄弟子节点
element.previousSibling（previousElementSibling）：获取相邻的上一个兄弟节点
以firstChild为例说明一下性质，其他的大同小异。
在标准情况下：返回的结果可能是文本类型（空文本）。
在非标准的情况下：如果有元素子节点，那么一定返回第一个元素类型的子节点。
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /></head><body> <ul id="ul1"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> var oul = document.getElementById('ul1');
alert(oul.firstChild.nodeName); /*标准下text非标准为li*/ </script></body></html>123456789101112131415161718192021解决这种情况
1是firstElementChild。
firstElementChild仅仅是在标准浏览器下有效，在非标准的浏览器下是没有定义的。在标准浏览器下仅仅返回第一个元素类型的子节点，如果没有返回null。
再js中加入：
function firstChild(obj){ if(obj.firstElementChild === undefined){//检测是否为标准浏览器 return obj.firstChild;//不是标准浏览器，用firstChild返回第一个元素子节点，可能为null
}else{ return obj.firstElementChild;//是标准浏览器，用firstElementChild返回第一个元素子节点，可能为null
}
} var oFirst = firstChild(oul); if(oFirst){//判断有没有第一个元素子节点排除空节点的情况
oFirst.style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}1234567891011121314152直接用children：推荐
if(oul.children[0]){
oul.children[0].style.backgroundColor = 'orange';
}else{
alert('没有第一个元素');
}123456四、element.parentNode： 当前节点的父级节点，无兼容性问题。
Eg：点击隐藏将这个列表隐藏<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function() { var aA = document.getElementsByTagName('a'); for (var i=0; i<aA.length; i++) {
aA[i].onclick = function() { this.parentNode.style.display = 'none';
}
}
}</script></head><body> <ul id="ul1"> <li>11111 <a href="javascript:;">隐藏</a></li> <li>22222 <a href="javascript:;">隐藏</a></li> <li>33333 <a href="javascript:;">隐藏</a></li> <li>44444 <a href="javascript:;">隐藏</a></li> </ul></body></html>123456789101112131415161718192021222324252627五、element.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
非ie7以下的浏览器：
如果没有定位父级 offsetParent 为body
如果有定位父级 offsetParent 为定位父级
Ie7以下的浏览器：
如果没有定位父级 自身没有定位 offsetParent 为body，自身有定位的话 为html
如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上。
如果有定位父级 offsetParent 为定位父级
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; zoom: 1;position: relative;}#div3 {background: orange;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetParent.id );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>1234567891011121314151617181920212223242526272829Div2 zoom：1；属性触发layout，并且div3没有定位，所以在ie7一下的版本父元素div2，同时，div2相对定位，在其他浏览器中父元素为div2。解决了兼容性问题。
六、element.offsetLeft[Top] : 只读 属性
当前元素到定位父级的距离（偏移值）（或者说，到当前元素的offsetParent的距离）
非ie7以下的浏览器：
如果没有定位父级 offsetLeft [top]是到html的距离。
如果有定位父级 是到定位父级的距离。
ie7以下：
如果自己没有定位，无论是否有没有父级定位offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离（没有父级定位情况下是到html的距离）。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div {padding: 40px 50px;}#div1 {background: red;}#div2 {background: green; position: relative;}#div3 {background: orange; position: relative;}</style><script>window.onload = function() { var oDiv3 = document.getElementById('div3');
alert( oDiv3.offsetTop );
}</script></head><body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body></html>123456789101112131415161718192021222324252627例子：获得任意一个元素的相对
于页面的位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> body{padding:0; margin:0;} /*由于offsetLeft和offsetParsent在没有定位父级的时候父级不同*/ div{padding: 40px 50px;} #div1{background-color: #008000;} #div2{background-color: #FF0000;position: relative;} #div3{background-color: #FFA500;position:relative;} /*设置position offsetLeft在字节没有定位的时候是相对body的*/ </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">
</div> </div> </div> <script type="text/javascript"> var oDiv = document.getElementById('div3'); function getPosition(obj){ var pos = {left:0, top:0}; while(obj){
pos.left += obj.offsetLeft;
pos.top +=obj.offsetTop;
obj = obj.offsetParent;
} return pos;
}
alert(getPosition(oDiv).left); </script> </body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546七、长高：
element.style.width : 样式宽 = width
element.clientWidth : 可视区宽 = width + padding
element.offsetWidth: 占位宽 = width + padding + border
八、
node.appendChild(node)
node.insertBefore(newnode,existingnode)
node.removeChild(node)
node.replaceChild(newnode,oldnode) node为oldnode的父节点
这几个函数既能操作已有的节点，也能操作动态创建的节点（createElement（））
node.insertBefore(newnode,existingnode)当existingnode当null时在ie下会报错解决的方式就是：用if判断如果为null执行什么操作，否则执行什么操作。
简单的留言板：<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <input type="text" name="text" id="text" /> <input type="button" name="btn" id="btn" value="添加" /> <ul id="ul1"> </ul> <script type="text/javascript"> var text = document.getElementById('text'); var btn = document.getElementById('btn'); var oul = document.getElementById('ul1');
btn.onclick =function(){ var li = document.createElement('li');
li.innerHTML = text.value; var oa = document.createElement('a');
oa.innerHTML = '删除';
oa.href = 'javascript:;';
oa.onclick = function(){
oul.removeChild(this.parentNode);
}
li.appendChild(oa); if(!oul.children[0]){
oul.appendChild(li);
}else{
oul.insertBefore(li,oul.children[0]);
} if(oul.children.length>5){
oul.removeChild(oul.children[oul.children.length-1])
}
} </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comparaison et analyse des différences des versions Bluetooth 5.3 et 5.2
Dec 28, 2023 pm 06:08 PM
De nos jours, de nombreux téléphones mobiles prétendent prendre en charge la version Bluetooth 5.3, alors quelle est la différence entre Bluetooth 5.3 et 5.2. En fait, il s'agit essentiellement de versions mises à jour ultérieures de Bluetooth 5, et il n'y a pas beaucoup de différence dans la plupart des performances et des fonctions. La différence entre Bluetooth 5.3 et 5.2 : 1. Les débits de données 1 et 5.3 peuvent prendre en charge des débits de données plus élevés jusqu'à 2 Mbps. 2. Alors que le 5.2 ne peut atteindre qu'un maximum de 1 Mbps, cela signifie que le 5.3 peut transmettre des données plus rapidement et de manière plus stable. 2. Amélioration du contrôle de cryptage 2. Bluetooth 5.3 améliore les options de contrôle de la longueur des clés de cryptage, améliore la sécurité et peut mieux se connecter au contrôle d'accès et à d'autres appareils. 3. En même temps, le contrôle administrateur étant plus simple, la connexion peut être plus pratique et plus rapide, ce qui n'est pas possible dans la version 5.2.
Solution au i7-7700 impossible de passer à Windows 11
Dec 26, 2023 pm 06:52 PM
Les performances du i77700 sont tout à fait suffisantes pour exécuter Win11, mais les utilisateurs constatent que leur i77700 ne peut pas être mis à niveau vers Win11. Cela est principalement dû aux restrictions imposées par Microsoft, ils peuvent donc l'installer tant qu'ils ignorent cette restriction. Le i77700 ne peut pas être mis à niveau vers win11 : 1. Parce que Microsoft limite la version du processeur. 2. Seules les versions Intel de huitième génération et supérieures peuvent directement passer à Win11. 3. En tant que 7ème génération, i77700 ne peut pas répondre aux besoins de mise à niveau de Win11. 4. Cependant, le i77700 est tout à fait capable d'utiliser Win11 en douceur en termes de performances. 5. Vous pouvez donc utiliser le système d'installation directe win11 de ce site. 6. Une fois le téléchargement terminé, cliquez avec le bouton droit sur le fichier et « chargez-le ». 7. Double-cliquez pour exécuter l'opération "Un clic
Compatibilité du navigateur
Sep 14, 2023 am 11:08 AM
Les méthodes permettant de définir la compatibilité du navigateur incluent la sélection des normes HTML et CSS appropriées, l'utilisation de préfixes et de réinitialisations CSS, l'utilisation de bibliothèques de préfixes de compatibilité de navigateur, la détection des fonctionnalités du navigateur, l'utilisation d'outils de compatibilité de navigateur et la réalisation de tests multi-navigateurs. Introduction détaillée : 1. Choisissez les normes HTML et CSS appropriées lors de l'écriture de codes HTML et CSS, vous devez essayer de suivre les normes du W3C. Différents navigateurs prendront en charge les normes différemment, mais les normes suivantes peuvent maximiser la compatibilité. , etc.
Que dois-je faire si Win11 ne peut pas utiliser le navigateur ie11 ? (win11 ne peut pas utiliser le navigateur IE)
Feb 10, 2024 am 10:30 AM
De plus en plus d'utilisateurs commencent à mettre à niveau le système Win11. Étant donné que chaque utilisateur a des habitudes d'utilisation différentes, de nombreux utilisateurs utilisent toujours le navigateur ie11. Alors, que dois-je faire si le système Win11 ne peut pas utiliser le navigateur ie ? Windows11 prend-il toujours en charge ie11 ? Jetons un coup d'œil à la solution. Solution au problème selon lequel Win11 ne peut pas utiliser le navigateur ie11 1. Tout d'abord, cliquez avec le bouton droit sur le menu Démarrer et sélectionnez « Invite de commandes (administrateur) » pour l'ouvrir. 2. Après ouverture, entrez directement « Netshwinsockreset » et appuyez sur Entrée pour confirmer. 3. Après confirmation, entrez « netshadvfirewallreset&rdqu ».
Dans quelle mesure le langage Go est-il compatible sur les systèmes Linux ?
Mar 22, 2024 am 10:36 AM
Le langage Go a une très bonne compatibilité sur les systèmes Linux. Il peut fonctionner de manière transparente sur diverses distributions Linux et prend en charge des processeurs de différentes architectures. Cet article présentera la compatibilité du langage Go sur les systèmes Linux et démontrera sa puissante applicabilité à travers des exemples de code spécifiques. 1. Installez l'environnement de langage Go L'installation de l'environnement de langage Go sur un système Linux est très simple. Il vous suffit de télécharger le package binaire Go correspondant et de définir les variables d'environnement appropriées. Voici les étapes pour installer le langage Go sur le système Ubuntu :
Puis-je utiliser des écouteurs Bluetooth en mode avion ?
Feb 19, 2024 pm 10:56 PM
Avec le développement continu de la technologie moderne, les casques Bluetooth sans fil sont devenus un élément indispensable de la vie quotidienne des gens. L'émergence des écouteurs sans fil libère nos mains, nous permettant de profiter plus librement de la musique, des appels et d'autres activités de divertissement. Or, lorsque nous prenons l’avion, on nous demande souvent de mettre notre téléphone en mode avion. La question est donc : puis-je utiliser des écouteurs Bluetooth en mode avion ? Dans cet article, nous explorerons cette question. Tout d’abord, comprenons ce que fait et signifie le mode avion. Le mode avion est un mode spécial pour les téléphones mobiles
Compatibilité WIN10 perdue, étapes pour la récupérer
Mar 27, 2024 am 11:36 AM
1. Cliquez avec le bouton droit sur le programme et constatez que l'onglet [Compatibilité] est introuvable dans la fenêtre des propriétés qui s'ouvre. 2. Sur le bureau Win10, cliquez avec le bouton droit sur le bouton Démarrer dans le coin inférieur gauche du bureau et sélectionnez l'élément de menu [Exécuter] dans le menu contextuel. 3. La fenêtre d'exécution Win10 s'ouvrira, entrez gpedit.msc dans la fenêtre, puis cliquez sur le bouton OK. 4. La fenêtre de l'éditeur de stratégie de groupe local s'ouvrira. Dans la fenêtre, cliquez sur l'élément de menu [Configuration ordinateur/Modèles d'administration/Composants Windows]. 5. Dans le menu des composants Windows ouvert, recherchez l'élément de menu [Compatibilité des applications], puis recherchez l'élément de paramètre [Supprimer la page de propriétés de compatibilité du programme] dans la fenêtre de droite. 6. Cliquez avec le bouton droit sur l'élément de paramètre et dans le menu contextuel
Explication détaillée des problèmes de compatibilité Win11 avec le logiciel Win10
Jan 05, 2024 am 11:18 AM
Le logiciel du système win10 a été parfaitement optimisé, mais pour les derniers utilisateurs de win11, tout le monde doit être curieux de savoir si ce système peut être pris en charge, voici donc une introduction détaillée au logiciel qui ne prend pas en charge win10 dans win11. Venez le trouver. sortir ensemble. Win11 prend-il en charge le logiciel Win10 : 1. Le logiciel système Win10 et même les applications système Win7 sont bien compatibles. 2. Selon les commentaires des experts qui utilisent le système Win11, il n'y a actuellement aucun problème d'incompatibilité des applications. 3. Vous pouvez donc effectuer une mise à niveau en toute confiance, mais il est conseillé aux utilisateurs ordinaires d'attendre la sortie de la version officielle de Win11 avant de procéder à la mise à niveau. 4. Win11 a non seulement une bonne compatibilité, mais aussi Windo
