JavaScript学习笔记05【高级——DOM对象】

• w3school 在线教程：https://www.w3school.com.cn

1. JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】【day01】
2. JavaScript学习笔记02【基础——对象（Function、Array、Date、Math、RegExp、Global）】【day01】
3. JavaScript学习笔记03【基础——对象（RegExp、Global）】【day01】
4. JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】【day02】
5. JavaScript学习笔记05【高级——DOM对象】【day02】
6. JavaScript学习笔记06【高级——JavaScript中的事件】【day02】

目录

09 DOM对象

DOM_概述

HTML DOM树

DOM、XML DOM、HTML DOM

DOM_Document对象_获取Element

XML DOM Document 对象

DOM_Document对象_创建DOM

DOM_Element对象

DOM_Node对象

XML DOM - Node 对象

案例4_动态表格_添加

案例4_动态表格_删除

HTML_DOM_innerHTML

案例4_动态表格——innerHTML简写版

HTML_DOM_样式控制

---

09 DOM对象

DOM_概述

* 概念： Document Object Model 文档对象模型
    * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

* W3C DOM 标准被分为 3 个不同的部分：

    * 核心 DOM - 针对任何结构化文档的标准模型
        * Document：文档对象
        * Element：元素对象
        * Attribute：属性对象
        * Text：文本对象
        * Comment：注释对象

        * Node：节点对象，其他5个的父对象
    * XML DOM - 针对 XML 文档的标准模型
    * HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型：
    * Document：文档对象
    * Element：元素对象
    * Node：节点对象，其他5个的父对象
* HTML DOM

HTML DOM树

DOM、XML DOM、HTML DOM

DOM_Document对象_获取Element

Document：文档对象
    1. 创建(获取)：在html dom模型中可以使用window对象来获取
        1. window.document
        2. document
    2. 方法：
        1. 获取Element对象：
            1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
            2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
            3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
            4. getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。
        2. 创建其他DOM对象
    3. 属性

XML DOM Document 对象

XML DOM、HTML DOM 是 “核心 DOM”的拓展。学习 核心DOM模型，需要查看XML DOM，因为 HTML DOM 对 “核心 DOM” 做的修改 较多。

DOM_Document对象_创建DOM

Document：文档对象
    1. 创建(获取)：在html dom模型中可以使用window对象来获取
        1. window.document
        2. document
    2. 方法：
        1. 获取Element对象：
            1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
            2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
            3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
            4. getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。
        2. 创建其他DOM对象：
            createAttribute(name)
            createComment()
            createElement()
            createTextNode()
    3. 属性

DOM_Element对象

* 核心DOM模型：
    * Element：元素对象
        1. 获取/创建：通过document来获取和创建
        2. 方法：
            1. removeAttribute()：删除属性
            2. setAttribute()：设置属性

  

	
		
		
	
	
		点我试一试
		
		
		
	

DOM_Node对象

* 核心DOM模型：
    * Node：节点对象，其他5个的父对象。
        * 特点：所有dom对象都可以被认为是一个节点。
        * 方法：
            * CRUD dom树：
                * appendChild()：向节点的子节点列表的结尾添加新的子节点。
                * removeChild()：删除（并返回）当前节点的指定子节点。
                * replaceChild()：用新节点替换一个子节点。
        * 属性：
            * parentNode：返回节点的父节点。

 

	
		
		
		
	
	
		

			
div2
			div1
		
		删除子节点
		添加子节点
		
		
	

XML DOM - Node 对象

案例4_动态表格_添加

分析：
    1.添加：
        1. 给添加按钮绑定单击事件
        2. 获取文本框的内容
        3. 创建td，设置td的文本为文本框的内容。
        4. 创建tr
        5. 将td添加到tr中
        6. 获取table，将tr添加到table中

  

	
	
	


	

		
		
		
		
	
	

		
学生信息表
		

			
编号
			
姓名
			
性别
			
操作
		
		

			
1
			
令狐冲
			
男
			
删除
		
		

			
2
			
任我行
			
男
			
删除
		
		

			
3
			
岳不群
			
?
			
删除
		
	
	

案例4_动态表格_删除

分析：
    1.添加：
        1. 给添加按钮绑定单击事件
        2. 获取文本框的内容
        3. 创建td，设置td的文本为文本框的内容。
        4. 创建tr
        5. 将td添加到tr中
        6. 获取table，将tr添加到table中
    2.删除：
        1.确定点击的是哪一个超链接
            删除
        2.怎么删除？
            removeChild()：通过父节点删除子节点

	
		
		
		
	
	
		

			
			
			
			
		
		

			
学生信息表
			

				
编号
				
姓名
				
性别
				
操作
			
			

				
1
				
令狐冲
				
男
				
删除
			
			

				
2
				
任我行
				
男
				
删除
			
			

				
3
				
岳不群
				
?
				
删除
			
		
		
	

HTML_DOM_innerHTML

案例4_动态表格——innerHTML简写版

* HTML DOM
    1. 标签体的设置和获取：innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式

	
		
		
		
	
	
		

			
			
			
			
		
		

			
学生信息表
			

				
编号
				
姓名
				
性别
				
操作
			
			

				
1
				
令狐冲
				
男
				
删除
			
			

				
2
				
任我行
				
男
				
删除
			
			

				
3
				
岳不群
				
?
				
删除
			
		
		
	

HTML_DOM_样式控制

* HTML DOM
    1. 标签体的设置和获取：innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式
        1. 使用元素的style属性来设置
            如：
                //修改样式方式1
                div1.style.border = "1px solid red";
                div1.style.width = "200px";
                //font-size--> fontSize
                div1.style.fontSize = "20px";
        2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

	
		
		
		
	
	
		

			div1
		
		

			div2
		
		
	

加油~