标签：总结 克隆 法则 主机名 before 浏览器 一点 输入 one
上周介绍了JS中两个比较重要的东西，循环和函数，这周再给大家介绍一下BOM和DOM
一、BOM
1、首先来说一下什么是BOM，BOM即浏览器对象模型，说白一点就是与浏览器进行的交互的对象模型。
2、BOM中的对象：
（1）、screen对象：可以获取到屏幕的宽度、高度、可用宽度和可用高度
（2）、location对象：取到浏览器的URL地址信息
>>>完整的URL路径:协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
>>>console.log(location.href);//返回当前完整路径
console.log(location.protocol);//返回协议名
console.log(location.host);//返回主机名+端口号
console.log(location.port);//返回端口号
console.log(location.pathname);//文件路径
console.log(location.search);//返回？开头的参数列表
console.log(location.hash);//返回#开头的锚点
（3）、使用location提供的方法跳转页面方式
>>>location.assign("http://www.baidu.com") //加载新的文档，加载以后可以回退
>>>location.replace("http://www.baidu.com") //使用新文档替换当前文档，替换以后不能回退
>>>location.reload() //重新加载当前文档，刷新页面 ，其中可以接收参数，当不接受参数时表示在本地刷新当前页面，相当于F5；而当接收一个true参数时表示：强制刷新，从服务器端重新加载页面，相当于Ctrl+F5
（4）、history 浏览历史
>>>history.length; //浏览历史列表的个数
>>>history.back(); //后退按钮
>>>history.forward(); //前进按钮
>>>history.go(1); 跳转到浏览历史的任意一个页面,0表示当前页面，-1表示后一个页面(back)，1表示前一个页面(forward)
3、window对象的常用方法
注意：在window对象中的所有方法和属性，均可以省略window关键字。例如：window.alert()==alert()
（1）、alert();弹出一个警告提示框
（2）、prompt();弹窗接受用户的输入
（3）、confirm();弹出带有“确定”“取消”按钮的对话框，点击按钮返回true/false
（4）、close();关闭当前浏览器窗口，在个别浏览器中只能关闭在当前脚本新打开的页面（使用超链接、window.open()等方式打开的页面）
（5）、open();打开一个新窗口。
>>>参数一：新窗口的地址
>>>参数二：新窗口的名字
>>>参数三：新窗口的各种属性设置，"属性1=值1,属性2=值2,属性3=值3"
（6）、setTimeout：设置延时执行，只会执行一次，接受两个参数：需要执行的function、毫秒数
setInterval：设置定时器，每隔n毫秒执行一次，接受两个参数：需要执行的function、毫秒数
（7）、clearTimeout：清除延时器
clearInterval：清除定时器
上面的这些内容只是做一个了解，重点将是下面的DOM环节
二、DOM
【DOM树节点】
1、DOM分为三大类：元素节点、属性节点、文本节点。
2、文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点
3、可以使用getElement系列方法，取到元素节点。
【查看元素节点】
1、getElementById：通过id取到唯一节点。如果id重名，只能取到第一个
注意：获取元素节点时，获取节点的语句必需在DOM渲染完成之后执行，可以有两种方法实现
（1）、将JS代码写在body之后，（这个比较好）
（2）、将代码写在window.onload函数中
2、getElementsByName()通过name属性
3、getElementsByTagName() 通过标签名
4、getElementsByClassName() 通过class名
注意：getElements取到的是数组格式，不能直接添加各种属性，而应该取出数组的每一个单独操作。
>>>例如getElementsByName("name1")[0].onclick=function(){};
【查看设置属性节点】
1、查看属性节点：getAttribute("属性名")
2、设置属性节点：setAttribute("属性名"，"属性值")
注意：查看和设置属性节点 必须先取到元素节点，才能使用！
setAttribute()属性在ie浏览器中可能会存在兼容性问题。可能不支持这个函数设置style/onclick等样式属性和事件属性, 所以我们采用点符号法替代上述函数： eg. dom1.style.color = "" dom1.onclick= "" dom1.src = ""
【总结--JS修改DOM节点的样式】
1、使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡使用，例如：div.setAttribute("class","cls1");
2、使用.className直接设置class类，注意是className！例如：div.className = "cls1";
3、使用.style设置单个属性，注意属性名要用驼峰法则：例如：div.style.backgroundColor = "";
4、使用.style 或.style.cssText 设置多个样式属性：例如：div.style = "background-color:red;color:yellow;"
div.style.cssText = "background-color:red;color:yellow;"
【查看设置文本特点】
.innerText：取到或设置节点里面的文字内容；
.innerHTML：取到或设置节点里面的HTML代码；
.tagName：取到当前节点的标签名。标签名全部大写显示。
【根据层次获取节点】
1、.childNodes： 获取元素的所有子节点。包括回车等文本节点。
.children: 获取当前元素的所有元素节点(只获取标签)。
2、.firstChild: 获取元素的第一个子节点。包括回车等文本节点。
.firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
.lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
.lastElementChild:获取元素的最后一个子节点。不包括回车等文本节点。
3、.parentNode: 获取当前节点的父节点。
4、.previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
5、.nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
.nextElementSibling: 获取当前节点的后一个兄弟节点；不包括回车等文本节点。
6、.getAttributes: 获取当前节点的属性节点。
【创建并新增节点】
1、document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；
2、父节点.appendChild(新节点)：末尾追加方式插入节点
3、父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.
4、被克隆节点.cloneNode(true/false)：克隆节点
>>>传入true： 表示克隆当前节点，以及当前节点的所有字节点；
>>>传入false或不传： 表示只克隆当前节点，而不克隆子节点。
【删除或替换节点】
1、父节点.removeChild(被删节点): 删除父节点中的子节点；
2、父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点。
【表格对象】
1、rows属性：返回表格中的所有行数，是一个数组格式
2、insertRow(index)：在指定位置插入一行，index从0开始
3、deleteRow(index):删除指定一行，index从0开始
【行对象】
1、cells属性：返回这一行中的所有单元格，是一个数组格式
2、rowIndex属性：返回这一行是表格中的第几行。从0开始
3、insertCell(index)：在这一行指定位置插入一个单元格。(index)从0开始
4、deleteCell(index)：删除这一行的额制定单元格；(index)从0开始
【单元格对象】
cellIIndex属性：返回这个单元格是本行的第几个，从0开始
标签：总结 克隆 法则 主机名 before 浏览器 一点 输入 one
原文地址：http://www.cnblogs.com/interesting-me/p/7500840.html
