BOM
js的组成部分：
1.ECMAScript，是js的核心语法，目前最新的标准是ES6（ECMAScript2015之后的版本）
2.BOM，是浏览器对象模型，提供了操作浏览器的api
3.DOM，是文档对象模型，提供了操作当前网页的api
BOM 是浏览器对象模型，就可以理解成是当前浏览器打开的窗口
window对象 就是 BOM
通过window对象 可以操作浏览器本身 它里面提供了一些操作当前浏览器的对象和方法
弹框方法
window.alert('消息框')
window.prompt('输入框')
window.confirm('确认框')*/
强制转换类型的方法
console.log(window.parseInt('123')); //强转为整数
console.log(window.parseFloat('123.123')); //强转为浮点数
console.log(window.isNaN('123')); //判断是不是不是数字
console.log(window.isNaN('123s'));
定时器方法
指定的毫秒后，执行的定时器，只执行一次
window.setTimeout(function(){
console.log('好好学习，天天向上');
},3000)
每隔指定的毫秒后，执行的定时器
window.setInterval(function(){
console.log('HelloWorld');
},2000)
示例1：setTimeout(()=>{
// open()方法打开新的窗口
window.open('http://baidu.com')
},5000)
示例2： setTimeout(()=>{
// close()方法，用于关闭当前窗口
window.close()
},10000)
window对象的location属性，提供了操作浏览器地址栏的属性和方法
console.log(window.location);
示例：setTimeout(()=>{
// 跳转到新的地址栏
window.location.href = 'http://baidu.com'
// 刷新当前窗口
window.location.reload()
},5000)
window对象的history属性，提供了操作浏览器历史记录的属性和方法
console.log(window.history);
示例：window.history.back() //回退到上一个历史记录
window.history.forward() //前进到下一个历史记录
window.history.go() //既可以后退也可以前进
练习：获取btn按钮对象
let btn = document.getElementById('btn')
btn.onclick = function(){
window.history.forward() //前进到下一个历史记录
window.history.go(1) //前进一次
window.history.go(3) //前进三次
window.history.go(-1) //后退一次
window.history.go(-3) //后退三次
}
DOM
window对象的document属性，提供了操作当前网页的属性和方法
浏览器最主要的作用是浏览网页，document对象用于操作当前浏览的网页
DOM 文档对象模型，就是当前网页里面的所有内容。
BOM 就是 window对象 DOM 就是 document对象
因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分
console.log(window.document);
示例：<div id="a">Hello1</div>
<div class="b">Hello2</div>
<div id="a">Hello3</div>
<p name="china">周杰伦</p>
<p name="japan">张三</p>
<p name="china">林俊杰</p>
<p name="japan">李四</p>
<ul>
<li>电视机</li>
<li class="b">洗衣机</li>
<li>电冰箱</li>
</ul>
（用下面几种方法对该文档进行操作，操作后结果放置在文档里面了）
getElementsByTagName()方法
通过标签的名称获取标签对象，返回的是一个类似数组的集合
let divs = document.getElementsByTagName("div")
console.log(divs);
通过下标获取指定的元素
console.log(divs[0]);
getElementById()方法
根据元素的id属性值来获取指定的元素。
注意：如果网页中id属性值重复，只获取第一个
let div1 = document.getElementById('a')
div1.innerText = '你好'
getElementsByName()方法
根据元素的name属性值获取所有该元素。
let chinas = document.getElementsByName('china')
for(let i=0;i<chinas.length;i++){
chinas[i].style.backgroundColor = 'pink'
}
getElementsByClassName()方法
根据元素的class类选择器名称获取所有该元素。
let bs = document.getElementsByClassName('b')
for(let i=0;i<bs.length;i++){
bs[i].style.color = 'red'
}
运行后的结果：
querySelectorAll()方法
根据选择器的名称返回所有的元素。
let divs = document.querySelectorAll('div')
console.log(divs);
注意：querySelectorAll()方法
返回的是集合对象，不是数组对象。可以利用展开运算符，将集合对象转为数组对象。
转为数组对象后，就可以使用数组相关的方法了。
let divs2 = [...divs]
console.log(divs2);
querySelector()方法
根据选择器的名称返回元素，如果有多个元素，只返回第一个元素。
let div = document.querySelector('div')
console.log(div);
练习：
根据id选择器获取标签元素
et a = document.querySelectorAll("#a")
console.log(a);
根据交集选择器获取标签元素
let b = document.querySelectorAll('li.b')
console.log(b);
根据后代选择器获取标签元素
let div_p = document.querySelectorAll("div p")
console.log(div_p);
根据属性选择器获取网页元素
let abc = document.querySelectorAll('div[abc]')
console.log(abc);
根据并集选择器获取网页元素
let all = document.querySelectorAll('div,p')
console.log(all);
总之：之前在css中，如何定义选择器，这里就可以根据该选择器获取对应的标签元素
示例：
HTML内容:
<div id="a" name="张三" age="20"></div>
<a id="b" href="http://baidu.com" target="_blank" title="百度一下，你就知道" abc='哈哈'>百度</a>
<div id="c">好好学习，天天向上</div>
<button id="size">添加大小</button>
<button id="color">添加颜色</button>
<button id="radius">添加边框</button>
<button id="bgcolor">添加背景</button>
<br>
<button id="size1">删除大小</button>
<button id="color1">删除颜色</button>
<button id="radius1">删除边框</button>
<button id="bgcolor1">删除背景</button>
CSS样式:
<style>
#c{
border: 1px solid #ccc;
padding: 10px;
}
.size{
font-size: 30px;
}
.color{
color: green;
}
.radius{
border-radius: 10px;
}
.bgcolor{
background-color: pink;
}
</style>
js-DOM代码：
// 获取#a元素
let a = document.querySelector('#a')
// innerText属性，用于获取 和 操作 DOM的文本内容。
// a.innerText = '好好学习，天天向上'
// a.innerText = '好好学习<button>天天向上</button>'
// innerHTML属性，用于获取 和 操作 DOM的HTML内容。
a.innerHTML = '好好学习<button>天天向上</button>'
console.log(a.innerHTML);
console.log(a.innerText);
// setAttribute()方法，设置元素的属性值，需要传两个参数（属性名和属性值）
// 没有该属性可以添加新的属性
a.setAttribute('name','李四')
a.setAttribute('age','30')
a.setAttribute('gender','男')
// getAttribute()方法，获取元素的属性值，只需要传一个参数（属性名）
let name = a.getAttribute('name')
let age = a.getAttribute('age')
console.log(name,age);
console.log('--------------------------');
// 如果获取的是网页的必备元素，并且该元素有且只有一个，可以使用下面的方法
document.title = '我是网页的标题'
// document.body.style.backgroundColor = 'pink'
console.log('--------------------------');
// 注意：如果设置的是元素的自身属性，可以直接设置
let b = document.querySelector('#b')
b.href = "http://taobao.com"
b.target = "_self"
b.title = "淘呀淘"
// 由于abc是自定义属性，所以只能通过setAttrib()方法设置
b.setAttribute('abc','呵呵')
console.log(b);
let c = document.querySelector('#c')
// 添加样式
document.querySelector("#size").onclick = function(){
c.classList.add('size')
}
document.querySelector("#color").onclick = function(){
c.classList.add('color')
}
document.querySelector("#radius").onclick = function(){
c.classList.add('radius')
}
document.querySelector("#bgcolor").onclick = function(){
c.classList.add('bgcolor')
}
// 删除样式
document.querySelector("#size1").onclick = function(){
c.classList.remove('size')
}
document.querySelector("#color1").onclick = function(){
c.classList.remove('color')
}
document.querySelector("#radius1").onclick = function(){
c.classList.remove('radius')
}
document.querySelector("#bgcolor1").onclick = function(){
c.classList.remove('bgcolor')
}
运行结果：
