如果我想在沒有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/zh-CN/docs/Web/API/Element.classList

Answer 2

嘗試使用此代碼為您的DOM元素分配類名稱。

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

Answer 3

您需要重新分配它的DOM屬性。

例如，您可以將DOM元素的classname屬性分配為

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

您可以使用Element.setAttribute來設置所有其他Dom元素屬性。

Answer 4

如果您的瀏覽器支持Array Extras和classList ，請執行以下操作：

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

希望能有所幫助。