JS学习四(BOM DOM)

时间:2022-12-16 19:29:48

    BOM               


Screen对象

console.log(window.width);//屏幕宽度
console.log(window.height);//屏幕高度
console.log(window.availWidth);//屏幕可用宽度
console.log(window.availHeight);//屏幕可用宽度


★  location对象

取到浏览器的URL地址信息:
完整的URL路径:
协议名://主机名(IP地址):端口号/文件所在路径?传递参数(name1=value1&name2=value2)#锚点
例如:
http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top

console.log(location.href);    //返回当前完整路径
console.log(location.protocol);    //返回协议名
console.log(location.host);    //返回主机名+端口号
console.log(location.hostname);    //返回主机名
console.log(location.port);    //返回端口号
console.log(location.pathname);    //返回文件路径
console.log(location.port);    //返回端口号
console.log(location.search);    //返回开头的参数列表
console.log(location.hash);   //返回#开头的锚点

 使用JS跳转页面:
location = "http://www.baidu.com";

其他使用location提供的方法跳转页面的方式
location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");
location.reload("http://www.baidu.com");

function assign(){
//加载新的文档,加载以后,可以回退
location.assign("http://www.baidu.com");
}

function replace(){
//使用新文档替换当前文档,替换以后,不能回退
location.replace("http://www.baidu.com");
}

function reload(){
重新加载当前文档,刷新页面
reload():在本地刷新当前页面,相当于F5
reload():强制刷新,从服务器端重新加载页面,相当于ctrl+F5强制刷新页面
location.reload();
}

/*
history 浏览历史
1、
console.log(history);
console.log(history.length);   //表示浏览历史个数

function back(){
history.back();  后退按钮
}
function forward(){
history.forward();  前进按钮
}
function go(){
跳转到浏览历史的任意一个页面:
0表示当前页面,-1表示后一页(back),1表示前一页(forward)
}

navigator 了解即可
包含浏览器的各种系统信息。

console.log(navigator);

检测浏览器安装的各种插件。

console.log(navigator.plugins);

Window对象的常用方法
在window对象中的所有方法和属性,均可以省略window关键字。
window.alert(); 》弹窗
1.alert():弹出一个警告提示框;
2.prompt():弹出接受用户的输入;
3.confirm():弹出带有“确定”“取消”按钮的对话框,点击按钮返回
4.close():关闭当前浏览器窗口。在个别浏览器中,只能关闭再当前脚本新打开的页面
(使用超链接、window.open()等方式打开)
5.open():打开一个新窗口。
参数一:新窗口的地址;
参数二:新窗口的名字,并没什么用;
参数三:新窗口的各种属性设置,"属性=值1,属性2=值2,属性3=值3"
6.setTimeout: 设置延时执行,只会执行一次;
setInterval: 设置定时器,每隔n毫秒执行一次。
接受两个参数:需要执行的function、毫秒数。
7.clearTimeout:清除延时器
clearInterval:清楚定时器
使用方法:设置延时器或者定时器时。可以使用变量接受定时器ID;
var id =setInterval;
调用clearInterval时,将id传入,即可清除对应的定时器;
clearInterval(id);

    DOM               


【DOM树节点】
DOM树节点分为三大类:元素节点、属性节点、文本节点:
文本节点、属性节点属于元素节点的子节点,操作时,均需要先取到元素节点,在操作子节点。
可以使用getElement系列方法,取到元素节点。

【查看元素节点】

getElementById:通过Id取到唯一节点。如果Id重名,只能取第一个。
getElementsByName() :通过name属性
getElementsByTagName() :通过标签名
getElementsByClassName() :通过class名

获取元素节点时,一定要注意:获取节点的语句,必须在DOM渲染完成之后执行,可以有两种方式实现:
① 将js代码写在body之后;② 将js代码写在window.onload函数中。
后面三个getElements,取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作。
例如:getElementsByName("name1")[0].onclick=function


【查看/设置属性节点】
1.查看属性节点:getAttribute("属性名");
2.设置属性节点:setAttribute("属性名","新属性值");
查看和设置属性节点,必须先取到元素节点,才能使用。

eg:

var btn1=document.getElementById("btn1");
btn1.onclick=function(){
  alert(btn1);
}

var input1=document.getElementByname("input");