Maison > Article > interface Web > Application DOM JavaScript approfondie
Application DOM JavaScript approfondie
- php中世界最好的语言original
- 2018-03-13 13:29:341409parcourir
Cette fois, je vais vous présenter en profondeur l'application JavaScript DOM. Quelles sont les précautions pour utiliser JavaScriptApplication DOM. Voici des cas pratiques, jetons un coup d'oeil.
Qu'est-ce que DOM :
document, nœud ! En fait, c'est à peu près la même chose. En CSS, ça s'appelle une étiquette, en JS, ça s'appelle un élément, et en DOM, ça s'appelle un. nœud ; prise en charge du navigateur
nœud DOM
nodeType : type de nœud
nodeType = = 3 -> Nœud de texte
nodeType == 1 -> Nœud d'élément
childNodes et nodeType sont utilisés ensemble
pour obtenir le nœud enfant<head> <meta charset="UTF-8">
<title>01-DOM基础</title>
<script>
window.onload = function () { // ul的子节点为li
var oUl = document.getElementById('ul1'); for(var i=0;i<oUl.childNodes.length;i++){ //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
//故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//给所有的li设置背景颜色
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.background = 'red';
}
}
} </script></head><body><ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>children : Il ne comprend que des éléments, pas du texte, et est compatible avec tous les navigateursL'exemple ci-dessus peut donc être écrit comme ceci, simple et grossier !!!
for (var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'red';
}Exemple : Cliquez sur le lien , masquez l'intégralité du liparentNode Exemple :
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-parentNode</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>
<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> Exemple : Obtenez la position réelle de l'élément sur la page Principalement utilisé pour positionnement, obtenez le nœud parent réel de l'élément.
Exemple 1 : définissez le
sur le deuxième div2, et ne définissez rien sur le nœud parent div1 de div2, puis sur le offsetParent de div2 est le corps.
Exemple 2 : définissez le positionnement absolu pour le deuxième div2 et définissez le positionnement relatif pour le nœud parent de div2, div1, puis le offsetParent de div2 est div1.<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html> 2.Nœud DOM (2)<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px; position: relative;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>Les nœuds enfants de tête et de queue
ont des problèmes de compatibilité
firstChild、firstElementChild lastChild 、lastElementChild //IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';Exemples d'utilisationNœuds frères (utilisez les mêmes que ci-dessus)
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('ul1'); //IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//给第一个li设置红色背景:由于兼容问题,故需判断下
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
} else
{
oUl.firstChild.style.background='red';
}
};</script></head><body><ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li></ul></body></html>Il y a des problèmes de compatibilité
nextSibling, nextElementSibling
previousSibling, previousElementSibling
Manipuler l'élément. attributs
Élément
Manipulation d'attributs Première méthode : oDiv.style.display='block';Deuxième méthode : oDiv.style['display']='block' ;
Troisième méthode : méthode Dom : oDiv2.setAttribute ('display','none');
Attributs des éléments d'opération DOM
Set : setAttribute(name , valeur)
Supprimer : RemoveAttribute(name)
4. Utilisez className pour sélectionner des éléments
Comment utiliser className pour sélectionner des éléments
Sélectionner tous les éléments
Filtrer par conditions de nom de classe
Utilisation de base<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{ if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}; </script></head><body><ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li></ul></body></html>Utilisation avancée <script>
//封装成函数
function getByClass(oParent, sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点
for(var i=0;i<aEle.length;i++)
{ if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
} return aResult;
} window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='red';
}
}; </script>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul></body>Créer un élément DOM
createElement (nom de la balise) Créer un nœud appendChild (nœud) ajoute un nœud
Remarque : appendChild (nœud) a deux fonctions :
(1) Si ceci l'élément est créé via createElement (nom de la balise), alors il peut être ajouté directement au nouveau parent ;
(2) Si cet élément a un parent, alors 1. Supprimez d'abord l'élément du parent d'origine 2. Ensuite. ajoutez-le au nouveau parent.
Exemple : Insérez li dans ul
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1');
oBtn.onclick=function () { //创建节点
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value; //添加节点 父级.appendChild(子节点);
oUl.appendChild(oLi);
};
}; </script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>Lecture recommandée :
Application de base approfondie de JavaScript8 connaissances de base de JS auxquelles il faut prêter attention àCe 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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript