HTML DOM 节点元素操作

一，判断属性

hasAttribute(‘属性名’) ：判断是否有某个属性

 //3,判断属性是否存在
console.log(h1.hasAttribute("id", "newId"));

二，获得属性值

getAttribute(‘属性名’)：获取属性值

//1,获得属性值
console.log(h1.getAttribute("id"));

三，设置属性

setAttribute(‘属性名’,‘属性值’)：设置属性值

//2,设置属性值
h1.setAttribute("id", "newId");

四，移除属性

removeAttribute(‘属性名’) ：移除某个属性

//4,移除属性
h1.removeAttribute("id", "newId");

五，自定义属性

W3C为HTML提供的自定义属性的标准方式为：data-属性名；

let h1 = document.getElementById("title");
//1,设置自定义属性
h1.setAttribute("data-infor", "好属性");
//2,获得自定义属性
console.log(h1.getAttribute("data-infor"));

六，class属性

className：获取或修改元素节点的class

    

        class属性
    

七，添加class属性

classList：类数组的方式返回标签的全部class

add(c1, c2…)：增加一个或多个class，如果已存在就不添加

八，移除class属性

remove(c1,c2…)：移除一个或多个class，如果不存在也不会报错

//2,去掉class属性
h1.classList.remove("class", "titleClass");

九，class判断

contains(class)：判断类名是否存在，存在返回TRUE，否则FALSE；

//3,判断class属性是否存在
console.log(h1.classList.contains("class"));