JS学习四（BOM DOM）

Posted 2020-10-04 Mr.TongYu、

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