javascript - 如果我想在没有 jQuery 的情况下操作 HTML/CSS，我应该采用什么方法？

Question

我正在尝试在没有大型库（如 jQuery）的帮助下进行一些 html/css 操作。

我正在使用此代码来了解 dom 何时准备就绪，并从中调用我的函数：

domready(function () {
  functionOne();
})

我将如何对 DOM 进行更改，例如向元素删除/添加类，并让它知道它以便我可以执行以下操作（在最后一行）：

<div id="myElement" class="active"></div>  

var linkElement = document.getElementById("myElement");
linkElement.className.replace(" active", " unactive");
elementByClass = document.getElementsByClassName("unactive")[0];

Answer 1

答案取决于您想要支持的浏览器。最新的浏览器已经原生实现了许多 jQuery 特性（querySelector、classlist 等）。

您的代码是一个好的开始，但它不起作用，因为 replace 不会更改字符串，它会返回一个新字符串。

<div id="myElement" class="active"></div>  

var linkElement = document.getElementById("myElement");
linkElement.className = linkElement.className.replace(" active", " unactive");
elementByClass = document.getElementsByClassName("unactive")[0];

查看 classList 以检查使用类的更健壮的实现： https ://developer.mozilla.org/en-US/docs/Web/API/Element.classList

Answer 2

You need to reassign the the DOM property that's it.

for example you can assign the classname property of DOM element as

document.getElementById("myElement").className = "myClassName";

You can useElement.setAttribute for setting all other Dom elements attributes.

Answer 3

如果您的浏览器支持Array extras和classList，请执行以下操作：

elements = document.getElementsByClassName('existingClass');
elements.forEach(function(elem){
    elem.classList.remove("existingClass");
    elem.classList.add("newClass");
    elem.classList.add("foo","bar");
});

希望有帮助。

Answer 4

尝试使用此代码将类名分配给您的 DOM 元素。

document.getElementById("myElement").className = "myClassName";