第二天开始接触浏览器里的页面元素。JavaScript 不只是计算变量，也能通过 DOM 找到标签、读取状态，再在事件发生时修改页面。

DOM 的两步：找到元素，再操作元素

HTML 标签在 JavaScript 中会表现为元素对象。常用的查找方式分别适合不同场景：

const title = document.getElementById('title')
const firstCard = document.querySelector('.card')
const cards = document.querySelectorAll('.card')

getElementById() 和 querySelector() 只返回一个元素；getElementsByTagName()、getElementsByClassName() 和 querySelectorAll() 会返回一组元素。选择器没有匹配到元素时，单元素查询会得到 null，因此脚本执行时机和选择器是否写对都值得先检查。

找到元素后，内容、属性和行内样式都是对象上的入口：

const input = document.querySelector('input')
const panel = document.querySelector('.panel')

panel.innerText = '只写入文字'
panel.innerHTML = '<strong>可以解析标签</strong>'
panel.style.marginLeft = '24px'
input.value = '新的值'
input.disabled = true

innerText 用于文本，innerHTML 可以插入 HTML 结构。只有内容来自可靠来源时才应使用 innerHTML，否则会把不受信任的字符串当成页面结构解析。样式名中的连字符要改为驼峰，例如 margin-left 写成 marginLeft；读取最终计算样式时可用 getComputedStyle(panel).width。

属性和自定义数据

标签已有的属性通常能直接通过元素对象读取，例如 id、className、value、checked。布尔属性应按布尔值操作，而不是写字符串：

checkbox.checked = true
button.disabled = false

自定义 HTML 属性可用 getAttribute() 和 setAttribute() 处理。实际项目中，更推荐 data-* 属性配合 dataset，让页面数据的用途更明确。

panel.setAttribute('data-state', 'open')
console.log(panel.dataset.state) // 'open'

事件让代码在合适的时机执行

页面刚解析脚本时，用户还没有点击按钮。因此交互逻辑要放在函数中，等事件触发后再运行：

const button = document.querySelector('button')

button.onclick = function () {
  console.log('按钮被点击了')
}

点击、输入、焦点变化和鼠标移动都是事件。这里最重要的理解是：函数不是立刻执行的结果，而是把“之后发生这件事时该做什么”交给浏览器。后续会继续学习更常用的 addEventListener() 写法和事件对象。

表达式始终会给出一个结果

程序中所有用于表示或计算数据的部分都可以看作表达式。一个常量、变量、属性访问、算术计算和函数调用都能产生值：

const total = price * count
const username = user.name
const random = Math.random()

理解表达式的返回值后，复杂代码可以拆开阅读：先看每个小表达式得到什么，再看这个结果怎样成为外层表达式的操作数。DOM 操作也遵循同一套规律，document.querySelector() 的返回值就是后续访问 innerText 和 style 的基础。

今天的练习提醒我，页面交互不是“直接改 HTML”，而是先拿到元素对象，再在正确的事件时机修改它的状态。