// js组成：ECMAScript DOM BOM
/*
BOM----> Browser Object Model
浏览器对象模型，浏览器的操作内容都是在对象的方法操作
浏览器顶级对象 window
*/
// console.log(window);
// alert('弹弹弹');
// window.alert('弹走鱼尾纹');
// 在全局中定义的变量其实就是在window身上作为属性
// 全局中 this 指向 window
// console.log(this);
// 全局中的 top 指向window
// console.log(top);
// 全局中的name属性在window上有，属性值是字符串
// console.log(name);
// console.log(window.name);
// console.log(typeof window.name); // string
// 浏览器的尺寸
// innerWidth、innerHeight 获取浏览可视窗口的宽高(包含了滚动条)
// console.log(window.innerHeight);
// console.log(window.innerWidth);
</script>
</body>
</html>
/*
弹出层
1、 alert() 提示弹框 没有返回值
2、 confirm() 询问弹窗
当我们点确定的时候返回true
当我们点取消的时候返回false
3、 prompt() 提示输入弹窗
当点击取消的时候返回null
当输入并点击确定的返回输入的内容(如果啥也没写返回空字符串)
*/
// console.log(alert('123')); // undefined
// console.log(confirm('can you marry me?'));
// console.log(prompt('请输入你的身份证'));
// location 对象中就存储而来浏览器的地址信息
// console.log(location);
// 1. location.href
// location对象中href属性就是浏览器访问的完整地址
// 会将地址中的中文转码为url中的编码格式
// console.log(location.href);
// 也可以通过设置location.href属性来实现浏览器的跳转
// 会直接跳转到指定的url地址
// btn.onclick = function(){
// location.href = 'http://1000phone.com';
// }
// 2. location.reload() 重新加载页面
// 这个方法不要写在全局中
// location.reload()
// btn2.onclick = function(){
// location.reload()
// }
/*
http://localhost/2111/location.html#12345?name=zs&age=123
3. loaction中的其他属性
hash 地址中#后面的东西 #12345?name=zs&age=123
host 是访问地址主机的地址 localhost
search 是浏览器中?后面的内容 ?name=zs&age=123
*/
/*
在对象history上记录了浏览器的历史记录
// 前提是要有历史记录,
// history对象中的lenght属性 如果为1表示没有历史记录
// 1. history.back() 回到历史记录的上一个页面
// 2. history.forward() 去到历史记录中的下一个页面
// 3. history.go(n) 去到历史记录中指定的页面
history.go(1) 相当于history.forward()
history.go(-1) 相当于history.back()
*/
// 在对象navigator中记录了浏览器的各种信息
// appName 获取到浏览器的名字 html5的兼容问题 不一定有效
// console.log(navigator.appName); // Netscape
// appversion 浏览器的版本 不一定有效
// console.log(navigator.appVersion);
// 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
// platform 浏览器运行的环境版本 不一定有效
// console.log(navigator.platform); // Win32
// userAgent 获取浏览器的版本信息
// console.log(navigator.userAgent);
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
// 浏览器事件
// 1. 浏览器的滚动事件 scroll 当滚动条动起来的时候触发的事件
// 浏览器页面的滚动距离，浏览器卷去的距离
// 通过scrollTop和scrollLeft获取垂直和水平卷去的距离
// 获取页面卷去的距离 会有兼容问题
// document.body.scrollTop 当页面没有使用DOCTYPE声明的时候可以获取到
// document.documentElement.scrollTop 当页面有使用DOCTYPE声明的时候可以获取到
// window.onscroll = function(){
// console.log(document.body.scrollTop);
// console.log(document.documentElement.scrollTop);
// console.log(document.body.scrollLeft);
// console.log(document.documentElement.scrollLeft);
// }
// 2. 浏览器的页面加载事件 load
// 当浏览器页面中的内容(页面结构,文本，图片,css,js等资源)全部加载完毕后会触发的事件
// window.onload = function(){
// btn.onclick = function(){
// alert('你真棒');
// }
// }
// btn.onclick = function(){
// alert('你真棒');
// }
// 3. 浏览器的页面可视窗口变化事件 resize
// 当浏览器窗口大小变化的时候会触发
// window.onresize = function(){
// // console.log(window.innerWidth);
// // console.log(window.innerHeight);
// }
// 定时器分两种：
// 定时器都有一个返回值：返回定时器的标识id(就是数字标识)
// 1. 间隔定时器 setInterval()
// 2. 倒计时定时器(爆炸定时器) setTimeout()
// 1. 间隔定时器
// 语法： setInterval(函数,时间); 时间单位是毫秒
// 每隔一段时间就运行一次函数
// 返回定时器标识id
// var timerId = setInterval(function(){
// alert('我又来啦');
// },5000);
// console.log(timerId);
// 2. 倒计时定时器
// 语法： setTimeout(函数,时间) 时间单位是毫秒
// 过一段时间会执行函数
// 返回定时器标识id
// var timerId = setTimeout(function(){
// console.log('爆炸');
// },3000);
// console.log(timerId);
// 清除定时器
// clearInterval(),clearTimeout()
// 语法：clearInterval(定时器标识) 关闭对应的定时器
// 语法：clearTimeout(定时器标识) 关闭对应的定时器
// var timerId = setTimeout(function(){
// console.log('时间到了');
// },5000);
// var timerId2 = setInterval(function(){
// console.log('等会我还来');
// },2000)
// btn.onclick =function(){
// // clearTimeout(timerId);
// // clearTimeout(timerId2)
// clearInterval(timerId);
// clearInterval(timerId2);
// }
// 输出顺序
// code start
// code end
// 我是定时器
/*
定时的执行是异步代码执行：
同步执行： 代码按顺序执行
异步执行： 代码不按顺序执行，先执行同步代码，当所有同步代码执行完毕，才开始执行异步代码
*/
/*
DOM ---> Document Object Model
文档 对象 模型
文档对象模型: 操作页面中的节点
doucument 是DOM中的顶级对象 其上一级是window对象
// 获取页面中的特殊标签
// document.body 页面中body标签
// 获取 页面中的 head 标签
// document.head
// 获取页面中的title,也可设置页面的title
// document.title
*/
// console.log(window);
// console.log(document.body);
// console.log(document.head);
// console.log(document.title);
// document.title = 'DOM';
// 要操作页面的中标签元素，我们要先获取到标签元素
// 获取DOM中的标签元素的方法
// 1. 通过id获取
// 语法： document.getElementById(标签的id值)
// 返回对应的标签元素
// 如果没有这个标签，则返回null
// var li1 = document.getElementById('one');
// console.log(li1); // 获取到标签元素
// var li66 = document.getElementById('one6');
// console.log(li66); // null
// 2. 通过类名获取 class的值
// 语法： document.getElementsByClassName(类名)
// 返回对对应类名的标签组成 伪数组
// 如果没有对应的类名 则返回空的伪数组
// var lis = document.getElementsByClassName('cls');
// console.log(lis);
// var lis66 = document.getElementsByClassName('cls66');
// console.log(lis66);
// 3. 通过标签名获取元素
// 语法： document.getElementsByTagName(标签名)
// 返回一个伪数组，里面是匹配的标签
// 如果没有匹配到 则返回空的伪数组
// var lis2 = document.getElementsByTagName('li');
// console.log(lis2);
// var uls = document.getElementsByTagName('ul');
// console.log(uls);
// 4. 通过选择器获取元素 querySelector()
// 语法: document.querySelector(选择器)
// 选择器的写法和css中一样一样的
// 返回选择器匹配的第一个元素
// 如果选择器匹配不到元素 null
// console.log(document.querySelector('#one'));
// console.log(document.querySelector('li'));
// console.log(document.querySelector('#id'));
// 5. 通过选择器获取元素 querySelectorAll()
// 语法：document.querySelectorAll(选择器)
// 选择器的写法和css中一样一样的
// 返回选择器匹配的所有元素的一个伪数组
// 如果选择器选择不到，则返回空的伪数组
// console.log(document.querySelectorAll('#one'));
// console.log(document.querySelectorAll('li'));
// console.log(document.querySelectorAll('lilili'));
// console.log(document.getElementById('one'));
// 不建议直接通过id属性值作为标签元素在js使用
// console.log(one);// 不建议使用
</script>
<script>
// var lis = document.getElementsByClassName('cls');
// console.log(lis);
// 伪数组 和数组一样都有索引下标和length属性表示长度
// 但是伪数组不能使用数组方法
// 报错
// lis.forEach(function(){ // lis.forEach is not a function
// console.log(666);
// })
// 操作DOM属性
/*
1. 操作标签的内容
innerText 获取设置标签的文本（不识别html标签）
innerHTML 获取设置标签的超文本(识别html标签)
// 设置都是覆盖性的设置
2. 操作标签属性
getAttribute(属性名) 获取标签的属性值
setAttribute(属性名,属性值) 设置标签的属性
removeAttribute(属性名) 移除标签的属性
3. 标签的css样式操作
style 获取到标签的所有行内样式
style.样式名 获取设置标签的行内样式值
5. 操作标签的类名
className 获取设置标签的类名
// 设置是覆盖性设置
*/
var div = document.getElementsByTagName('div')[0];
// console.log(div.innerText); //are you ok? // 获取文本内容
// div.innerText = 'thank you'; // 设置文本内容
// div.innerText = '<i>thank you</i>'; // 设置文本内容
// console.log(div.innerHTML); // <p>are you ok?</p>
// div.innerHTML += '<i>thank you</i>'; //使用+=拼接原来的内容
// 获取标签属性
// console.log(div.getAttribute('id')); // divId
// 设置标签属性
// div.setAttribute('index','666');
// div.setAttribute('id','good');
// 移除标签的属性
// div.removeAttribute('num');
// div.removeAttribute('id')
// 获取标签的行内样式
// console.log(div.style);
// console.log(div.style.color);
// div.style.color = 'yellow';
// css中的样式名，如果是多个单词组成的，在js要使用小驼峰写法
// div.style.fontSize = '50px';
// 获取设置标签的类名
// console.log(div.className);
// div.className = 'green';
// div.className += ' green';
