js获取属性节点

2024-05-27 17:48| 来源: 网络整理| 查看: 265

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-自定义名称

例：（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

【本文地址】

公司简介

联系我们