目录前言一、DOM 是什么二、获取元素2.1 传统方法2.2 选择器方法推荐三、操作元素内容3.1 innerHTML3.2 textContent vs innerText四、操作元素属性4.1 标准属性4.2 自定义属性五、操作元素样式5.1 style 属性5.2 classList推荐六、动态创建与删除元素6.1 创建元素6.2 添加元素6.3 删除元素七、事件处理7.1 事件绑定方式7.2 常用事件7.3 事件对象7.4 事件委托八、总结前言在上一篇中我们掌握了 JavaScript 的核心语法——变量、函数、对象、运算符等。但学会语法只是第一步JavaScript 在浏览器中的真正威力在于操作网页元素、响应用户交互。这需要理解 DOMDocument Object Model——浏览器提供给 JS 操作网页的接口。本文是前端三基石系列第二篇的续篇聚焦 DOM 操作与事件处理。一、DOM 是什么DOM 是浏览器将 HTML 解析成的一棵节点树htmlheadtitle示例/title/headbodydividcontainerpclasstextHello/p/div/body/html浏览器会将其解析为Document └── html ├── head │ └── title └── body └── div#container └── p.text └── Hello每个 HTML 标签都是一个元素节点文本内容是文本节点。JS 通过document对象访问这棵树。后端类比DOM 类似于 Java 解析 XML 的 DOM 模型——把文档结构化为对象树通过 API 增删改查节点。二、获取元素操作元素的第一步是找到它。2.1 传统方法// 通过 id 获取唯一document.getElementById(container);// 通过标签名获取返回集合document.getElementsByTagName(div);// 通过类名获取返回集合document.getElementsByClassName(text);这些方法返回的是HTMLCollection是活的集合——文档变化时自动更新。2.2 选择器方法推荐ES5 提供了更灵活的选择器方法// 获取单个元素第一个匹配的document.querySelector(#container);document.querySelector(.text);document.querySelector(div p);// 获取所有匹配的元素返回 NodeListdocument.querySelectorAll(.text);document.querySelectorAll(div p);方法返回值特点querySelector()单个元素找不到返回nullquerySelectorAll()NodeList找不到返回空列表不是null推荐使用选择器方法语法统一与 CSS 选择器一致代码更清晰。三、操作元素内容3.1 innerHTML读取或设置元素的 HTML 内容dividboxspanHello/span/divscriptconstboxdocument.getElementById(box);// 读取得到 HTML 字符串console.log(box.innerHTML);// \n spanHello/span\n// 设置会解析 HTMLbox.innerHTMLstrongWorld/strong;/script安全警告不要将用户输入直接赋值给innerHTML会导致 XSS 攻击// 危险用户输入可能包含恶意脚本box.innerHTMLuserInput;// ❌// 安全的方式使用 textContentbox.textContentuserInput;// ✅3.2 textContent vs innerText两者都操作纯文本但有区别dividboxstyledisplay:noneHellospanWorld/span/divscriptconstboxdocument.getElementById(box);console.log(box.textContent);// Hello World获取所有文本console.log(box.innerText);// 考虑 CSS 样式隐藏元素返回空/script属性特点性能textContent获取所有文本不考虑 CSS更快innerText考虑 CSS 样式如display: none较慢推荐使用textContent除非你需要考虑 CSS 样式。四、操作元素属性4.1 标准属性对于 HTML 标准属性如id、className、href、src可以直接访问constlinkdocument.querySelector(a);// 读取console.log(link.href);console.log(link.id);// 设置link.hrefhttps://example.com;link.idnewId;// 特殊class 要用 className因为 class 是 JS 保留字element.classNameactive;4.2 自定义属性HTML5 允许使用data-*自定义属性dividboxdata-user-id123data-roleadmin/divscriptconstboxdocument.getElementById(box);// 读取console.log(box.dataset.userId);// 123自动转为驼峰console.log(box.dataset.role);// admin// 设置box.dataset.userId456;/script也可以使用通用方法// 任意属性都可用element.getAttribute(data-user-id);element.setAttribute(data-user-id,789);element.removeAttribute(data-user-id);五、操作元素样式5.1 style 属性直接修改内联样式constboxdocument.getElementById(box);box.style.width100px;box.style.height50px;box.style.backgroundColorred;// 注意用驼峰命名box.style.displaynone;缺点只能设置内联样式无法操作 CSS 类样式名需要转为驼峰background-color→backgroundColor5.2 classList推荐通过操作 CSS 类来控制样式style.active{background-color:red;}.hidden{display:none;}/styledividboxHello/divscriptconstboxdocument.getElementById(box);// 添加类box.classList.add(active);// 移除类box.classList.remove(active);// 切换类有则移除无则添加box.classList.toggle(hidden);// 判断是否包含类if(box.classList.contains(active)){console.log(box 是激活状态);}/script方法作用add()添加类remove()移除类toggle()切换类contains()判断是否包含replace(old, new)替换类推荐使用classList样式与行为分离易于维护。六、动态创建与删除元素6.1 创建元素// 创建元素constdivdocument.createElement(div);// 设置属性和内容div.idnewDiv;div.classNamebox;div.textContent新创建的元素;// 或使用 innerHTMLdiv.innerHTMLspan内容/span;6.2 添加元素dividcontainerpidfirst第一段/p/divscriptconstcontainerdocument.getElementById(container);constnewDivdocument.createElement(div);newDiv.textContent新元素;// 追加到末尾container.appendChild(newDiv);// 插入到指定元素之前constfirstdocument.getElementById(first);container.insertBefore(newDiv,first);// 新方法更直观container.append(newDiv);// 末尾添加container.prepend(newDiv);// 开头添加first.before(newDiv);// 在 first 之前插入first.after(newDiv);// 在 first 之后插入/script6.3 删除元素constboxdocument.getElementById(box);// 传统方法box.parentNode.removeChild(box);// 新方法推荐box.remove();七、事件处理7.1 事件绑定方式方式一HTML 属性不推荐buttononclickalert(点击了)点击/button缺点HTML 与 JS 混在一起难以维护。方式二DOM 属性constbtndocument.getElementById(btn);btn.onclickfunction(){alert(点击了);};// 缺点只能绑定一个处理函数后绑定的会覆盖前面的方式三addEventListener推荐constbtndocument.getElementById(btn);btn.addEventListener(click,function(){alert(点击了);});// 优点可以绑定多个处理函数btn.addEventListener(click,function(){console.log(另一个处理函数);});// 移除事件需要保持同一个函数引用functionhandleClick(){console.log(点击);}btn.addEventListener(click,handleClick);btn.removeEventListener(click,handleClick);7.2 常用事件事件触发时机click点击dblclick双击mouseenter鼠标进入mouseleave鼠标离开keydown键盘按下keyup键盘抬起focus获得焦点blur失去焦点input输入内容变化实时change值改变并失焦submit表单提交load资源加载完成DOMContentLoadedDOM 解析完成示例// 输入框实时响应constinputdocument.querySelector(input);input.addEventListener(input,function(){console.log(当前值,this.value);});// 表单提交constformdocument.querySelector(form);form.addEventListener(submit,function(e){e.preventDefault();// 阻止默认提交行为console.log(表单数据,newFormData(this));});7.3 事件对象事件处理函数会收到一个事件对象btn.addEventListener(click,function(e){console.log(e.target);// 触发事件的元素实际点击的console.log(e.currentTarget);// 绑定事件的元素this 指向它console.log(e.type);// 事件类型console.log(e.clientX,e.clientY);// 鼠标坐标e.preventDefault();// 阻止默认行为e.stopPropagation();// 阻止冒泡});target vs currentTargetulidlistli项目1/lili项目2/li/ulscriptconstlistdocument.getElementById(list);list.addEventListener(click,function(e){console.log(e.target);// 实际点击的 liconsole.log(e.currentTarget);// ul});/script7.4 事件委托问题动态添加的元素没有事件绑定// 只对已有的 li 生效新添加的没有事件document.querySelectorAll(li).forEach(li{li.addEventListener(click,function(){console.log(this.textContent);});});解决事件委托——将事件绑定到父元素利用冒泡机制constlistdocument.getElementById(list);list.addEventListener(click,function(e){// 判断点击的是否是 liif(e.target.tagNameLI){console.log(e.target.textContent);}});优点动态元素也有事件代码更简洁内存占用更少八、总结类别内容推荐方法获取元素选择元素querySelector/querySelectorAll操作内容读写文本/HTMLtextContent/innerHTML注意安全操作属性标准属性/自定义属性直接访问 /dataset操作样式控制样式classList创建元素动态生成元素createElementappend删除元素移除元素remove()事件绑定响应用户操作addEventListener事件优化动态元素事件事件委托核心记忆点用选择器方法获取元素用classList操作样式用addEventListener绑定事件动态元素用事件委托本文是前端三基石系列第二篇的续篇。下一篇将讲解异步编程与网络请求。
