js函数中的BOM和DOM

时间:2021-06-05 00:27:36

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);
}