原生js常用方法有哪些？-CSDN博客

本文链接：https://blog.csdn.net/qq_34402069/article/details/131535246

本文介绍了原生JavaScript的一些核心方法，包括选择元素（如getElementById、getElementsByClassName等）、创建和操作元素、修改元素内容和属性、处理类名以及事件监听和样式操作。强调了尽管框架广泛应用，但熟悉原生JS对于提升工作效率至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如今框架横行，但原生JS学习反而变少了，框架虽然方便了，但掌握原生JS才是最基础的，本文分享了一些提供工作效率的原生JS方法，希望对你有所帮助。

一、选择元素

document.getElementById("id") // 根据元素的 ID 获取单个元素

document.getElementsByClassName(className) // 根据类名获取一组元素

document.getElementsByTagName(tagName)  // 根据标签名获取一组元素

document.querySelector(selector)  // 使用 CSS 选择器选择并返回第一个匹配的元素

document.querySelectorAll(selector)  // 使用 CSS 选择器选择并返回所有匹配的元素

二、创建、插入和删除元素

document.createElement(tagName) // 创建一个新的元素节点

document.appendChild(node)  // 将一个节点作为最后一个子节点添加到父节点

document.insertBefore(newNode, referenceNode) // 在参考节点之前插入一个新节点

document.removeChild(node) // 从父节点中移除指定的子节点

document.replaceChild(newNode, oldNode)  // 用新节点替换旧节点

document.cloneNode()  // 克隆一个元素节点

三、修改元素内容和属性

<div id="box" data="nihao">张三丰</box>

document.getElementById("box").innerHTML  // 获取或设置元素的 HTML 内容

document.getElementById("box").textContent // 获取或设置元素的文本内容

document.getElementById("box").getAttribute("data") // 获取元素的指定属性值

document.getElementById("box").setAttribute("name", 'tag') // 设置元素的指定属性值

四、类名操作

<div id="box">张三丰</box>

document.getElementById("box").classList // 返回元素属性一个或多个类名

document.getElementById("box").classList.add('class1', 'class2') // 可以添加一个或多个类名

document.getElementById("box").classList.remove('class1', 'class2') // 可以删除一个或多个类名

document.getElementById("box").classList.toggle('class3') // 有就删除，没有就添加

五、事件处理

<div id="box">点击事件</div>

// 绑定事件监听器
document.addEventListener(event, listener)

<!-- 示例 -->
document.addEventListener('click', function(){
    document.getElementById("box").innerHTML = "张三丰"
})

// 移除事件监听器
document.removeEventListener(event, listener)

// 点击事件
document.getElementById('box').addEventListener('click', function(){
    alert('点击了')
})

document.getElementById('box').onclick = function(){
    alert('点击了')
}

六、样式操作

document.getElementById("box").style.color = 'red' // 给节点添加样式