js获取属性节点

DOM

创建注释节点

let comEle = document.createComment("注释内容");

获取和添加属性节点

获取属性节点的值

书写格式：元素节点.getAttribute(属性名)

例：let claValue = divELe.getAttribute("class");

获取节点的类名

console.log(divELe.class);//un
console.log(divELe.className);//box

注：由于class关键字，会冲突，因此获取类名用className

设置属性节点（新增、修改）

书写格式：元素节点.setAttribute(属性名,属性值)

例：divELe.setAttribute("name", "222");

删除属性节点

书写格式：元素节点.removeAttribute(属性名)

例：divELe.removeAttribute("name");

查找属性节点

书写格式：元素节点.hasAttribute(属性名)

例：divELe.hasAttribute("class")

返回布尔值

【扩展】

快捷方式

给label节点设置for值

let labelEle = document.querySelector("label");
labelEle.htmlFor = "F70";

注：for是关键字，不能直接加，且注意大写

修改input的type

let inpEle = document.querySelector("input");
inpEle.type = "checkbox";

自定义属性节点

创建自定义属性节点

书写格式：data-自定义名称

例：<input type="text" data-abc="123">（HTML侧）

获取自定义属性节点

书写格式：节点名.dataset.自定义名

例：

let inpEle = document.querySelector("input");
let info = inpEle.dataset.abc;
console.log(info);//123

更改自定义属性节点

书写格式：节点名.dataset.abc = 自定义

例：inpEle.dataset.abc = "f70";

input标签的abc属性就改为了f70

获取节点的class值

书写格式：节点名.classList

获取某个值：节点名.classList[0]

保留原节点的class值，在其基础上添加新的类名

书写格式：节点名.classList.add(属性值)

查找class值

书写格式：节点名.classList.contains(属性值)

例：secEle.classList.contains("box3");

[切换]

有则删，无则加（class值）

书写格式：节点.classList.toggle(属性值)

例：spanEle.classList.toggle("sxg");

注：改方法返回Boolean值，添加返回true，删除返回false。

删除class值

书写格式：节点.classList.remove(属性值)

选中前后的节点

获取下一个节点：节点.nextElementSibling

获取上一个节点：节点.previousElementSibling