<body>
<div id="mydiv" class="mydiv">
我是一段文字1
</div>
<div class="mydiv">
我是一段文字2
</div>
<input type="text" value="我是一段文字">
<img src="./2-案例/images/close.png" alt="">
</body>
<script>
// 什么是WebAPI?
// 浏览器应用程序接口，主要是帮我们快速实现某些功能
// 什么是DOM?
// 文档对象模型，一个页面就是一个文档，里面的每个元素都是一个个对象
// 获取元素：五种方式
// 1.通过ID获取
// 语法：document.getElementById('ID名')
// eg:
// var mydiv = document.getElementById('mydiv')
// 注意：这里获取的是具体的对象，可以直接进行属性和样式的修改
// mydiv.innerHTML = '我是修改的内容'
// 2.通过标签名获取
// 语法：document.getElementsByTagName('标签名')
// eg:
// var mydiv = document.getElementsByTagName('div')
// 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
// mydiv[0].innerHTML = '我是通过标签名修改的内容'
// ----------------------华丽的分隔符---------------------------------
// H5新增的获取元素方法
// 3.通过类名获取
// 语法：document.getElementsByClassName('类名')
// eg:
// var mydiv = document.getElementsByClassName('mydiv')
// 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
// mydiv[0].innerHTML = '我是通过类名修改的'
// 4.通过选择器获取匹配到的第一个对象
// 语法：document.querySelector('选择器')
// eg:
// var mydiv = document.querySelector('div')
// var mydiv = document.querySelector('#mydiv')
// var mydiv = document.querySelector('.mydiv')
// mydiv.innerText = '我是通过单个选择器修改的内容'
// 打印对象的详细属性和方法
// console.dir(mydiv)
// 注意：通过选择器获取必须要给选择器加符号，并且只会返回匹配到第一个元素，是一个具体的对象可以直接设置属性和方法
// 5.通过选择器获取匹配到的所有对象
// 语法：document.querySelectorAll('选择器')
// eg:
// var mydiv = document.querySelectorAll('div')
// var mydiv = document.querySelectorAll('.mydiv')
// mydiv[1].innerHTML ='我是通过全部选择器修改的内容'
// 注意：这里获取的是元素对象集合，集合是一个伪数组，不能直接进行属性和样式的修改，需要通过索引号找到具体的对象才能修改！
// 总结：
// 1.古老的获取方式有2种，是通过ID和标签名获取，H5新增的有三种，是通过选择器(单选择器、多选择器)和类名获取
// 2.返回具体对象的方式有2种，一种是通过ID获取，一种是通过单选择器获取。返回元素对象集合的方式有3中，第一种是通过类名，第二种是通过标签名，第三种是通过全部选择器，元素对象集合是不能直接设置属性和样式的！
// 操作元素：
// 1.修改元素内容：
// 获取：元素.innerHTML
// 设置：元素.innerHTML = 设置的值
// 一种是innerText，另一种innerHTML
// 相同点：都是可以获取和设置元素内容的
// 不同点：innerText不识别空格和换行，也不识别Html标签，不是W3C推荐使用的，所以今后使用更多的是innerHTML
// 2.普通元素的属性：设置或获取元素的属性
// 获取：元素.属性名
// 设置：元素.属性名 = 设置的值
// var myimg = document.querySelector('img')
// console.log(myimg.src);
// myimg.src = './2-案例/images/open.png'
// myimg.alt = 'ldh'
// 3.表单内容：
// 获取：元素.value
// 设置：元素.value = 设置的值
// var inp = document.querySelector('input')
// inp.value = '我是修改的内容'
// console.log(inp.value);
// 表单中的checked disabled selected 都是可以进行修改的
// inp.disabled = true
// inp.checked = true
// 4.样式：style属性
// 获取：元素.style.样式名
// 设置：元素.style.样式名 = 设置的值
// var mydiv = document.querySelector('div')
// 1.修改的是行内样式
// mydiv.style.display = 'none'
// 2.修改类名
// mydiv.className = 'class1'
// 事件基础：
// 事件三要素：事件源、事件类型、事件处理程序
// 绑定方法：事件源.事件类型=事件处理程序
// 事件类型：三种
// 点击事件：onclick
// 聚焦事件：onfoucs
// 失去焦点：onblur