BOM操作
一、什么是BOM
BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
二、BOM常用的对象
Screen对象:尺寸
window.screen;
screen.width
screen.height
screen.availHeight//可用高度 = 可用高度-底部任务栏高度
screen.availWidth//可用宽度
Location对象：地址
console.log(location)
location.href//完整的URL地址
location.protocol//协议名
location.hostname//主机名
location.port//端口名
location.host//主机名+端口名
location.pathname//文件路径
location.search//从？开始的部分
location.hash//从#开始的部分
History对象：历史
history.length;//用于记录当前页面跳转的历史记录的个数
history.forward();//点击去前一页，相当于浏览器的前进按钮
history.back();//点击去后一页，相当于浏览器的后退按钮
history.go():表示跳转到浏览器的任意界面
history.go(-1);//后一页，相当于history.forward()
history.go(0);//当前页，表示刷新当前页面
history.go(1);//前一页，相当于history.back()
Navigator对象：(了解)返回关于浏览器的各种系统信息。
Windows常用的方法
Window对象的常用方法：
1.window.alert()：弹窗输出
2.window.prompt():弹窗输入
3.window.confirm()：带确认、取消的提示框。分别返回true，false。
4.window.close()：关闭浏览器窗口。
5.window.open()：打开一个新窗口，参数1：地址；参数2：新窗口的名字；参数3：新窗口的各种配置属性；
6.window.setTimeout():延时器，表示延时多少ms后执行一个函数。参数1：函数名或者匿名函数；参数2：毫米；参数3：传给页面的参数
7.window.setInterval()：定时器，每隔多少毫秒执行一遍函数，其他用于与setTimeout完全相同。
8.clearInterval()、clearImmediate()：分别清楚定时器、延时器。声明定时器可以接受一个ID，传给clearInterval().
DOM操作
1.DOM节点数
1.DOM节点分为三类：元素节点（标签节点），属性节点，文本节点。
属性节点和文本节点都属于元素节点的子节点，因此操作时，需要先选中元素节点，再修改属性和文本。
2.查看元素节点
1、使用getElement系列方法。
window.onload = function(){
var lis = document.getElementById("first");
var lis1 = document.getElementsByClassName("cls");
var lis2 = document.getElementsByName("na");
var lis3 = document.getElementsByTagName("li");}
2、注意事项：
(1)ID不能重名，如果ID重复，只能取到第一个。
(2)获取元素节点时，必须等到DOM树加载完成后才能获取。
两种方式：①将JS写在文档之后。②如图，写在window.onload中。
(3)通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
(4)这一系列方法，也可以先选中DOM节点，从选择的DOM节点中在选择需要的节点。
3、通过querySelector()系列方法
(1)传入一个选择器名称，返回找到的第一个元素，通常用于查找ID
(2)传入一个选择器名称，找到所有元素，无论找到几个，都返回一个数组格式的元素。
document.querySelector("#first");
document.querySelectorAll("#div li");
3.设置属性节点
1.查看属性节点：getAttribute("属性名")
2.设置属性节点：setAttribute("属性名"，"属性值")
3.删除属性节点：removeAttribute("属性名");
4.注意事项：setAttribute()在老版本的IE中会出现兼容性问题,可以使用点符号(.)代替，设置属性。
【JS修改CSS的多种方式】
(1)使用setAttribute()设置class和style
(2)使用 .className 添加一个class选择器，修改style
(3)使用.style.样式 直接修改单个样式，注意样式名必须使用驼峰命名法。
(4)使用.style. 或 .style.cssText 直接修改样式。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
document.getElementById("first").getAttribute("style");//查看CSS
document.getElementById("first").style.fontSize = "20px";
document.getElementById("first").removeAttribute("style");//移除CSS
document.getElementById("first").style = "font-size: 20px";//IE不兼容
document.getElementById("first").style.cssText = "font-size: 20px";
4.查看设置文本节点
(1)innerHTML ： 取到或者设置一个节点中的HTML代码。
(2)innerText： 取到或者设置一个节点中的文本，不能设置HTML代码。
var s1 = document.getElementById("first").innerHTML;
document.getElementById("first").innerHTML = "<a>yiyiyi</a>";
var s2 = document.getElementById("first").innerText;
document.getElementById("first").innerText = "teset";
JS中的层次节点
1.基本节点
1.childNodes：获取当前节点的所有子节点（元素节点和文本节点）
2.children：获取当前节点的所有元素子节点（不包含文本节点）
3.parentNode：获取当前元素的父节点。
4.firstChild:获取第一个子节点，包括回车符等字符节点
5.lastChild：获取最后一个子节点
6.firstElementChild:获取第一个元素节点，不含回车符等字符节点。
7.lastElementChild:获取最后一个元素节点，不含回车符等字符节点。
8.previousSibling：获取当前节点的前一个兄弟节点，包括文本节点
9.previousElementSibling：获取当前节点的前一个元素兄弟节点，不包括文本节点。
10.nextSibling：取当前节点的后一个兄弟节点，包括文本节点
11.nextElementSibling：获取当前节点的后一个元素兄弟节点，不包括文本节点。
12.attributes：获取当前节点的属性节点，返回数组模式。
2.创建添加节点
1.document.createElement("标签名")：创建一个新节点。
需要配合setAttribute()为新节点设置属性。
var img = document.createElement("img");
img.setAttribute("src","../../01-HTML基本标签/img/Female.gif_temp.bmp");
2. ①父节点.insertBefore(新节点,目标节点)：在父节点中，将新节点插入到目标节点之前。
②父节点.appendChild(新节点)：在父节点的最后插入新节点。
③原节点.cloneNode(true)：克隆一个节点。
传入true表示克隆原节点及原节点的所有子节点
传入false表示只克隆原节点，不可隆其它子节点。
window.onload = function(){
var ul = document.getElementById("ul1");
//插入目标之前
document.getElementsByTagName("div")[0].insertBefore(img,ul);
//插入到最后
document.getElementsByTagName("div")[0].appendChild(img);
//克隆
var newUL = ul.cloneNode(true);
document.getElementsByTagName("div")[0].appendChild(newUL);
}
3.删除替换节点
①父节点.removeChiled(子节点)：从父节点中，删除指定子节点。
②父节点.replaceChild(新节点，老节点)：从父节点中，用新节点替换老节点。
document.getElementsByTagName("div")[0].removeChild(newUL);
document.getElementsByTagName("div")[0].replaceChild(img,ul);
JS对表格的操作：
HTML表格中的对象有三种：
1.表格对象：var table = document.getElementById("table");
2.行对象：table.rows[0]
3.单元格对象：table.rows[0].cells[0]
表格对象中的属性和方法
1.rows属性：返回当前表格的所有行，为数组格式。
2.insertRow(index)：在表格的index行插入一个新行，返回新产生的对象。
3.deleteRow(index)：删除表格的第index行。
行对象的属性和方法
1.cells属性：返回当前行中的所有单元格对象，为数组格式。
2.rowIndex属性：返回当前行在表格中的下标。
3.insertCell(index)属性：表示在行中的index位置，插入一个新单元格，返回新产生的单元格对象。
4.deleteCell(index)属性：表示删除本行中的第index个单元格。
单元格对象的属性和方法
1.cellIndex属性：返回当前单元格在本行中的下标
2.innerHTML/innerText/className/style.color等都可以使用。
原文地址：https://www.cnblogs.com/JiangLai/p/8969401.html