jsDOM
dom就是我们的标签 dom是标签的一种叫法
通过dom访问和修改操作让网页动起来
通常，通过 JavaScript，需要操作 HTML 元素：
1通过 id 找到 HTML 元素
2通过标签名找到 HTML 元素
3通过类名找到 HTML 元素
<body>
<div id="item"></div>
<p id="item1"></p>
<div class="class"></div>
<script>
// <!-- 获取dom标签 通过id获取dom 必须以document获取开头-->
// 通过id--->getElementById('这里添加元素') 获取dom 没有获取到对象返回null
document.getElementById('item')
let a = document.getElementById('item')
console.log(a);
// 通过标签获取dom 必须以document获取开头
// 通过 标签名getElementsByTagName('元素')
let b =document.getElementsByTagName('div')
console.log(b);
// 通过类名找到 getElementsByClassName HTML 元素
let c= document.getElementsByClassName('class')
console.log(c);
// 通过通用方法获取HTML元素 开头document 方法querySelector('这里添加元素')
let d = document.querySelector(".class")
console.log(d);
// 获取多个标签querySelectorAll 写法：后面多加了一个all all是所有的意思
let e = document.querySelectorAll("div")
console.log(e);
</script>
</body>
通过dom修改样式
<body>
<div class="item">今天星期六</div>
<script>
// 获取dom元素获取的是对象
let a = document.querySelector(".item")
console.log(a);
// 通过 .style:控制样式 修改字体 font-size 去掉- -后面的字母大写 fontSize
a.style.fontSize="80px"
a.style.color='red'
</script>
</body>
获取文本内容
<body>
<input type="text" value="输入的内容">
<div class="div">今天下雨</div>
<script>
// 获取标签
let a = document.querySelector('.div')
console.log(a);
// 获取文本 innerHTML 获取文本内容 输入框除外
console.log(a.innerHTML);
// 修改内容
a.innerHTML='不下雨了'
// 通过 .value 获取输入框的内容
let b =document.querySelector('input')
console.log(b.value);
</script>
</body>
事件
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
事件是由三部分组成，事件源，事件类型，事件处理程序（事件三要素）
事件源：事件被触发的对象
事件类型：如何触发 什么事件
事件处理程序：当这个事件被触发之后会发生什么样的事情
格式：
// addEventListener函数 写事件和回调函数
DOM.addEventListener(事件,回调函数)
--click 点击事件 点击后发生什么事情
<body>
<button>按钮</button>
<script>
// 获取按钮 然后存到变量btn
let btn = document.querySelector('button')
console.log(btn);
// 点击按钮获得监听-->addEventListener 事件 里面有两个默认形参
// 事件源-按钮-btn 时间类型-点击-click 实践出发之后出发弹窗-alert
// 语法 事件源.addEventListener('这里是事件类型',()=>{这里添加触发过程('这里添加触发的结果')})
// 触发时间 函数自动被调用
btn.addEventListener('click',()=>{
alert('触发时间')
})
</script>
</body>
#---- 练习 点击按钮 改变div的内容 innerHTML可以读取或者设置标签包裹的内容
<body>
<!-- 创建了一个div标签 他的类名叫fun -->
<div class="fun">床前明月光</div>
<button>按钮</button>
<script>
// 1.获取按钮
let but = document.querySelector("button")//通过document.querySelector("button")获取到了按钮
// 获取类名为fun的div标签并存到变量fun中
let fun = document.querySelector(".fun")
but.addEventListener("click",()=>{
// innerHTML就是获取类名为fun的div的内容
fun.innerHTML = "疑是地上霜"
})
</script>
</body>
change 触发事件 获取输入框值
<body>
<h1></h1>
<input type="text">
<script>
// 想拿到输入框的内容 并且渲染到页面
let input = document.querySelector("input") //获取到输入框 并存到变量input里面去
let h1 = document.querySelector("h1")
// 给事件 addEventListener
// change 表单里面的值发生改变 事件就会触发
// 我们的事件都有回调函数 回调函数里面有一个形参e
input.addEventListener("change", (e) => {
// e.target.value就是我们输入的值 这个记住就行
// console.log(e.target.value);
// 将获取到输入框输入的值存到h1.innerHTML中
h1.innerHTML = e.target.value
})
</script>
</body>
----练习代码
<body>
<button>点击＋1</button>
<div>0</div>
<script>
// 我们喜欢做一件事
// 点击按钮 让div+1
// 获取按钮
let but = document.querySelector("button")//获取到button存到变量but中
let div = document.querySelector("div")//获取到了div存到变量div中
// 要给事件
but.addEventListener("click",()=>{
// 我们可以把点击按钮想做的事情写在回调函数中
// innerHTML获取到里面的内容
console.log(typeof div.innerHTML);//string类型
// 为什么 div.innerHTML++ 可以进行累加
// 因为++它自己能够将内容转成数值 然后累加
div.innerHTML++
// 这里做判断应该写整数10还是字符串10
// 无所谓 ==只判断 值是否相等
if(div.innerHTML==10){ //如果div.innerHTML==10 内容等于10
div.style.color = "red"//让文字颜色变为红色}})
</script>
</body>
鼠标事件 鼠标移至 HTML 元素上方或移出元素时触发的事件
<style>
div {
width: 200px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div>撒大声地撒</div>
<script>
// 获取 div
let div = document.querySelector('div')
// 鼠标移入 mouseover 改变文本内容颜色 背景颜色
div.addEventListener('mouseover', () => {
div.style.backgroundColor = 'black'
div.style.color = 'yellow'
div.innerHTML = 'sadasasd'
})
// 鼠标移出 mouseout 恢复文本内容颜色 背景颜色
div.addEventListener('mouseout', () => {
div.style.backgroundColor = 'red'
div.style.color = 'black'
div.innerHTML = '撒大声地撒'
})
</script>
</body>
keydown 事件 鼠标移至 HTML 元素上方或移出元素时触发的事件
<body>
<div>我是默认的div</div>
<input type="text" class="input">
<script>
// 获取 div input
let div = document.querySelector("div")
let input = document.querySelector(".input")
// 输入框按下 Enter 触发-->keydown 事件 改变div.innerHTML 内容
input.addEventListener("keydown", (e) => {
// e.key === "Enter" 用于检测是否按下了 Enter 键。
if (e.key === "Enter") {
div.innerHTML = "我触发了"
}
})
</script>
</body>
停止计时器
<body>
<button class="a">点击停止定时器</button>
<button class="b">点击开始定时器</button>
<script>
// 没2秒触发的定时器存到变量 dsq中
let dsq = setInterval(() => {
console.log("我执行了");
}, 2000)
// 获取这个按钮
let but = document.querySelector(".a")
// 事件
but.addEventListener("click", () => {
// 在点击按钮以后 停止定时器
clearInterval(dsq) // 停止定时器 必须给出停止定时器的名字
})
let but2 = document.querySelector(".b")
but2.addEventListener("click", () => {
setInterval(() => {
console.log("我又开始执行了");
}, 2000)
})
</script>
</body>
