JavaScript学习笔记之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：文档对象
		1、创建（获取）：在html dom模型中可以使用window对象来获取
			1、window.document
			2、document
		2、方法
			1、获取Element对象
				1、getElementById（）：根据id属性值获取元素对象。id属性值一般唯一。
				2、getElementByTagName（）：根据元素名称（比如div，p，h等）获取元素对象们。返回值是一个数组。
				3、getElementByClassName（）：根据class属性值获取元素对象们。返回值是一个数组。
				4、getElementByName（）：根据name属性值获取元素对象们。返回值是一个数组。
			2、创建其他DMO对象：
				createAttribute（name）
				createComment（）
				createElement（）
				createTextNode（）
		3、属性
	Element：元素对象
		1、获取/创建：通过document来获取和创建
		2、方法：
			1、removeAttribute（）：删除属性
			2、setAttribute（）：设置属性
			代码实例：
			<a>click me！</a>
			<input type="button" id="btn_set" value="设置属性">
			<!--a标签最开始没有设置属性，当点击按钮之后，给a标签设置属性，再点击a标签，就可以跳转页面-->
			<input type="button" id="btn_remove" value="删除属性">
			<script>
				//获取btn
				var btn_set = document.getElementById("btn_set");
				var btn_remove = document.getElementById("btn_remove");
				btn_set.onclick = function(){
					//1、获取a标签
					var element_a = document.getElementsByTagName("a")[0];
					element_a.setAttribute("href","https://www.csdn.net/");
				}
				btn_remove.onclick = function(){
				var element_a = document.getElementsByTagName("a")[0];
				element_a.removeAttribute("href");
				}

				</script>

	Node：节点对象，其他5个的父对象
		特点：
		方法：
			CRUD dom树：
				appendChiled（）：向节点的子节点列表的结尾添加新的子节点
				removeChiled（）：删除并返回当前节点的指定子节点
				replaceChiled（）：用新节点替换一个子节点
			！！！！！！
			超链接功能：
				1、可以被点击：样式
				2、点击后挑战到href指定的url
				需求：保留1功能，去掉2功能
				实现：href="javascript:void(0);"
		属性：
			parentNode :返回节点的父节点
			
	HTML DOM
		1、标签体的设置和获取：innerHTML
		2、使用html元素对象的属性
		3、控制元素样式
			1、使用元素的style属性来设置
			代码示例:
			<div id="div1">
				div
			</div>
			<script>
			var div1 = document.getElementById("div1");
			div1.onclick = function(){
			//修改样式方式一
			div1.style.border = "1px solid blue";
			div1.style.width = "200px";
			//font-size-->fontSize
			div1.style.fontSize="20px";
			}
			</script>
			2、提前定义好类选择器的样式，通过元素的className属性值，来设置器class属性值。
			如：
			<style>
			d1{
            border: 1px solid red;
            width: 100px;
            height: 200px;
			}
			</style>
			<script>
			var div2= document.getElementById("div2");
			div2.onclick = function () {
			div2.className = "d1";
			}
			</script>