JS中的函数、BOM和DOM操作
写在前面：
之前在学习js的时候，这一块感觉掌握的很不好，而这一块在js中是比较重要的，所以借此系统的将这一部分进行整理，以备不时之需 。
一、函数
1.js中函数的声明与调用
1).声明：
function 函数名(参数一，参数二){
//函数体代码
return 返回值
}
2).调用
①直接调用：函数名(参数一，参数二); ②通过事件调用：再HTML标签中，通过事件属性进行调用
【函数声明与调用的注意事项】
①函数中有没有返回值，只取决于函数中有没有return，无需刻意声明
在js中，有返回值可以不接受；没有返回值，也可以接受 ，结果为undefined
②js中，函数的形参列表与实参列表，无任何关联
即 有参数可以不赋值（未赋值 undefined）；没有参数也可以赋值
函数的实际参数个数取决于实参列表
③js中，函数是变量的唯一作用域
那么，函数的形参属于函数的局部变量
④函数的声明与调用语句，没有先后之分。即，可以先调用语句，再声明函数
func()
function func(){}
【匿名函数的声明与使用】
1).匿名函数表达式：
var func =function(){};
调用：func();
注意：函数的调用语句，必须放在声明语句之后
2).直接将匿名函数赋值给一个事件
window.onload=function(){}//文档就绪函数，确保函数中的代码，在html文档加载完之后执行代码
document.getElementById("id").onclick=function(){}
3).自执行函数
① ！functon(){}();//开头用！表明这是自执行函数 建议
!function(){
alert("自执行函数1");
}();
② (function(){}());//用括号将匿名函数声明与调用包括在一起--->表明其整体性
(function(){
alert("自执行函数2");
})();
③ (function(){})();//用括号将匿名函数将声明语句进行包括
(function(){
alert("自执行函数3");
})();
js代码的执行
1.检查编译阶段
主要检查语法的错误，进行变量的声明、函数的声明等操作。
2.代码执行阶段
变量的赋值、函数的调用等执行语句，属于代码的执行阶段
var num=1;
function func(){}
var func2=function(){}
//检查编译阶段
var num;
function func(){}
var func2;
//代码执行阶段
num=1;
func();
func2();
func2=function(){}
【Arguments对象】
1.作用：用于保存所有函数的实参 >>>但函数存在实参时，可以使用数组下标访问函数的所有实参 >>>arguments[4]
2.arguments中元素的个数，取决于实参列表，与形参个数无关 3.一旦函数调用时，传入了实参，那么对应位置的形参，将于arguments对应的元素进行绑定 修改形参，arguments中对应的元素将被改掉。反之，也成立 但是，如果某一位置，没有传入实参，则该位置的形参和arguments将不再进行关联 4.arguments.callee(); 执行当前函数的引用，用于在函数中使用递归调用自身
二、BOM操作
screen 对象
width height availWidth//可用宽度 availHeight//可用高度=screen.height-底部任务栏高度 console.log(screen);//属性,属于windows对象，windows可省略 console.log(window.screen);
location对象
href：完整的url路径 protocal：协议ming hostname主机名 port：端口号 host：主机名+端口号 pathname：文件路径 search：从？开始的参数部分 hash：从#开始的锚点部分
function gotoBaidu(){
location.href="http://www.baidu.com";
}
//跳转页面。加载新页面以后，可以点击回退按钮返回
function gotoBaiduByAssign(){
location.assign("http://www.baidu.com");
}
//跳转界面，加载新页面以后没有回退按钮，无法返回
function gotoBaiduByReplace(){
location.replace("http://www.baidu.com");
}
//刷新当前页面 location.reload();刷新页面，如果本地有缓存，将从缓存中读取，相当于按F5 location.reload(true);//强制刷新，从服务器端重新获取数据 相当于按Ctrl+F5
history 对象
console.log(history.length);//用于记录当前页面跳转的历史页面的个数 history.forward();//上一页 history.back();//下一页 console.log(history.length);//用于记录当前页面跳转的历史页面的个数 history.forward();//上一页 history.back();//下一页
navigator 对象
console.log(navigator);
//检测浏览器中安装的所有插件
for(var i=0;i<navigator.plugins.length;i++){
console.log(navigator.plugins[i].name);
}
window 对象
1.prompt()弹窗输入
alert()弹框输出
2.confirm(""):带确定、取消的提示框。分别返回true、false
3.close();关闭浏览器窗口
4.open():打开一个新窗口
参数一：新窗口的地址
参数二：新窗口的名字，没啥用
参数三：新窗口的各种配置属性
window.open("http://www.baidu.com","baidu","width=600px,height=600px,top=100px");
5.setTimeOut():延时器
参数一：可以传入匿名函数，也可以传入函数名
参数二：延时的毫秒数
参数三~参数n：传给回掉函数的参数
setTimeout(function(num1,num2){},2000,"hahah",123);
6.setInterval():定时器。表示每隔多少毫秒执行一遍函数
其他用法与setTimeout完全相同
7.clearInterval()、clearTimeout():清除定时器、清除延时器
声明定时器时，可以接受返回的id，并将id传给clearInterval()即可清除
三、DOM操作
DOM树的节点
分三大类：元素节点（标签节点）、属性节点、文本节 属性节点和文本节点都属于元素节点的子节点。因此操作时，需先选中元素节点，再修改属性和文本
<ul> <li id="first"><b>第一项</b></li> <li class="cls" name="name">第二项</li> <li class="cls">第三项</li> <li name="name">第四项</li> </ul> <div id="div1"> <ul> <li>第一项</li> <li class="cls" name="name">第二项</li> <li class="cls">第三项</li> <li name="name">第四项</li> </ul> </div>
【查看元素节点】
1）使用getElement系列方法：
var li = document.getElementById("first");
var lis1 = document.getElementsByClassName("cls");
var lis2 = document.getElementsByName("name");
var lis3 = document.getElementsByTagName("li"注意事项
①id不能重名，id重复取第一个
②获取元素节点时，必须等到DOM树加载完成后才能获取
两种方式：a.js写在文档最后
b.代码写在window.onload函数中
③通过getElments系列取到的为数组格式，操作时必须取到每一个元素，才能进行操作，不能直接对数组进行操作
document.getElementByTagName("li").click=function(){} ×
document.getElementByTagName("li")[0].click=function(){} √
④这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点中，选择需要的节点：
document.getElementById("div1").getElementByTagName("li");
2）通过querySelector系列方法：
① 传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
var dq1 = document.querySelector("#id");
② 传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。
var dqs1 = document.querySelectorAll("#div1 li");
【查看/设置属性节点】
1、 查看属性节点：.getAttribute("属性名");
2、 设置属性节点：.setAttribute("属性名","属性值");
3、 注意事项：
.setAttribute() 在老版本IE中会存在兼容性问题，可以使用.符号代替。
document.getElementById("first").className = "haha";
【JS修改CSS的多种方式】
1、 使用setAttribute设置class和style document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
2、使用.className添加一个class选择器。
document.getElementById("first").className = "class1";
3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法 document.getElementById("first").style.fontSize = "18px";
4、使用.style 或 .style.cssText 添加一串行级样式：
document.getElementById("first").style = "color:red;"; // IE不兼容 document.getElementById("first").style.cssText = "color:red;"; // √
【查看/设置文本节点】
1、.innerHTML: 取到或设置一个节点中的HTML代码。 2、.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。
【层次节点操作】
1. .childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
children： 获取当前节点的所有元素子节点（不包含文本节点）。
2. .parentNode: 获取当前节点的父节点。
3. .firstChild： 获取第一个子节点，包括回车等文本节点；
.firstElementChild： 获取第一个元素节点。 不含文本节点。
.lastChild、.lastElementChild 获取最后一个，同理。
4. .previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
.previousElementSibling： 获取当前节点的前一个元素兄弟节点。
.nextSibling、.nextElementSibling： 同理。
5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
【创建并新增节点】
1. document.createElement("标签名")： 创建一个新节点，并将创建的新节点返回。
需要配合.setAttribute()为新节点设置属性。
2. 父节点.insertBefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前。
父节点.appendChild(新节点)： 在父节点的内部最后，插入一个新节点。
3. 源节点.cloneNode(true)： 克隆一个节点。
传入true表示克隆源节点以及源节点的所有子节点；
传入false或不传，表示只克隆当前节点，而不克隆子节点。
【删除、替换节点】
1. 父节点.removeChild(子节点)： 从父节点中，删除指定子节点。 2. 父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。
DOM对象
html表中的对象有三种：
1.表格对象 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 等
