Javascript操作BOM的API及小技巧相关笔记（一）
1.DOM操作表格，很少见到使用的场景，但不代表没有一点用处。
◆创建表格：var table=document.createElement("table");
◆在表格中插入行:var tr=table.insertRow(0);表示在表格的第一行之前插入一行，table.insertRow(1);表示在表格的第二行之前插入一行，如果你table.insertRow(5);然后你前面的一行不存在，那么就会无法插入而报错，因为没有第六行，所以无法进行操作，索引值0和-1是例外的，成功插入单元行之后就会返回你插入的这个单元行的元素对象。
◆在表格中的行中插入单元格：var td=tr.insertCell(0);表示在单元行的第一列之前插入一个单元格，与在表格中插入单元行的原理类似，都会返回成功插入的单元行，也会因为前面没有单元格但还强行插入时就会报错，索引值0和-1是例外的。
◆在表格中删除行：table.deleteRow(2);表示删除索引值为2的那一行，索引对应的单元行不存在的话，就会报错。
◆在单元行中删除单元格：tr.deleteCell(2);表示删除当前单元行的单元格索引为2的那一个单元格，索引对应的单元格不存在的话就会报错。
★遍历单元行中的单元格【
//遍历表格中的行与单元格
//外循环遍历行
for(var i=0;i<table.rows.length;i++){
//内循环遍历列
for(var j=0;j<table.rows[i].cells.length;j++){
console.log(table.rows[i].cells[j]);
}
}
◆创建表格：var table=document.createElement("table");
◆在表格中插入行:var tr=table.insertRow(0);表示在表格的第一行之前插入一行，table.insertRow(1);表示在表格的第二行之前插入一行，如果你table.insertRow(5);然后你前面的一行不存在，那么就会无法插入而报错，因为没有第六行，所以无法进行操作，索引值0和-1是例外的，成功插入单元行之后就会返回你插入的这个单元行的元素对象。
◆在表格中的行中插入单元格：var td=tr.insertCell(0);表示在单元行的第一列之前插入一个单元格，与在表格中插入单元行的原理类似，都会返回成功插入的单元行，也会因为前面没有单元格但还强行插入时就会报错，索引值0和-1是例外的。
◆在表格中删除行：table.deleteRow(2);表示删除索引值为2的那一行，索引对应的单元行不存在的话，就会报错。
◆在单元行中删除单元格：tr.deleteCell(2);表示删除当前单元行的单元格索引为2的那一个单元格，索引对应的单元格不存在的话就会报错。
★遍历单元行中的单元格【
//遍历表格中的行与单元格
//外循环遍历行
for(var i=0;i<table.rows.length;i++){
//内循环遍历列
for(var j=0;j<table.rows[i].cells.length;j++){
console.log(table.rows[i].cells[j]);
}
}
】
★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作表格</title>
</head>
<body>
<script>
var table = document.createElement("table");
//在行索引之前插入单元行 如果一行数据都没有 那么可以使用参数 0或者-1 这是在哪一行之前插入
var tr0 = table.insertRow(0);//返回你添加的这个元素对象
var tr1 = table.insertRow(1);
var tr2 = table.insertRow(2);
var tr3 = table.insertRow(3);
// table.insertRow(20); 不存在第二十个单元行，前面一个没有单元行所以无法插入 会报错
document.body.appendChild(table);
for(var i=0;i<table.rows.length;i++){
var td= tr0.insertCell(i);//添加单元格 并且返回单元格对象
td.innerHTML=i;
var td= tr1.insertCell(i);
td.innerHTML=i;
var td= tr2.insertCell(i);
td.innerHTML=i;
var td= tr3.insertCell(i);
td.innerHTML=i;
}
//不存在第二十个单元格，前面一个没有单元格所以无法插入，会报错
// tr0.insertCell(20);
//使用表格对象删除对应索引的行
table.deleteRow(2);
//使用单元行对象删除对应索引值的单元格
tr1.deleteCell(2);
//遍历表格中的行与单元格
//外循环遍历行
for(var i=0;i<table.rows.length;i++){
//内循环遍历列
for(var j=0;j<table.rows[i].cells.length;j++){
console.log(table.rows[i].cells[j]);
}
}
</script>
</body>
</html>2.window对象是javascript的bom中的顶级对象，其子对象有document文档对象、frames框架对象、history历史记录对象、location地址对象、navigator导航对象、screen屏幕对象
3.window.open(url,target,各种控制窗体的参数)，不常用，但是也有用,比如可以模拟a标签，让任何元素都拥有和超链接一样的页面跳转功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<a href="javascript:;">打开京东页面</a>
<a href="javascript:void(0);">关闭当前页面</a>
<script>
var a1=document.getElementsByTagName("a")[0];
var a2=document.getElementsByTagName("a")[1];
a1.onclick=function(){
window.open("https://www.jd.com","_self","id=2");
// 还能打开自己的页面
// window.open("2.模拟在线唯美祝愿墙.html","_black","id=2");
}
a2.onclick=function(){
window.close();
}
/**
* window.open(url,target,各种控制窗体的参数)，不
常用，但是也有用,比如可以模拟a标签，让任何元素都
拥有和超链接一样的页面跳转功能
【
win = window.open("01-
window.html","_black","width=200,height=200,top
=100,left=100");
window = object.open([URL ][, name ][, features ][,
replace]]]])
URL：新窗口的URL地址
name：新窗口的名称，可以为空
featurse：属性控制字符串，在此控制窗口的各种属性
，属性之间以逗号隔开。
fullscreen= { yes/no/1/0 } 是否全屏，默认no
channelmode= { yes/no/1/0 } 是否显示频道栏，默认
no
toolbar= { yes/no/1/0 } 是否显示工具条，默认no
location= { yes/no/1/0 } 是否显示地址栏，默认no
directories = { yes/no/1/0 } 是否显示转向按钮，默认
no
status= { yes/no/1/0 } 是否显示窗口状态条，默认no
menubar= { yes/no/1/0 } 是否显示菜单，默认no
scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
resizable= { yes/no/1/0 } 是否窗口可调整大小，默认
no
width=number 窗口宽度（像素单位）
height=number 窗口高度（像素单位）
top=number 窗口离屏幕顶部距离（像素单位）
left=number 窗口离屏幕左边距离（像素单位）
】
*/
</script>
</body>
</html>3.location对象也是地址对象，相当于浏览器的地址栏，location对象的属性可以将url解析成各个独立的片段
◆href属性，表示当前页面 url地址，也能够实现超链接的页面跳转，但是只能在当前页面跳转。
◆hash属性， 表示url中#后面的内容，包含#，也就是锚点中的内容
◆host属性，表示主机域名，即主机名，包括端口
◆ hostname，表示 主机名
◆pathname ，表示url中的路径部分，即文件的目录及文件名
◆port，表示 端口号
◆protocol，表示因特网服务类型，即 协议 一般是http、https
◆search，表示url?后面跟的参数，即查询的符串
■replace(url地址)，和href属性类似，能够实现超链接的页面跳转，但是只能在当前页面跳转，href改变的浏览器地址会记录到历史记录中去，而这个方法改变浏览器地址不会记录到历史记录中去。
■reload(true),也就是刷新，表示重新加载当前页面，加参数true表示始终加载服务器上的数据，不加true可能会加载浏览器缓存中的数据
■assign(url地址)，就是href属性底层使用的方法，和href属性类似，也能够实现超链接的页面跳转，也还是只能在当前页面跳转，但是和href属性一样，会将重新分配后的url地址记录到历史记录中去。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<button>改变当前页面地址</button>
<script>
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
// location.href="https://www.jd.com";//改变当前地址栏的url地址，当前页面跳转到京东首页
// location.replace("https://www.jd.com");//替换当前地址栏的url地址，当前页面跳转到京东首页
// location.assign("https://www.jd.com");浏览器地址重新分配，当前页面跳转到京东
}
console.log(window.location.href);// href url地址
console.log(window.location.hash);// hash 返回url中#后面的内容，包含#
console.log(window.location.host);// host 主机名，包括端口
console.log(window.location.hostname);// hostname 主机名
console.log(window.location.pathname);// pathname url中的路径部分
console.log(window.location.port);// port 端口号
console.log(window.location.protocol);// protocol 协议 一般是http、https
console.log(window.location.search);// search 查询字符串
</script>
</body>
</html>4.模拟超链接页面跳转的四种方式
◆window.open(url,target);可以完全实现和超链接一样的页面跳转功能，如window.open(https://www.jd.com,_black);重新打开一个窗体跳转到京东页面，如果把_black改成_self则会在当前页面跳转
◆location.href=url;重新设置当前地址栏的地址，可以模拟超链接的target属性为_self，只会在当前页面跳转，跳转的地址会被记录在历史记录中去。
◆location.replace(url);替换当前地址栏的地址，可以模拟超链接的target属性为_self，只会在当前页面跳转，跳转的地址不会被记录在历史记录中去。
◆location.assign(url);重新分配当前地址栏的地址，可以模拟超链接的可以模拟超链接的target属性为_self，只会在当前页面跳转，跳转的地址会被记录在历史记录中去，因为href属性内部调用的就是location.assign方法。
5.navigator领航或导航对象，可以获取当前客户端中信息，如navigator.userAgent可以获取当前浏览器支持的操作系统，如navigator.platform可以获取当前使用的浏览器的操作系统（不是很准）
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator对象</title>
</head>
<body>
<script>
console.log(window.navigator.userAgent);
console.log(window.navigator.platform);
</script>
</body>
</html>6.history历史记录对象，所有你访问的网站都会存在历史记录对象中，你可以通过回退或者前进来找到你上一次访问的网站或上一次的下一次访问的网站，可以通过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<script>
window.history.back();//后退
window.history.forward();//前进
window.history.go(-1);//后退一步
window.history.go(1);//前进一步
</script>
</body>
</html>来实现，使用go方法时可以前进或者后退多步。
7.使用窗体对象的moveTo(x,y)方法，可以实现窗体移动，如果你不断的弹出新窗体，然后再使用这个moveTo()方法，可以制造出类似满屏谈窗口的病毒出来，但是很多浏览器已经默认禁止弹窗了，所以无效，但是一些老浏览器还是可以，其实也可以使用其它方式来制作这个无限弹窗病毒，效果原理都是差不多的。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用moveTo制造弹出满屏窗口的病毒</title>
</head>
<body>
<script>
//很多浏览器已经默认禁止弹窗了，所以可能无效。
for(var i=0;i<10;i++){
var newWin=window.open("https://www.jd.com","_black",{width:"200px",height:"200px"});
newWin.moveTo(200+(i*10),300+(i*10));
}
</script>
</body>
</html>8.定时器的使用与技巧
◆定时器的两个种类，循环定时器setInterval，炸弹定时器setTimeout,循环定时器是死循环的执行,炸弹定时器是只会执行一次,定时器的第一个参数是循环执行的功能代码块儿，第二个参数是毫秒为单位的时间, 定时器使用的方式都一样的，都会返回当前定时器的对象，也可以通过clearInterval和clearTimeout来清除当前正在执行的定时器。
◆定时器对象其实是一个number类型的。
◆使用定时器的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script>
//循环定时器setInterval()死循环的执行 炸弹定时器setTimeout()只会执行一次
//定时器的第一个参数是循环执行的功能代码块儿，第二个参数是毫秒为单位的时间
// 定时器使用的方式都一样的 都会返回当前定时器的对象，
// 可以通过clearInterval和clearTimeout来清除当前正在执行的定时器
//第一种使用定时器的方式
var i1 = setInterval(function () {
console.log("匿名函数的方式");
//执行完一次之后清除当前定时器
clearInterval(i1);
}, 1000);
//第二种使用定时器的方式
function fn() {
console.log("普通函数的方式");
//执行完一次之后清除当前定时器
clearInterval(i2);
}
var i2 = setInterval(fn, 1000);
//第三种使用定时器的方式
function fn2() {
console.log("初始化函数对象:new Function();等同于内部内嵌了一个匿名函数");
//执行完一次之后清除当前定时器
clearInterval(i3);
}
var i3 = setInterval("fn2()", 1000);
</script>
</body>
</html>◆炸弹定时器模拟关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用炸弹定时器关闭广告</title>
<style type=text/css>
body {
height: 5000px;
}
img {
position: fixed;
top:50%;
margin-top:-220px;
}
.img1 {
left:10px;
}
.img2 {
right:10px;
}
div {
width: 800px;
margin:200px auto;
text-align: center;
font:700 30px/50px "simsun";
color:#f00;
}
</style>
</head>
<body>
<img class="img1" src="images/1.gif" alt="">
<img class="img2" src="images/2.gif" alt="">
<div>
我是三界至尊，我是五湖四海之王，与天同齐，与地同寿，我要见玉帝老儿，噗，被如来佛祖一掌劈死了!!!!<br>
我是三界至尊，我是五湖四海之王，与天同齐，与地同寿，我要见玉帝老儿，噗，被如来佛祖一掌劈死了!!!!<br>
我是三界至尊，我是五湖四海之王，与天同齐，与地同寿，我要见玉帝老儿，噗，被如来佛祖一掌劈死了!!!!<br>
我是三界至尊，我是五湖四海之王，与天同齐，与地同寿，我要见玉帝老儿，噗，被如来佛祖一掌劈死了!!!!<br>
我是三界至尊，我是五湖四海之王，与天同齐，与地同寿，我要见玉帝老儿，噗，被如来佛祖一掌劈死了!!!!<br>
</div>
<script>
//需求；左右两侧的广告要在五秒钟之内关闭
//思路：使用炸弹定时器 五秒钟之后 设置这两个广告的display属性为none 获取直接移除掉
//步骤：
//1.获取相关元素对象
//2.设置炸弹定时器
//3.清除广告
//1.获取相关元素对象
var img1=document.getElementsByClassName("img1")[0];
var img2=document.getElementsByClassName("img2")[0];
//2.设置炸弹定时器
setTimeout(function(){
//3.清除广告
//设置不可见
img1.style.display="none";
img2.style.display="none";
//直接移除
// img1.parentNode.removeChild(img1);
// img2.parentNode.removeChild(img2);
},5000);
</script>
</body>
</html>◆循环定时器模拟京东广告关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟京东广告关闭</title>
<style type=text/css>
.site-nav {
height: 30px;
background-color: #ccc;
}
.top-banner {
height: 100px;
background-color: #0f0;
}
.w {
width: 1210px;
height: 100px;
margin: 0 auto;
background-color: #f00;
position: relative;
}
.close {
position: absolute;
right: 10px;
top: 10px;
width: 25px;
height: 25px;
background-color: #000;
color: #fff;
font: 700 20px/25px "consolas";
text-align: center;
text-decoration: none;
}
.serach {
height: 100px;
width: 1210px;
margin: 0 auto;
background-color: #909;
}
</style>
</head>
<body>
<div class="site-nav"></div>
<div class="top-banner" style="opacity: 1;">
<div class="w">
<a href="javascript:;" class="close">x</a>
</div>
</div>
<div class="serach"></div>
<script>
//需求：当点击关闭按钮之后，慢慢改变广告的透明度，完全透明之后 就关闭广告
//思路：设置关闭按钮的单击事件，使用循环定时器改变广告的透明度，
// 然后等透明度下于等于0的时候，清除广告节点或者设置广告的display属性为none即可
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
var topbanner = document.getElementsByClassName("top-banner")[0];
var close = document.getElementsByClassName("close")[0];
//2.绑定事件
close.onclick = function () {
//3.书写事件驱动程序
var timer = setInterval(function () {
//注意 style是一个对象，它只能够获取到页面标签中的行内样式，
//是无法获取【内嵌】 或者【外链】 或者【不在行内】中的样式的属性值
//所以我们要在广告的行内样式上加一个 style="opacity:1;"
topbanner.style.opacity -= 0.1;//每次循环改变透明度
if (topbanner.style.opacity <= 0) {
topbanner.style.display = "none";//不显示广告
// topbanner.parentNode.removeChild(topbanner);
clearInterval(timer);//当透明度为0之后就清除循环定时器
}
}, 50);
}
</script>
</body>
</html>9.style属性其实是一个行内样式转换后的对象，它无法获取内嵌的样式表中的样式，也无法获取外链的样式表中的样式，更无法获取不在行内样式中的样式，所以，当你使用style对象操作样式属性时，一定注意，你页面标签是否有这个行内样式的属性，如果没有，你只能够给这个行内的样式属性赋值，并不能拿它参与运算的判断或者运算的赋值 += -= *= /=之类的运算。
