#获取DOM元素
<div id ="app"> </div>
<script>
get 获取 element 元素 id
var div = document.getElementById("app")
console.log(typeof div)
</script>
#获取到DOM元素的第二种方法
<div class="app"></div>
<div class="app"></div>
<div class="app"></div>
<div class="app"></div>
<script>
var div = document.getElementsByClassName("app")
console.log(div[0])
console.log(div[3])
</script>
#获取DOM元素的第三种方法
<ul class="myul">
<li>英雄联盟</li>
<li>英雄联盟</li>
<li>英雄联盟</li>
<li>英雄联盟</li>
</ul>
<script>
var ul = document.getElementsByClassName("myul")[0]
var lis = ul.getElementsByTagName("li")
console.log(lis)
</script>
#H5新增获取方法
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.querySelectorAll
console.log(lis)
</script>
#特殊的元素
<div id="box"></div>
<script>
console.log(document.body)
console.log(document.documentElement)
</script>
#时间的说明
<button id="btn">弹出</button>
<script>
事件三要素
事件源 事件类型 事件处理函数
事件源 按钮
事件类型 单击 双击
事件处理函数 搜索的处理程序
var btn = document.querySelector("#btn");
click 单击事件
btn.onclick = function(){
alert("你好")
}
</script>
#案例
<div class="box"> </div>
<div class="box2"> </div>
<button id="btn">改变box中的内容</button>
<script>
var box = document.getElementsByClassName("box")[0]
var btn = document.getElementById("btn")
var box2 = document.getElementsByClassName("box2")[0]
btn.onclick = function(){
innerHTML就是元素标签中的内容
console.log(box.innerHTML)
box.innerHTML = "你好，世界！！！"
}
box2.innerText = "你好世界"
</script>
#innerHTML和innerText的区别
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script>
var box = document.querySelector(".box")
console.log(box.innerHTML)
console.log(box.innerText)
</script>
#案例
<div>
<button id="btn">修改图片的地址</button>
<img src="图片地址" alt="">
</div>
<script>
var btn = document.querySelector("#btn")
var img = document.querySelectorAll("img")[0]
btn.onclick = function(){
innerHTML innerText都是修改dom元素的内容
修改DOM元素的属性
img.src = "更改后的图片地址"
}
</script>
#案例2
<div>
<img src="" alt="">
</div>
<script>
// 判断当前的时间点
var img = document.querySelector("img")
var date = new Date();
console.log(date.getHours())
var hours = date.getHours()
if(hours > 0 && hours <= 12){
img.src = "../images/z.gif"
}else if(hours > 12 && hours <= 18){
img.src = "../images/x.gif"
}else{
img.scr = "../images/w.gif"
}
</script>
#表单属性的设置
<div>
<input type="text">
<button id="btn">清除数据</button>
</div>
<script>
var input = document.querySelector("input")
var btn = document.querySelector("#btn")
可以设置input的默认值
input.value = "helloworld!!!"
btn.onclick = function(){
this指向的就是函数的调用者
this.disabled = true;
}
</script>
#明码和密码之间的转换
<div>
<input type="password">
<img src="../images/close.png" alt="">
</div>
<script>
var img = document.querySelector("img")
var input = document.querySelector("input")
var flag = false
img.onclick = function() {
if(!flag){
input.type = "text"
img.src = "../images/open.png"
flag = true
}else{
input.type = "password"
img.src = "../images/close.png"
flag = false
}
}
</script>
#操作元素的样式
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box") 获取.box
box.style.backgroundColor = "pink" 更改box背景颜色
box.style.width = "300px" 更改box宽
box.style.height = "500px" 更改box高
</script>
#广告关闭
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid red;
margin: 100px;
position: relative;
}
i{
position: absolute;
width: 20px;
height: 20px;
right: -10px;
top: -10px;
border: 1px solid red;
border-radius: 50%;
font-style: normal;
text-align: center;
line-height: 20px;
font-style: 12px;
}
</style>
<div>
<div class="box">
<i>X</i>
</div>
</div>
<script>
var div = document.querySelector("div")
var i = document.querySelector("i")
i.onclick = function(){
div.style.display = "none"
}
</script>
#显示隐藏文本框
<input type="text">
<script>
var input = document.querySelector("input")
input.value = "helloworld"
input.onfocus = function(){ 文本框聚焦的时候
if(input.value != "helloworld"){
}else{
input.value = ""
}
}
input.onblur = function(){ 文本框失焦的时候
if(!input.value){
input.value = "helloworld"
}
}
</script>
#操作class方式改变样式
<style>
.divstyle{
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
box.className = "box divstyle"
</script>
</style>
