js函数中的BOM和DOM

BOM

浏览器对象模型

 screen对象

console.log(screen.width);// 屏幕宽度
console.log(screen.height);// 屏幕高度
console.log(screen.availWidth); //可用宽度
console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏


location对象
完整的URL路径：
 协议://主机名(IP地址):端口号/文件路径？传递参数(name1=value1&name2=value2)#锚点

console.log(location.href); // 完整路径
console.log(location.protocol); // 使用的协议 http: https: ftp: file: mailto:
console.log(location.pathname); // 文件路径
console.log(location.port); // 端口号
console.log(location.search); // 从?开始往后的部分
console.log(location.hostname); // 主机名(IP地址)
console.log(location.host); // 主机名+端口号
console.log(location.hash); // 从#开始的锚点
 使用JS设置页面跳转
window.location = "http://www.baidu.com";

function locationAssign(){

加载新的文档，加载以后，可以回退

location.assign("http://www.baidu.com");
}
function locationReplace(){

 使用新的文档，替换当前文档。替换以后，不能回退；

location.replace("http://www.baidu.com");
}
function locationReload(){

 重新加载当前页面。
 reload(true)：从服务器重新加载当前页面
 reload():在本地刷新当前页面

location.reload(true);
}


 history
 1、length：浏览历史列表的个数
 2、history.forward(); 前进到前一个页面
 3、history.back(); 后退到后一个页面
 4、history.go(-1); 跳转到浏览历史列表的任意位置
 位置标志： 当前页为第0个，前一个页面第1个，后一个页面-1个

Navigator 了解

console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台

 navigator.plugins。返回一个数组，检测浏览器安装的所有插件
>>>主要的属性：
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件的个数
name：插件名

console.log(navigator.plugins);//检查浏览器安装的插件信息

navigator.mimeTypes 浏览器插件，所支持的文件类型
>>>主要属性
description：MIME类型描述
enabledPlugin：支持此类型的浏览器插件
suffixes：此类型可能的后缀名
type：MIME类型的写法，例如： image/x-icon text/css

console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型



【重点】 window对象的常用方法
>>> window对象中的所有方法，均可以省略前面的window. ,比如close();

1、prompt：弹窗接收用户输入；
2、alert:弹窗警告；
3、confirm：带有确认/取消 按钮的提示框；
4、close:关闭当前浏览器选项卡
5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征

6、setTimeout：设置延时执行，只会执行一次；
 7、setInterval：设置定时器，循环每个N毫秒执行一次；
 两个参数：需要执行的function / 毫秒数
 8、clearTimeout：清除延时
 9、clearInterval：清除定时器
 传入参数：调用setInterval时返回一个ID，通过变量接受ID,传入clearInterval

DOM
【DOM树节点】
DOM节点分为三大类：元素节点、文本节点、属性节点、
文本节点属性节点，为元素节点的两个子节点。
通过getElement系列方法，可以去到元素节点。


【查看节点】
1、getElementById：通过ID获取唯一的节点;多个同名id只会取第一个；
2、getElementsByName：通过Name取到一个数组，包含1到多个节点；
使用方式：可以通过循环，取到每一个节点。循环次数：0开始，<[数组].length
【查看和设置属性节点】
1、查看属性节点：getAttribute("属性名")
2、设置属性节点：setAttribute("属性名","属性值")
【JS修改样式总结】
1、.classname：为元素设置一个新的class名字；
例如：div1.classname = "class1"
2、.style：为元素设置一个新的样式，注意驼峰法则
例如：div1.style.backgroundColor = "red"
3、.style.csstext:为元素同时修改多个样式
例如：div1.style.cssText = "width:100px;height:100px;";
【查看节点】
1、tagName属性：获取节点的标签名
2、innerHTML：设置或者获取节点内部的所有HTML代码
3、innerText:设置或者获取节点内部的所有文字；

方法带括号，属性用.拿过来 nodename:获得body元素节点的名称。
[获取层次节点的常用方法]
1、 .childNodes：(数组)获取元素的所有子节点（包含元素子节点/文本节点）
2、 .fistchild:获取元素的第一个子节点
3、.lastchild:获取元素的最后一个子节点
4、.ownerDocument:获取当前文档根节点，在html文档中，为document节点
5、.parentNode:获取当前节点的父节点；
6、 .previousSibling:获取当前节点的前一个兄弟节点
7、 .nextSibling:获取当前节点的后一个兄弟节点

注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应的Element
属性，例如：firstChild---->firstElementChild
8、 .attributes:获取当前元素节点的所有属性节点



window.onload = function(){
var ul1 = document.getElementById("ul1"); //拿到ul
var lis = ul1.getElementsByTagName("li");//获取ul里面的所有li
console.log(ul1.childNodes);//获取ul里所有的子节点（包含元素子节点/文本节点）
console.log(ul1.previousSibling);


}
【创建并新增节点】
1、.createElement("标签名")：创建一个新的节点。需要配合.setAttribute()方法设置
新的节点的相关属性
2、.appendChild(节点名)：在某元素后面追加一个新节点
3、.insertBefore(新节点名,目标节点名);将新节点，插入到目标节点之前
4、克隆节点：.cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象；
传递参数可以为true或false；
①true表示克隆当前节点以及所有子节点；
②false表示：只克隆当前节点，不克隆子节点（默认）

【删除/替换.rem节点】
 1、oveChild(需要删除的节点)：从父容器中，删除指定节点
 2、.replaceChild(新节点，替换节点)：用新节点替换指定节点。如果新节点为页面中已有节点
 会将此节点删除后，替换到指定节点。

[表格对象]
 1、rows属性：返回表格中的所有行，数组；
 2、insertRow（index）：在表格的第index行，插入一个新行
 3、deleteRow(index):删除表格的低index+1行

 【表格的行对象】
 1、cells属性：返回当前行中的所有单元格，数组；

2、rowIndex:返回当前行，在表格中的所有顺序，从0开始；

3、insertCell(index)：在表格的第index+1处插入一个<td>
 4、deleteCell(index)：删除当前行的第index+1个<td>

 【表格的单元格对象】
1、cellIndex属性：返回单元格在改行的索引顺序，从0开始；
 2、innerHTML属性：返回或设置当前单元格中的HTML代码；
 3、align属性:设置当前单元格的水平对齐方式；
 4、className属性：设置单元格的class名称

[JS中的事件分类]
 1、鼠标事件：
 click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
 2、键盘事件：
 keydown: 键盘按下去触发
 keypress: 键盘按下并松开的瞬间触发
 keyup: 键盘抬起时触发

 [注意事项：(了解)]
 ① 执行顺序： keydown——keypress——keyup
 ② 长按时，会循环不断的执行keydown-keypress
③ 有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
 ④ keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
 ⑤ keypress区分大小写，keydown和keyup不区分；
 ⑥ keydown/keyup区分主键盘和小键盘，keypres不区分；

 [确定键盘触发按键]
 ① 在触发函数中，传入参数e，代表按键时间；* ② 通过e.keyCode ，确认按键Ascii码值，进而确定按键；
 ③ 所有浏览器系统的写法(一般不必要)：
 var evn = e||event; //取到键盘事件
 var code = evn.keyCode||evn.which||evn.charCode;//取到按键编码

var isAlt = 0;
var isEnt = 0;
document.onkeydown = function(e){
var evn = e||event;
var code = evn.keyCode||evn.which||evn.charCode;

if(code==13){
isEnt = 1;
// alert("你按了回车");
}
if(code==18){
isAlt = 1;
}
// 判读Alt+Enter组合键
if(isAlt==1&&isEnt==1){
console.log("Alt+Enter");
}else if(isAlt==1&&isEnt==0){
console.log("Alt");
}else if(isAlt==0&&isEnt==1){
console.log("Enter");
}
}
document.onkeypress = function(e){
console.log(e);
}
document.onkeyup = function(e){
console.log(e);
if(e.keyCode==13){
isEnt = 0;
}

if(e.keyCode==18){
isAlt = 0;
}
}


 【JS中的DOM0事件模型】

 1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
 eg: <button onclick="func()">按钮</button>
 缺点：违反W3C关于Html与JavaScript分离的基本原则；

 2、脚本模型：在JS脚本中通过事件属性进行绑定；
 eg: window.onload = function(){}
 局限性：同一节点，只能绑定一个同类型事件；

 【JS中的DOM2事件模型】
 1、添加事件绑定：
 IE10之前：btn1.attachEvent("onclick",函数);
 其他浏览器：btn1.addEventListener("click",函数,true/false);
 参数三：false(默认)，表示事件冒泡，true，表示事件捕获
 兼容写法：if(btn1.attachEvent){
 btn1.attachEvent();
 }else{
 btn1.addEventListener();
}

 优点：同一节点，可以添加多个同类型事件的监听器；
 2、取消事件绑定：
 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
 .removeEventListener("click",函数名);
 .detachEvent("onclick",函数名);

window.onload = function(){
var btn1 = document.getElementById("btn1");

function func1(){
alert("1");
}

btn1.addEventListener("click",func1,false);

btn1.addEventListener("click",function(){
alert(2);
},false);

var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",func1);
},false);
}