＜javascript＞BOM和DOM

BOM-browser object model(浏览器对象模型)

	将整个浏览器抽象成若干个js对象，目的是为了通过js对象的方式操作浏览器
	所有的属性和方法都必须有前缀，如果前缀为window则可以省略
	三个弹出框
		alter-所有弹出框都具备阻塞行为
		prompt（[提示信息]，[默认值]）---返回字符串
		confirm（[提示信息]）---返回布尔值
	两个定时器
		setInterval（回调函数，时间间隔）---返回值为关闭定时器的钥匙
		clearInterval（钥匙）
		setTimeout（回调函数，时间间隔）---返回值为关闭定时器的钥匙
		clearTimeout（钥匙）
	onload
		延迟加载，整个页面全部执行完毕后，再去执行事件体代码
	location：地址对象
		href-对于地址的读写
	document
		write
				拥有HTML字符串解析（如果该字符串打印至页面的时候，可以被当做HTML元素，则该字符串以HTML元素的形式展现）
				document.write("heihei");
				document.write("<br>");
				document.write("haha");
			 document.write("<strong>" + 123123 + "</strong>")

				出现在事件体中，会覆盖原页面
				
		找HTML元素，转换成js对象
			
				找单个元素（返回一个元素）
					document.getElementById(“ID名”)---返回ID对应的元素
					document.querySelector（“选择器”）---返回ID，类，标签对应的单个元素
				找批量元素（返回数组）
					document.getElementByTagName（“标签名”）---批量返回标签名对应的HTML元素，存放在数组中
					document.getElementByClassName（“类名”）---批量返回类名对应的HTML元素，存放在数组中
					document.getElementByName（“name名”）---批量返回name名对应的HTML元素，存放在数组中
					document.querySelectorAll（“选择器“）---批量返回类或者标签对应的元素，存放在数组中

DOM-document object model(文档对象模型)

DOM节点的遍历

		已知任意DOM元素，可以根据节点遍历的属性，访问DOM树中的任意节点
		获取DOM节点和文本节点
				firstChild 返回节点的第一个子节点----最普遍的用法是访问该元素的文本节点
			    lastChild  返回节点的最后一个子节点
			    nextSibling 下一个节点
			    previousSibling 上一个节点
		节点遍历的属性
				父找子
				 	firstElementChild 返回节点的第一个子节点---最普遍的用法是访问该元素的文本节点
				    lastElementChild 返回节点的最后一个子节点
					childNodes-返回父元素的所有子节点(数组),包含dom节点和文本节点
					children-返回父元素的所有子节点(数组),只包含dom节点
				兄弟节点遍历
				    nextElementSibling 下一个节点
				    previousElementSibling 上一个节点
				子找父
					parentNode
				this-函数体内的一个内置对象，在与事件体连用时，代表用户触发该事件时的元素

节点类型的判断

		nodeType---判断该节点是元素还是文本节点
			1代表元素节点
			3代表文本节点

节点操作

		增
			创建
				document.createElement("标签名"):返回创建好的dom对象
			追加
				父节点.appendChild(子节点)
		删
			dom.remove()

事件体执行

在页面渲染完毕后，通过用户的操作才会被执行

各种文本框

		input-value
		标签-innerHTML---包含除了自身标签的所有内容---常用来通过字符串拼接来创建页面
		outerHTML---包含自身标签的所有内容
		 innerText ---只包含文本但不包含标签

DOM属性

		dom普通属性
			通过点运算符
				读-console.log(oBox.id);
				写-oBox.id = "heihei";
			通过getAttribute/setAttribute
				读-console.log(oBox.getAttribute("id"));
				写-oBox.setAttribute("id", "haha");
			添加自定义属性
				oBox.aaa = 666;
				console.log(oBox.aaa);
				类似于添加对象中的属性和属性值
		domstyle属性
			写
				dom对象.style.属性名 = 属性值
				oBox.style.fontSize = "8px";
				oBox.style.width = "800px";
			读
				非行内样式-getComputedStyle(dom对象, false)["属性名"];
				只有行内样式可以dom.style.属性名的方式读取数据,非行内样式不行
				console.log(getComputedStyle(oBox, false)["fontSize"]);
				console.log(getComputedStyle(oBox, false)["backgroundColor"]);
		domOffset属性
			offset相关属性的读必须用offset读
			读
				读出来的数据都是数字
				console.log(oBox.offsetWidth);
				console.log(oBox.offsetHeight);
				console.log(oBox.offsetLeft);
				console.log(oBox.offsetTop);
			写
				加px的字符串
				oBox.style.width = "600px";
				oBox.style.left = "50" + "px";