BOM对象
- Window
window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
在全局作用域中定义的任何对象都是window的属性
function fun() {
console.log('hello');
}
var num = 123;
console.log(window.num);
window.fun();
fun(); //与window效果一样
//三种框以及window
alert('hello'); //警示框
window.alert('world');//警示框
confirm('hello world'); //确定框
var ret = prompt('请输入内容:');//输出框
console.log(ret);
//打开一个网址,跳转过去
window.open('https://www.baidu.com','_self');
window.location = 'https://www.baidu.com';
function fun2() {
console.log('hello');
//关闭当前窗口(浏览器中的一个选项卡)
window.close();
}
setTimeout(fun2,3000);
- location
/*
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是window对象的属性,也是document对象的属性。
*/
//打开一个网址,跳转过去
location.href = "https://www.baidu.com";
replace:也相当于跳转
location.replace("https://www.baidu.com");
//重新加载页面
location.reload();//从本地缓存中加载
location.reload(true);//从服务器重新获取加载
//location对象其他属性也可改变URL:
location.hash; //url中以#号开头的字符串(锚点)
location.search;//url中以?开头的字符串(参数)
location.host;//服务器名称和端口号
location.hostname;//服务器名称
location.pathname;//返回URL中的目录和(或)文件名。
location.port;//返回URL中指定的端口号,如果没有,返回空字符串
location.protocol;//返回页面使用的协议
- history
//history对象
//原本是用来存储历史记录的,但出于隐私问题,就禁止了
//现在基本就是用来做网页的“前进和后退”功能
history.forward();//前进
history.back();//后退
history.go(n); //n>0表示前进n次,n<0表示后退n次
- screen
//screen对象
//用来获取电脑屏幕相关信息,比如分辨率
screen.width;screen.height;//分辨率
- navigation
//navigator对象
//存储浏览器的相关信息
navigator.userAgent;//用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容
DOM(Document Object Model)文档对象模型 DOM描绘了一个层次化的树形结构,允许开发人员添加、移除和修改页面的某一部分 树形结构中的节点称为DOM节点,这里的节点并不是指标签,它有很多类型,共12种。
- 每一个节点都有一个childNodes属性,其中保存着一个NodeList对象,它是一个类数组对象。在这个对象中保存这所有的子节点,通过length得到子节点的个数。NodeList对象是动态的,实时保持最新的数据.
//访问节点的子节点
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var childCount = someNode.childNodes.length;
- DOM元素节点的相关操作
查找节点的方法
//getElementById()
//getElementsByName()
//getElementsByTagName()
//getElementsByClassName()
//querySelector()
//querySelectorAll()
创建按钮
var btn = document.createElement('input');//创建一个按钮
btn.type = "button";
btn.value = "按钮";
document.body.appendChild(btn)
getElementById 按id查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello world</h1>
<div id="dd" class="class_dd" name="name_dd">
<p class="pp" id="p2">我是谁</p>
<p class="pp">从哪里来</p>
</div>
<div id="dd2">
<span class="pp">我是谁</span><br>
<img src="1.jpg" alt="">
</div>
</body>
<script type="text/javascript">
var p2 = document.getElementById('p2'); //查找HTML中id为p2的标签
// p2.innerText = '你是谁'; //将p2的内容改为‘你是谁’
</script>
</html>