一、DOM概念

DOM（Document Object Model）是浏览器将HTML/XML文档解析为树状结构的编程接口

其核心特点包括：

1. ‌结构化表示‌：以节点树形式组织文档，包含元素节点、属性节点、文本节点等7种类型

2. ‌动态交互‌：通过JavaScript可修改节点属性和内容，实时反映到页面上

3. ‌跨语言标准‌：虽是W3C规范，但最常与JavaScript配合使用

二、DOM取值本质

通过$('#username').val()这类操作，实质是：

1. ‌元素定位‌：$('#username')使用jQuery选择器获取id为"username"的DOM元素对象

2. ‌属性访问‌：.val()方法读取该元素的value属性值（表单元素特有）

三、可获取的值类型

1. ‌表单元素值‌（通过.value或.val()）：

• 文本框/密码框：输入内容

• 单选/复选框：选中项的value属性

• 下拉菜单：选中option的value

2. ‌通用属性值‌：

• 标准属性：id、className、href等

• 自定义属性：data-*系列属性

3. ‌内容数据‌：

• innerHTML：包含子元素的HTML字符串

• textContent：纯文本内容（去标签）

四、取值方法对比

方法类型	示例	特点
‌原生JS‌	document.getElementById('id').value	最快但功能单一
‌jQuery‌	$('#id').val()	简洁且兼容性好
‌CSS选择器‌	document.querySelector('#id')	灵活性最高
‌节点遍历‌	parentNode.children[0]	适合层级操作

五、典型应用场景

1. ‌表单验证‌：实时检查输入内容是否符合规则（如示例代码）

2. ‌动态交互‌：根据用户操作更新页面内容

3. ‌数据提交‌：收集表单数据通过AJAX发送到服务器

4. ‌状态控制‌：获取元素属性决定后续操作（如禁用按钮）

六、技术必要性

1. ‌实现动态网页‌：静态HTML无法响应用户操作

2. ‌数据驱动视图‌：现代前端框架（如Vue/React）的底层基础

3. ‌性能优化‌：精准操作DOM避免整页刷新

示例中var username = $('#username').val()的完整执行流程：

1. jQuery通过CSS选择器语法定位元素

2. 调用val()方法读取表单当前值

3. 将值赋给JS变量供后续处理