Javascript: cainiao talk about childNodes and parentNode

If you are a master, you are no stranger to childNodes and parentNode. In fact, they are two features/methods of DOM

If you are a master, you are no stranger to childNodes and parentNode. In fact, they are two features/methods of DOM.
ChildNodes: list of all child nodes of the object. The returned value can be regarded as an array with the length attribute;
ParentNode: indicates the parent node of the object.

After I have explained these two methods, someone may ask what they use. Hey hey, of course they are useful. Here is an example to illustrate their functions.
If we have a ul list, we all know that ul can only put the li label, but we can also put ul in the li label, then there must be li in this ul, but now I have a requirement that I want to add a style when moving the first level li mouse under the first ul. What should we do with this requirement? See the results and code:

   
 
 

  
        
  
  
 
   

              
    
aaa
         
    
aa
         
    
dd
         
    
dd
         
    
dd
      
   
      
  
  
das
      
  
  
dadf
      
  
  
dsaf
      
  
  
sdafu 
   

              
    
adfsaf
         
    
sdaf
         
    
sdaf
         
    
asdf
         
    
sfa
      
   
 
      
  
  
aa
   
 
 
 
  《script》
 

Of course, this code does not work well. I just want to explain that childNodes obtains the first level of li under ul with id abc. We move the cursor over li, when you place the border with the mouse, we can see that when we move the mouse to li under ul, there is no border. Next we can use another code string to view the effect:

   
 
 

  
        
  
  
 
   

              
    
aaa
         
    
aa
         
    
dd
         
    
dd
         
    
dd
      
   
      
  
  
das
      
  
  
dadf
      
  
  
dsaf
      
  
  
sdafu 
   

              
    
adfsaf
         
    
sdaf
         
    
sdaf
         
    
asdf
         
    
sfa
      
   
 
      
  
  
aa
   
 
 
 
  《script》
 

My writing is already quite complicated, because I am also a newbie and I am also a beginner. I just want to explain one thing.

We can see that a code block contains a child element with the ID of abc, while the second code block adds a border to the li element under the first level of li.

Let's take a look at their relationship, that is, the parentNode method. View the results:

   
 
 

  
        
  
  
 
   

              
    
aaa
         
    
aa
         
    
dd
         
    
dd
         
    
dd
      
   
      
  
  
das
      
  
  
dadf
      
  
  
dsaf
      
  
  
sdafu 
   

              
    
adfsaf
         
    
sdaf
         
    
sdaf
         
    
asdf
         
    
sfa
      
   
 
      
  
  
aa
   
 
 
 
  《script》
 

It is not difficult to see the relationship between them, ulListLi. childNodes [0] indicates that id is the first element under ccc. In fact, it can also be written as firstChild. Hey, I will talk about this method later.