HTML DOM 节点元素操作

最新推荐文章于 2022-10-31 17:57:09 发布

Jay·Yuen

最新推荐文章于 2022-10-31 17:57:09 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/Yuanriver/article/details/100925971

版权

HTML DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，判断属性

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

<body>
    <h1 id="title" class="titleClass" style="margin-top: 20px">
        class属性
    </h1>
</body>

<script>
    let h1 = document.getElementById("title");
    console.log(h1.className);
    h1.className = "titleClass2";
</script>

七，添加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"));

Jay·Yuen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录