1. 浏览器对象模型 BOM ,它是没有规范,各个浏览器厂商按照自己的想法进行扩展
// BOM对象的顶级对象是 window
// window.alert("")
// window.confirm("确认要删除吗?")
// window.prompt("请输入一个数")
// window.print() 调用打印功能
//关闭浏览
// window.close() 关闭浏览器
// setInterval(): 设置定时器
// clearInterval() : 移除定时器
// setTimeOut() : 设置延时器
// clearTimeOut(): 移除延时器
//open 打开一个新的窗口
/由于openPage是唯一的id,可以不用document.getElementById,
// window的组成 (document,history,location,frames,screen,navigator)
// docuemnt --> DOM 对象 (重点)
// 2.location
// 3.history 历史记录
window.location
//协议 https 443 (加密,需要证书 更加安全)
// http 80
//location的属性
console.log(location.protocol);
console.log(location.host); //主机名称+端口
console.log(location.hostname);//主机名称
console.log(location.port);//端口
console.log(location.pathname);//路径
console.log(location.search); // ?+参数
console.log(location.search.split("?")[1]); //手动得到 query
console.log(location.hash); //hash
console.log(location.href);//整个url路径
//location的方法 (大部分 跳转)
jump.onclick = function () {
// location="https://www.baidu.com"
// location.href="https://www.qq.com"
//跳转后,没有历史记录
// location.replace("https://www.sina.com")
// location.assign("http://www.douyu.com")
//刷新页面
// location.reload()
// location.reload(true)//强制刷新
// <meta http-equiv="refresh" content="3"/> /content 3秒刷新一次
// history 历史
//
// history.forward() 前进
// history.back() 后退
// history.go() -1 后退, 0 刷新 1 前进
// DOM 文档对象模型 w3c规范
// 用js操作div..元素,就操作dom对象
// div,span,a
// 1.dom对象的组成 有哪些? (dom 联想 木偶 )
// 一个dom对象包含 (元素节点 属性节点 文本节点)
//2.获取dom对象
//2.1一个dom对象
var oDiv = document.getElementById("box");
// console.log(oDiv);
//查看对象的详细信息
// console.dir(oDiv);
//2.2根据标签名称 获取多个dom对象 多->数组
var oDivs = document.getElementsByTagName("div")
console.log(oDivs);
// oDivs[0].innerHTML="abc123";
// oDivs[1].innerHTML="abc123";
for (var i = 0; i < oDivs.length; i++) {
oDivs[i].innerHTML = "abc123";
}
//2.3 根据 类名称获取页面上元素
var oBoxs = document.getElementsByClassName("box");
console.log(oBoxs);
//2.4 根据name属性 获取页面上的元素
var oBoxs = document.getElementsByName("myname")
console.log(oBoxs);
oBoxs[1].style.color = "green";
//3. 最新的选择器
// document.querySelector() 只会获取一个
var oDiv = document.querySelector("div");
oDiv.style.backgroundColor = "pink";
// document.querySelectorAll() 获取多个 数组
var oDivs = document.querySelectorAll("div");
console.log(oDivs);
//总结下
// document.getElementById() 获取页面上带有id的元素
// document.getElementsByTagName("") 获取带有指定标签名称的元素 数组
// document.getElementsByClassName("") 获取带有指定类名称的元素 数组
// document.getElementsByName() 获取带有指定name属性的的元素 数组
// document.querySelector() 只会获取一个
// document.querySelectorAll() 会获取多个
//有兼容问题 ()
//但是 不推荐这么用
