1、 獲取和設定屬性
Jquery：

 $("#testid").attr("value");   //獲取屬性為value的值
 $("#testid").attr("value"，"1");   //設定屬性為value的值
 $("#testid").removeAttr("value"); //刪除value屬性

Js:

document.getElementById("testid").getAttribute("value"); //獲取屬性
document.getElementById("testid").attributes["value"].nodeValue;//獲取屬性
document.getElementById("testid").setAttribute("value","1"); //設定屬性
document.getElementById("testid").removeAttribute ("value"); //刪除屬性
 

2、獲取節點
Jquery：

$("#testid").parent();   //父節點
$("#testid").parents("div");   //所有祖先節點
$("#testid").prev();    //上一個兄弟節點
$("#testid").prevAll();   //之前所有的兄弟節點
$("#testid").next();       //下一個兄弟節點
$("#testid").nextAll();    //之後所有的兄弟節點
$("#testid").siblings();    //所有的兄弟節點
$("#testid").children("div");  //返回直接的兒子節點，沒有孫子節點  
$("#testid").find("p");  //查詢testid下的所有p節點
 

Js:

var testdom=document.getElementById("testid");
testdom.parentNode;   //獲取父節點
testdom.previousSibling;   //獲取上一個兄弟階段
testdom.nextSibling;    //獲取下一個兄弟節點
testdom.childNodes;    //獲取該節點下的所有子節點
testdom.childNodes[1];    //獲取該節點下的第二個子節點
testdom.firstChild;      //獲取第一個子節點
testdom.lastChild;     //獲取最後一個子節點

3、class的設定

<div id="testid" class="wl-active wl-data wl-day wl-hour wl-min"></div >
var testdom=document.getElementById("testid");
//獲取class的所有值:
var testclasslist=testdom.classList;//wl-active wl-data wl-day wl-hour wl-min
//給現有的class新增class
testdom+=" wl-second"; //注意空格

Jquery

$("#testid").addclass("wl-year");      //新增class
$("#testid").removeClass("wl-year");   //刪除class
$("#testid").toggleClass("wl-year");     //如果有則刪除，如果沒有則新增
$("#testid").toggleClass("wl1 wl2");  //如果是兩個class進行切換，則放兩個名稱就ok了
$("#testid").hasClass("wl-year");     //判斷是否有該class，返回bool型別值
$("#testid").is(".wl-year");  //同上，注意寫法

https://www.cnblogs.com/cglNet/p/6272373.html