六、JS实现DOM操作

一、本课目标

• 了解DOM的分类和节点间的关系
• 熟练使用JS访问DOM节点

二、操作DOM

image.png

2.1节点和节点关系

image.png

2.2访问节点

• 使用getElement系列方法访问指定节点getElementById(),getElementsByname(),getElementsByTagName()

• 根据层次关系访问节点：
  1、主要关系是父子节点和兄弟节点（这个里面也存在空格，跟XML一样）

  
  
  

  image.png
  
  

  示例代码：

    
    
    



    

        京东快报更多 >
    
    

        
志玲姐姐：墨镜300减30
        
京东无锡馆正式启动
        
99元抢平板！品牌配件199-100
        
节能领跑京东先行
        
高洁丝实力撩货，领券五折
    

结果：显示的是5，但是可以看到section下面只有两个元素节点。
2、只拿出来元素节点

image.png

示例：

image.png

三、总结

image.png