JS的组成部分
// JS的组成部分：
// 1. ECMAScript，是JS的核心语法，目前最新的标准是ES6。所谓ES6，指的是ECMAScript2015之后的版本
// 2. BOM，是浏览器对象模型，提供了操作浏览器的api
// 3. DOM，是文档对象模型，提供了操作当前网页的api
// window对象就BOM，它提供了操作当前浏览器的方法
console.log(window);
/* // 1.各种弹框
// 消息框
window.alert('消息框')
// 输入框
window.prompt('请输入：')
// 确认框
window.confirm('确定吗？') */
// 2. 定时器
// setTimeout定时器，在指定的毫秒后执行一次
window.setTimeout(()=>{
// 3. open方法，用于打开新的窗口
// window.open('http://baidu.com')
},5000);
// setInterval定时器，每隔指定的毫秒后执行一次
window.setInterval(()=>{
console.log('好好学习，天天向上');
},1000)
window.setTimeout(()=>{
// 4. close方法，用于关闭当前窗口
// window.close()
},10000)
// 5.数据转换方法
let num1 = window.parseInt('100')
console.log(typeof num1);
let num2 = window.parseFloat('100.55')
console.log(typeof num2);
console.log(window.isNaN('100'));
console.log(window.isNaN('100s'));
// window对象还提供了一些属性
// 1.location属性里面保存的是地址栏相关的信息
console.log(window.location);
// 跳转到其他地址，其实超链接内部就是对location属性的封装
// setTimeout(() => {
// window.location.href = 'http://baidu.com'
// }, 5000);
// 2.history属性里面保存的是历史记录
console.log(window.history);
// 由于window对象是浏览器环境里面的默认对象就是window对象，所以，是window对象的成员时，可以省略window对象
DOM
<h2 name="red">北京</h2>
<h2 class="blue">南京</h2>
<div id="sh">上海</div>
<div id="sh">武汉</div>
<p name="red">长沙</p>
<p class="blue">合肥</p>
<script>
// DOM是网页的所有内容，网页是通过浏览器打开的，所以，DOM是BOM的一部分。
console.log(window); //window对象是整个BOM
console.log(window.document); //window对象的document属性就是DOM
// 使用DOM获取网页元素
// 1.如果该网页元素，在一个网页中只会出现一次，通过document可以直接获取
document.title = "好好学习DOM"
document.body.style.backgroundColor = "lightblue"
// 2.如果网页元素，在网页中会经常使用，就需用通过特定的方法来获取
// getElementsByTagName()方法，根据标签的名称获取所有该标签
let hs = document.getElementsByTagName('h2')
hs[0].innerText = '天津'
hs[1].innerText = '东京'
// getElementById()方法，根据标签的id属性名称，获取对应的标签
// 如果id属性值不唯一，只获取第一个
let sh = document.getElementById('sh')
sh.innerText = '铁岭'
// getElementsByName()方法，根据标签的name属性值，获取所有对应的标签
let red = document.getElementsByName('red')
for(let i=0;i<red.length;i++){
red[i].style.color="red"
}
// getElementsByClassName()方法，根据标签的class属性值，获取所有对应的标签
let blue = document.getElementsByClassName('blue')
for(let i=0;i<blue.length;i++){
blue[i].style.backgroundColor = 'blue'
}
操作DOM的内容和样式
<style>
div{
border: 1px solid #eee;
margin: 5px 0;
padding: 5px;
}
.class1{
font-size: 30px;
color: blue;
border-radius: 5px;
background-color: lightblue;
}
.size{
font-size: 30px;
}
.color{
color: green;
}
.radius{
border-radius: 5px;
}
.bgcolor{
background-color: lightcoral;
}
</style>
<div class="a"></div>
<div class="b"></div>
<div id="c">我正在学习JS-DOM</div>
<div id="d">我正在学习HTML</div>
<button id="size">添加大小</button>
<button id="color">添加颜色</button>
<button id="radius">添加圆角</button>
<button id="bgcolor">添加背景</button>
<br><br>
<button id="size2">移除大小</button>
<button id="color2">移除颜色</button>
<button id="radius2">移除圆角</button>
<button id="bgcolor2">移除背景</button>
<div id="e">我正在学习JavaScript</div>
<script>
// innerText属性设置内容时，不能识别html标签，会将html标签以文本的形式呈现
document.querySelector('.a').innerText = '<h2>好好学习，天天向上</h2>'
// innerHTML属性设置内容时，能够识别html标签
document.querySelector('.b').innerHTML = '<h2>好好学习，天天向上</h2>'
let c = document.querySelector('#c')
// 通过style属性设置元素的样式
c.style.color='red'
// 如果样式名称是多个单词的组合，需要使用小驼峰命名规范
c.style.fontSize='30px'
let d = document.querySelector('#d')
// 通过className属性，给元素指定一个类选择器
d.className = 'class1'
//获取div#e元素
let e = document.querySelector('#e')
// 通过classList属性，给元素添加多个类选择器
//获取#size按钮，并给按钮注册一个点击事件
document.querySelector('#size').onclick = function(){
// 通过add方法，添加类选择器
e.classList.add('size')
}
// 颜色按钮点击事件
document.querySelector('#color').onclick = function(){
e.classList.add('color')
}
// 圆角按钮点击事件
document.querySelector('#radius').onclick = function(){
e.classList.add('radius')
}
// 背景按钮点击事件
document.querySelector('#bgcolor').onclick = function(){
e.classList.add('bgcolor')
}
// 下面是移除样式
document.querySelector('#size2').onclick = function(){
// 通过remove方法，移除类选择器
e.classList.remove('size')
}
document.querySelector('#color2').onclick = function(){
e.classList.remove('color')
}
document.querySelector('#radius2').onclick = function(){
e.classList.remove('radius')
}
document.querySelector('#bgcolor2').onclick = function(){
e.classList.remove('bgcolor')
}
</script>
操作DOM的属性
<button id="btn1">显示图片</button>
<button id="btn2">更换图片title</button>
<button id="btn3">给图片添加address属性</button>
<br>
<img id="img" title="美丽的风景">
<script>
//获取图片标签
let img = document.querySelector('#img')
//获取按钮并添加点击事件
document.querySelector('#btn1').onclick = function(){
// 获取 或 设置 标签的原生属性，直接点
img.src = 'https://img2.baidu.com/it/u=4265591365,617998863&fm=26&fmt=auto'
}
document.querySelector('#btn2').onclick = function(){
img.title = '美丽的森林'
}
document.querySelector('#btn3').onclick = function(){
// 获取属性的统一方法 getAttribute('属性名称')
// 设置属性的统一方法 setAttribute('属性名称','属性值')
img.setAttribute('address','地址在西班牙')
// console.log(img.getAttribute('address'));
}
</script>
轮播图练习
<img id="img">
<script>
//图片数组
let arr = ["http://p1.music.126.net/wBMu9w9U8o7k4CDssm5FDg==/109951166684652624.jpg?imageView&quality=89",
"http://p1.music.126.net/82byaQmflAHb77TFu5l5HQ==/109951166682139804.jpg?imageView&quality=89",
"http://p1.music.126.net/5u6sN5t0dV1HuYjwMrgLbQ==/109951166684095755.jpg?imageView&quality=89",
"http://p1.music.126.net/k_nbrLSjaqTw1e1Qqy2zDQ==/109951166684891970.jpg?imageView&quality=89",
"http://p1.music.126.net/uVakCiFutVAzUWZXa8olzQ==/109951166681362674.jpg?imageView&quality=89"]
//获取图片对象
let img = document.querySelector('#img')
//定义一个下标
let index = 0
//默认显示第一张图片
img.src = arr[index]
setInterval(() => {
//如果下标已经越界了，从头开始
if(index===arr.length-1) index = -1
//3秒钟切换，显示下一张图片
img.src = arr[++index]
}, 3000);
</script>
创建和删除元素
<style>
*{
list-style: none;
}
#root{
border: 1px solid #ccc;
padding: 10px;
}
</style>
<span>城市：</span>
<input type="text" id="city">
<button id="addElement">添加一个元素</button>
<ul id="root">
</ul>
<div>
<p></p>
</div>
<script>
//获取ul标签
let ul = document.querySelector('#root')
//获取文本框
let city = document.querySelector("#city")
document.querySelector('#addElement').onclick = function(){
// createElement()方法，用于创建元素
// 创建一个li标签
let li = document.createElement('li')
li.innerHTML = city.value //从文本框里面获取value属性值
// appendChild()方法，用于向当前元素里面追加子元素
ul.appendChild(li)
// 给创建的每一个li标签，绑定一个点击事件，点击li标签时，删除自己
li.onclick = function(){
// 事件方法里面的this，指向事件的调用者
// console.log(this);
// 删除元素的第一种方式，自删
// li.remove()
// 删除元素的第二种方式，由父级删除子级
ul.removeChild(li)
}
}
// parentElement 和 parentNode 返回父级元素
console.log(document.querySelector('p').parentElement);
console.log(document.querySelector('p').parentNode);
</script>
