Application DOM JavaScript approfondie-js tutoriel-php.cn

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

IE : 10 % Chrome : 60 % FF : 99 % Prise en charge

nœud DOM

childNodes : nœuds enfants

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(&#39;ul1&#39;);            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 = &#39;red&#39;;
                }
            }
        }    </script></head><body><ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>

Copier après la connexion

children : Il ne comprend que des éléments, pas du texte, et est compatible avec tous les navigateurs

L'exemple ci-dessus peut donc être écrit comme ceci, simple et grossier !!!

parentNode : Parent node

for (var i=0;i<oUl.children.length;i++){
     oUl.children[i].style.background = &#39;red&#39;;
}

Copier après la connexion

Exemple : Cliquez sur le lien , masquez l'intégralité du li

parentNode Exemple :

offsetParent

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>02-parentNode</title>
    <script>
        window.onload = function () {            var aA = document.getElementsByTagName(&#39;a&#39;);            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function () {                    this.parentNode.style.display = &#39;none&#39;;
                }
            }
        }    </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>

Copier après la connexion

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

positionnement absolu

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(&#39;div2&#39;);             alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>

Copier après la connexion

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(&#39;div2&#39;);             alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>

Copier après la connexion

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=&#39;red&#39;;    //高级浏览器    //oUl.firstElementChild.style.background=&#39;red&#39;;

Copier après la connexion

Exemples d'utilisation

Nœ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(&#39;ul1&#39;);    //IE6-8
    //oUl.firstChild.style.background=&#39;red&#39;;
    //高级浏览器
    //oUl.firstElementChild.style.background=&#39;red&#39;;
    //给第一个li设置红色背景:由于兼容问题,故需判断下
    if(oUl.firstElementChild)
    {
        oUl.firstElementChild.style.background=&#39;red&#39;;
    }    else
    {
        oUl.firstChild.style.background=&#39;red&#39;;
    }
};</script></head><body><ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li></ul></body></html>

Copier après la connexion

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

Get : getAttribute(name)

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

Encapsulé dans des fonctions

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload=function ()        {            var oUl=document.getElementById(&#39;ul1&#39;);            var aLi=oUl.getElementsByTagName(&#39;li&#39;);            for(var i=0;i<aLi.length;i++)
            {                if(aLi[i].className==&#39;box&#39;)
                {
                    aLi[i].style.background=&#39;red&#39;;
                }
            }
        };    </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>

Copier après la connexion

Utilisation avancée

Créer, insérer et supprimer des éléments

   <script>
         //封装成函数
        function getByClass(oParent, sClass)        {            var aResult=[];            var aEle=oParent.getElementsByTagName(&#39;*&#39;);//*通配符,获取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(&#39;ul1&#39;);            var aBox=getByClass(oUl, &#39;box&#39;);            for(var i=0;i<aBox.length;i++)
            {
                aBox[i].style.background=&#39;red&#39;;
            }
        };    </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>

Copier après la connexion

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload=function ()        {            var oBtn=document.getElementById(&#39;btn1&#39;);            var oUl=document.getElementById(&#39;ul1&#39;);            var oTxt=document.getElementById(&#39;txt1&#39;);
            oBtn.onclick=function ()            {                //创建节点
                var oLi=document.createElement(&#39;li&#39;);
                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>

Copier après la connexion

Lecture recommandée :

Application de base approfondie de JavaScript

8 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!