获取 DOM 元素
想玩转jQuery？得先掌握在网页上找DOM元素！就跟点菜一样，用’$(‘selector’)’这招高级手法选中你想要的；但别忘了，原生JS也有自己独特的查找技巧——querySelector和querySelectorAll。
“querySelector”这个小助手超实用！只需要在页面里找跟你设定好的CSS选择器匹配上的东西，就能把它们取出。例如，想找名称为”example”的ID元素就可以在代码栏里输入`document.querySelector(“#example”)`这个简单的指令。
`querySelectorAll`功能真的超级强大，帮你把文档中符合特定CSS样式规则的元素都找出来，加上这货就是NodeList结果了。这样一来，只需要动手一次，就可以搞定大量元素！比如想找出所有带有”item”类标签的元素？简单得很，只需要输入`document.querySelectorAll(“.item”)`就大功告成啦～
// 选择 ID 为 "myButton" 的元素
const button = document.querySelector("#myButton");
// 选择所有 class 为 "myClass" 的元素
const elements = document.querySelectorAll(".myClass");
搞编程开发，会用这俩招儿就能立马找到要动的DOM元素。然后随便玩出你的新点子！
修改元素属性或样式
想加点删除什么东西，直接找它俩’setAttribute”removeAttribute’;要是要换样子的话，直接用’style’处理。这都是基本入门级别的原生Javascript操作！
家人们，你们懂吗？咱们有个`setAttribute`方法，它可以帮忙我们给元素加属性和赋值！像这样`element.setAttribute(“data-id”,”123″)`，你只需要在想添加属性的元素里塞进去，然后就能给元素搞一个叫作”data-id”的专属属性。最后再加上一串数字”123″，搞定！
想去掉哪个属性，上`removeAttribute`（移除属性）这个工具就行！比如你想把”data-id”这小尾巴给砍了，只需打上`element.removeAttribute(“data-id”)`就能轻松实现~
想换字体变红？直接在后面加个”red”就行了~
简单，给网页加点酷炫的style，随心所欲，让展示效果炸裂起来！
// 设置元素的属性
button.setAttribute("disabled", true);
// 移除元素的属性
button.removeAttribute("disabled");
// 设置元素的样式
button.style.backgroundColor = "red";
设置元素文本或 HTML
想要在网页上改字或是加点HTML？别忘记了JavaScript，尤其是那两个好帮手——`textContent`和`innerHTML`。
-要是想换个字儿？直接给元素上个`textContent`属性就行！比如，这么一敲`element.textContent =”Hello, World!”`，咔嚓一下就变身为”Hello, World!”咯。
关键就是，用`innerHTML`就能搞定，轻松地在各个地方加上 HTML 标签！比如说，如果你想让`element`变得像这样，直接这么操作就行了：
This is a paragraph.
“`可以在该元素内插入一个段落。
// 设置元素的文本
const element = document.querySelector("#myElement");
element.textContent = "Hello, world!";
// 设置元素的 HTML
element.innerHTML = "Hello, world!";
这俩方法太实用，随时随地处理文字或HTML结构都行！
绑定和解绑事件处理程序
哥们儿，咱俩心里得清楚点儿做前端，玩的就是事件！用JavaScript连和断事件咋整？简单，杀器就是addEventListener和removeEventListener这两个方法，这么折腾就行了！
搞元素的事件？直接用`addEventLister`一招搞定！告诉我啥时候要干什么，再选个对应的函数就好了。举个例子，如果想让“handleClick”这个函数在点击元素时运行，就这么弄：`element.addEventListener(“click”, handleClick)’，然后就完事儿了
别忘记了，还有个神奇的 removeEventListener 方法！用它就可以快速解除网页上之前设置的事件监听器。不要再让这些中介程序占用资源，赶紧删除它们，这样网站就能运行更快，而且还能防止莫名其妙的事件触发~
学好用好事件处理法，编写出更有趣、易上手的网页！
处理元素类
// 绑定事件处理程序
function handleClick(event) {
console.log("Button clicked!");
}
button.addEventListener("click", handleClick);
// 解绑事件处理程序
button.removeEventListener("click", handleClick);
管理网页元素特性和状态可不是闹着玩儿的，容易搞乱他们是啥类别的。不过别急，JavaScript这下子有了个好帮手，那就是classList属性，它就是专门帮我们辨认各类元素名字的神奇利器！
在JavaScript里，给IE词加点样式，只要先加个类名就行呐-这个classList.add功能，简单实用。给元素添类，就用element.classList.add(“active”)这个句式，元素名和类名用逗号分隔，就能轻松添加”active”类！
记住了，要用classList里的remove方法去除想要的类。比如咱想把”hidden”这个类去掉，直接输一下`element.classList.remove(“hidden”)`就搞定了亲！
这儿又要说件神奇的事，那个classList.toggle功能真的太给力了！不管是添加类样式还是去掉它，统统不是问题！没类？添上！有类？去掉！随心所欲地调控类样式，就是这么任性~
这个clAssList属性真是好用，操作网页上的小部件和它们的状态就跟玩似的简单。这样一来，代码也变得更直观了！
总结与展望
看过这篇文章后，你要是忍受不了被jQuery控制，又想要更多掌控自己的代码，那就选JavaScript！你会发现它也能做许多让你眼前一亮的事，就好像像使用jQuery一样简单无误！比如获取网页中的各种元素、设置属性、改变样式和文字内容，进行页面布局、修改HTML，甚至添加效果和分类等，而且JavaScript还为我们提供了非常全面、强大的API工具库，肯定能让你在前端开发的世界里如鱼得水。
用起jQuery来很爽，还能跨浏览器，但有时候还得靠原生的JavaScript帮忙。只要了解其特性，再搭配上好点儿的写法和设计框架，就能让项目进展得飞快！
const element = document.querySelector("#myElement");
// 添加类
element.classList.add("myClass");
// 移除类
element.classList.remove("myClass");
// 切换类
element.classList.toggle("myClass");
前端技术更新的节奏可真快JavaScript也变得越发强劲了。想要在这个领域立足，那可得紧跟潮流试试新东西，多积累经验才行！眼光要大大的，勇气也要足足的，去挑战新鲜事物！
今儿个我就给你们讲讲如何玩转原生JavaScript代码有关前端技术的点滴想法或经验就通通留言告诉大伙！
评论0