一、什么是dom？
dom可以理解为一个个的标签
二、为什么要有dom？ 有什么作用
我们可以通过dom访问和修改操作让网页动起来
三、获取dom
document 代表整个网页，相当于 dom 树的入口
通过 document 中的 querySelector 获取到按钮 button 的 dom
<button>按钮</button>
document.querySelector('button')
# 可以打印dom在控制台来看看效果
console.log(document.querySelector('button'));
四、修改样式
let bon = document.querySelector('button')
# 通过style控制样式 color 为red
bon.style.color = 'red'
# 修改button按钮的 字体大小
bon.style.fontSize= '60px'
五、获取文本内容
- innerHTML 获取文本内容
<p>文本内容 哈哈</p>
let p = document.querySelector('p')
console.log(p.innerHTML);
- value 获取到输入框中的内容
<input type="text" value="12312">
let text = document.querySelector('input')
console.log(text.value);
六、事件
格式：
# addEventListener函数 写事件和回调函数
DOM.addEventListener(事件,回调函数)
1. click 点击事件
应用场景：点击后发生什么事情
案例：
<button>按钮</button>
let bon = document.querySelector('button')
bon.addEventListener('click',()=>{
alert('点击显示')
})
2. change 触发事件
应用场景：获取输入框值
<input type="text">
let value = document.querySelector('input')
value.addEventListener('change',(e)=>{
#通过 e.target.value 获取到输入的值
console.log(e.target.value);
})
案例：
- 根据老师提供的样式 点击按钮 让div里面的内容 加1
<button>点击＋1</button>
<div>0</div>
答案：
document.querySelector('button').addEventListener('click',()=>{
console.log(document.querySelector('div').innerHTML++);
})
