$() 原生js怎么写

在原生JavaScript中，$()函数通常指的是使用jQuery来选择DOM元素。要在原生JavaScript中实现类似的功能，可以使用以下几种方法：document.querySelector()、document.querySelectorAll()、document.getElementById()、document.getElementsByClassName()等。

一、使用 document.querySelector()

document.querySelector() 是一个非常灵活的方法，用于选择符合指定 CSS 选择器的第一个元素。这个方法与 jQuery 的 $() 功能非常相似。

const element = document.querySelector('#myElement');

二、使用 document.querySelectorAll()

document.querySelectorAll() 类似于 document.querySelector()，但它返回的是所有符合选择器的元素的静态 NodeList。

const elements = document.querySelectorAll('.myClass');

三、使用 document.getElementById()

如果你知道你要选择的元素的ID，document.getElementById() 是最快的方法。

const element = document.getElementById('myElement');

四、使用 document.getElementsByClassName()

如果你要选择多个具有相同类名的元素，可以使用 document.getElementsByClassName()，它返回的是一个实时的 HTMLCollection。

const elements = document.getElementsByClassName('myClass');

五、使用 document.getElementsByTagName()

这个方法用于选择所有具有指定标签名的元素，返回一个实时的 HTMLCollection。

const elements = document.getElementsByTagName('div');

六、自定义选择器函数

为了简化选择过程，你可以创建一个自定义的选择器函数，类似于 jQuery 的 $()。

const $ = (selector) => document.querySelectorAll(selector);
// 用法
const elements = $('.myClass');

七、详细解析 document.querySelector 与 document.querySelectorAll

1、document.querySelector()

document.querySelector() 是一种现代的 DOM 操作方法，它接受一个 CSS 选择器字符串，并返回文档中匹配该选择器的第一个元素。这个方法非常灵活，因为它支持所有的 CSS 选择器，包括类选择器、ID选择器、属性选择器等。

const firstElement = document.querySelector('.myClass'); // 选择第一个匹配 .myClass 的元素

优点：

灵活性高：支持所有的 CSS 选择器。
简洁：代码简洁，容易理解。

缺点：

性能：如果文档非常大，选择器非常复杂，性能可能会有所影响。
兼容性：在非常老的浏览器中可能不受支持。

2、document.querySelectorAll()

document.querySelectorAll() 类似于 document.querySelector()，但它返回的是所有匹配选择器的元素的静态 NodeList。这种方法非常适合需要同时操作多个元素的情况。

const allElements = document.querySelectorAll('.myClass'); // 选择所有匹配 .myClass 的元素

优点：

灵活性高：支持所有的 CSS 选择器。
静态结果：返回的 NodeList 是静态的，不会随着文档的变化而变化。

缺点：

性能：选择器复杂度和文档大小会影响性能。
操作复杂：需要遍历 NodeList 来操作所有的元素。

八、性能对比

在选择使用哪种方法时，性能也是一个需要考虑的重要因素。一般来说，document.getElementById() 是最快的，因为它直接通过 ID 查找元素。document.getElementsByClassName() 和 document.getElementsByTagName() 次之，因为它们通过类名和标签名查找元素。最后，document.querySelector() 和 document.querySelectorAll() 的性能相对较慢，因为它们需要解析 CSS 选择器。

九、实战案例

1、动态添加类名

假设你有一个按钮，点击按钮后需要给某个元素添加一个类名：

<button id="myButton">Click me</button>
<div id="myDiv">Hello World</div>

document.getElementById('myButton').addEventListener('click', () => {
    document.getElementById('myDiv').classList.add('active');
});

2、批量修改元素样式

假设你有多个元素需要批量修改样式：

<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<div class="myClass">Item 3</div>

const elements = document.querySelectorAll('.myClass');
elements.forEach(element => {
    element.style.color = 'red';
});

十、结合项目管理工具

在实际开发中，代码管理和项目协作也非常重要。推荐使用 研发项目管理系统 PingCode 和 通用项目协作软件 Worktile 来提升团队协作效率。这些工具可以帮助团队更好地管理任务和代码，提高开发效率和代码质量。

十一、总结

在原生JavaScript中，实现类似于jQuery的 $() 选择器功能并不复杂。你可以根据具体需求选择合适的方法，如 document.querySelector()、document.querySelectorAll()、document.getElementById() 等。每种方法都有其优点和缺点，理解它们的工作原理和适用场景可以帮助你更高效地操作DOM。在实际开发中，结合使用项目管理工具如 PingCode 和 Worktile，可以进一步提升团队的协作效率和项目管理能力。