HTML---JavaScript操作DOM对象

目录

文章目录

本章目标

一.DOM对象概念

 二.节点访问方法

 常用方法：

 层次关系访问节点

 三.节点信息

 四.节点的操作方法

操作节点的属性

创建节点 

删除替换节点 

五.节点操作样式 

 style属性

 class-name属性

 六.获取元素位置

总结

---

本章目标

1. 了解DOM的分类和节点间的关系
2. 熟练使用JavaScript操作DOM节点

• 访问DOM节点 能够熟练的进行节点的创建、添加、删除、替换等
•  能够熟练的设置元素的样式
•  能够灵活运用JavaScript获取元素位置的属性来完成网页效果

---

一.DOM对象概念

       在JavaScript中，DOM是JavaScript操作网页内容和结构的接口。DOM对象是HTML文档中的各个元素和节点的表示。通过DOM对象，我们可以访问和操作网页中的元素、属性和事件。

     DOM对象层次结构类似于一颗树，根节点是document对象，代表整个HTML文档。各个节点通过父子关系连接起来，每个节点都有自身的属性和方法。

 二.节点访问方法

 常用方法：

 层次关系访问节点

 访问步骤方法1：

1. 通过document对象获取根元素节点。
2. 使用根元素节点的方法和属性来访问其直接子节点。
3. 遍历子节点列表，获取需要的节点。
4. 使用节点的方法和属性来进一步访问其子节点或父节点。
5. 重复步骤3和4，直到达到所需的节点。

 访问步骤方法2：可以使用以下方法和属性来访问节点的层次关系：

注：通过层次关系访问节点的前提是代码必须在一行，演示案例为方便演示未放一行。 

 基础演示案例

	
		
		
		
	
	
		

			

				
京东快报
更多>
				

				

					
京东无锡馆正式启动
					
99元抢平板！品牌配件199-100
					
节能领跑京东先行
					
高洁丝领券五折！
				
			
	
		
	
	

 

 层次关系演示案例

 三.节点信息

基础演示案例 

	
		
		
	
	
		
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

	
	

 四.节点的操作方法

操作节点的属性

index.setAttribute("属性名","属性值")：在节点index中添加一个属性并给添加的属性赋值

index.getAttribute("属性名")：获取index节点中的属性名所对应的值

 通过操作节点的属性从而实现点击对应的按钮显示对应的图片

 演示案例

	
		
		
		
	
	
		
选择你喜欢的书：
			我和狗狗一起活下来
			灰霾来了怎么办
		
		

			
		
		
	

点击”我和狗狗一起活下来节点“ 

点击节点”雾霾来了怎么办“

创建节点 

 演示案例

点击"我和狗狗一起活下来"会再次生成一个同样的图片

点击"灰霾来了怎么办"窗口会进行弹窗

	
		
		
		
	
	
		
选择你喜欢的书：
			我和狗狗一起活下来
			灰霾来了怎么办
		
		

		
	

删除替换节点 

 演示案例

 点击“删除我”“换换我”后

五.节点操作样式 

 avaScript中的节点操作样式可以用于改变HTML元素的外观和布局。通过修改节点的样式属性，可以改变元素的大小、颜色、字体以及位置等

 style属性

 演示案例

 当鼠标移动到“我的购物车”后显示购物车内容，鼠标离开后购物车内容消失

    
    
    



	 
	
    
我的购物车1
    

        
最新加入的商品
        

            

            
倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）
            
¥558.00×1
删除
        
        
共1件商品共计¥558.00 去购物车
    

鼠标移动到“我的购物车后” 

 class-name属性

 上述购物车案例也可通过下述class-name属性实现

class-name属性的本质是直接调用CSS中的样式。

 六.获取元素位置

---

总结