Javascript-4（Dom和Bom）

Dom对象
	什么是Dom
	节点
		什么是节点
			节点属性
				nodeName（节点名称） 
					元素节点的 nodeName 是标签名称 
					文本节点的 nodeName 永远是 #text 
					注释节点的 nodeName 永远是 #comment
				nodeValue（节点值）
					文本节点，nodeValue 属性包含文本。
					元素节点nodeValue不可用
					注释节点nodeValue包括注释内容
				nodeType（节点类型）
					元素---1
					属性----2
					文本----3
					注释---8
					文档----9
		获取Dom元素
			document.getElementById()
				根据id名获取DOM元素,唯一 一个
			document.getElementsByTagName()
				根据标签名获取所有的列表
			document.getElementsByName()
				根据表单元素的name获取节点列表
			document.getElementsByClassName(新)     全文档查找
				根据标签中class名获取元素列表
			根据选择器选择元素
				document.querySelectorAll(新)  获取所有 标签名 的元素
				document.querySelector( 新)  根据 标签名 获取 第一个元素
		 NodeList 节点列表 具有forEach的遍历方法
		节点遍历
			childNodes：所有子节点,包含换行和元素,注释;NodeList
			children：获取所有子元素,只获取标签;HTMLCollection
			parentNode：获取已知节点的父节点
			parentElement ; 获取父元素
			firstElementChild : 获取第一个子元素
			firstChild : 获取第一个子节点
			lastElementChild：获取最后一个子元素
			lastChild：获取最后一个子节点
			nextElementSibling：下一个兄弟元素
			nextSibling：下一个兄弟节点
			previousElementSibling：上一个兄弟元素    //
			previousSibling：上一个兄弟节点//
		创建节点
			document.createElement("标签名") : 根据标签名创建元素
			document.createTextNode("") : 创建文本节点;一般用于节点内有其他元素
		插入节点
			appendChild(node) : 向childNodes末尾插入一个节点node  
			insertBefore(newElement,targetElement) : 向targetNode之前插入节点node
			createDocumentFragment();//文档碎片,为了让更多元素最后在加入到body中
		替换节点
			replaceChild(newNode,oldNode) : newNode替换节点oldNode
		删除节点
			removeChild(node) : 移除父节点的某个子节点  删除子元素
			remove()：移除当前节点  自己删自己
		复制节点
			cloneNode(boolean) : 复制一个节点
			 1.复制当前元素及当前元素的子元素 ,DOM元素  深复制  cloneNode(true)
			  2.仅复制当前元素及元素的属性,DOM元素  浅复制    cloneNode(false);
	Dom属性
		Dom常用属性
			document.body：body元素
			document.title：获取、设置文档的标题
			document.URL：获得完整的URL
			document.domain：获取域名
			 HTML 标签属性命名,不区分大小,所以全部用小写,单词与单词之间使用横杆连接,标签属性可以看为一个公开属性
		获取节点上的属性
			getAttribute(属性)：
				获取标签属性
    console.log(div0.getAttribute("main-data"));
		给节点创建一个新属性
			setAttribute(属性,值)：
				 设置标签属性     属性名   属性值
    div0.setAttribute("xietian",100);
		删除一个节点上的属性
			removeAttribute(name)     
				删除属性
    div0.removeAttribute("boolean");
	Dom对象的样式
		设置Dom对象的样式
			dom.style.styleName=""
		获取计算后的dom样式
			ie
				currentStyle
			非ie
				getComputedStyle
	Dom对象常见属性
		客户区大小
			document.documentElement.clientWidth
			document.documentElement.clientHeight
			document.body.clientWidth    clientWidth = width+左右padding    
			document.body.clientHeight   
		元素占有可见空间
			offsetWidth     元素自身的宽度   width+border+padding
			offsetHeight    元素自身的高度   height+border+padding
			clientWidth      获取元素的宽度  width+padding(不包含border）
			clientHeight     获取元素的高度  height+padding(不包含border)
		元素到边界的偏移
			offsetLeft     元素左边框距离父元素的距离（如果父级没有定位，就是相对于浏览器窗口。如果有定位，是对有定位的父级元素）
			offsetTop      元素上边框距离父元素的距离
		滚动属性
			scrollHeight, scrollWidth 
				      scrollHeight返回的是元素的实际内容的高度，值=子元素的height值+元素的padding-top+父元素padding-bottom。
			scrollTop, scrollLeft 
				      返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。这些属性也只在文档的  或  标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。
			console.log(document.documentElement.scrollTop);
		load和scroll事件
	案例
		按钮添加列表
		留言板
		预加载
		瀑布流
		根据数据创建购物车，数量变化引起总价变化
Bom对象
	什么是Bom对象
		Bom和Dom的区别
	window对象   
		open()
			window.open("要打开的网页", "网页名字", "height=400,width=400,top=10,left=10");
		close()
		innerHeight 
			浏览器窗口的内部高度(兼容所有浏览器)—包含滚动条
		outerWidth 
			可以获取浏览器窗口的整个宽
		innerWidth
			浏览器窗口的内部宽度(兼容所有浏览器)  窗口内部宽高,不含工具栏,地址栏等内容,包含滚动条
		outerHeight
			可以获取浏览器窗口的整个高  当前窗口宽高包含工具等.
		screenLeft 
		screenTop 
			 窗口当前的位置,只能获取,不能设置
		screenX 
		screenY 
	location对象
		href 
			location.href = "https://www.baidu.com/"; 跳转页面,有历史记录
		assign
			location.assign(“https://www.baidu.com/“) 跳转页面,有历史记录
		replace
			location.replace("https://www.baidu.com/"); 跳转页面,没有历史记录
		hash
			获取地址栏中#后面内容，如果没有，则返回空字符串。
		search
			获取地址栏中?后面的内容
		hostname 
			返回 web 主机的域名
		pathname 
			返回当前页面的路径和文件名
		port 
			返回 web 主机的端口 （80 或 443）
		protocol 
			返回所使用的 web 协议（http:// 或 https://）
		reload();
			重载页面,给PHP等服务端工程师使用
	history对象
		back
			向后退一页
		forward 
			向前进一页
		go
			空 0  刷新页面
			参数为-1：后退一页
			参数为1：前进一页
			参数为2：前进两页
		length
			属性返回历史列表中的网址数
	screen对象
		availHeight
			屏幕的高度像素减去系统部件高度之后的值   不带屏幕下面的系统部件
		availWidth
			屏幕的宽度像素减去系统部件宽度后的值
		height
			屏幕的高度像素
		width
			屏幕的宽度像素
	navigator对象
		userAgent
			返回由客户机发送服务器的 user-agent 头部的值
		appName
			返回浏览器的名称。
		appVersion
			返回浏览器的平台和版本信息。
		platform
			返回运行浏览器的操作系统平台。