核心内容摘要
2007-2024年各省知识产权保护指数
JavaScript DOM 核心操作从内容到节点的实战指南
内容操作文本内容textContent获取或设置元素的纯文本内容const element document.getElementById(demo); console.log(element.textContent); // 获取内容 element.textContent 新文本; // 设置内容与innerText的区别textContent获取所有文本包括隐藏元素innerText只渲染可见文本HTML内容innerHTML操作元素的HTML结构element.innerHTML strong加粗文本/strong; // 插入带标签的内容注意直接插入HTML可能引发XSS攻击需对用户输入做转义处理
属性操作标准属性直接访问element.id、element.className通用方法element.setAttribute(data-id,
; // 设置属性 console.log(element.getAttribute(data-id)); // 获取属性 element.removeAttribute(data-id); // 删除属性自定义属性推荐使用data-*规范div>console.log(element.dataset.userId); // 通过 dataset 访问
样式操作修改CSS类element.classList.add(active); // 添加类 element.classList.remove(hidden); // 移除类 element.classList.toggle(dark-mode); // 切换类直接修改样式element.style.color #ff0000; // 行内样式 element.style.setProperty(--primary-color, blue); // 修改CSS变量
节点操作核心节点创建const newDiv document.createElement(div); // 创建元素 const textNode document.createTextNode(动态内容); // 创建文本节点节点插入parentElement.appendChild(newDiv); // 插入子节点末尾 parentElement.insertBefore(newDiv, referenceElement); // 在指定节点前插入节点替换与删除parentElement.replaceChild(newDiv, oldChild); // 替换节点 parentElement.removeChild(oldChild); // 删除节点节点遍历console.log(parentElement.firstChild); // 首个子节点 console.log(parentElement.lastChild); // 末尾子节点 console.log(node.nextSibling); // 下一个兄弟节点
事件处理事件监听element.addEventListener(click, (event) { console.log(点击坐标:, event.clientX, event.clientY); });事件委托利用事件冒泡提高性能document.getElementById(list).addEventListener(click, (e) { if(e.target.tagName LI) { console.log(点击列表项:, e.target.textContent); } });
实战
注意事项性能优化批量操作使用DocumentFragment减少重绘const fragment document.createDocumentFragment(); for(let i0; i100; i) { const li document.createElement(li); fragment.appendChild(li); } document.getElementById(list).appendChild(fragment);现代API替代方案使用querySelector/querySelectorAll替代getElementById等document.querySelector(.container button); // CSS选择器语法
总结DOM操作的核心在于理解节点树结构通过内容→属性→样式→节点的递进式操作结合事件机制实现动态交互。
建议优先使用现代API如classList、dataset并注意性能与安全性可显著提升开发效率。