HTML DOM 节点元素操作

悠悠 2024-04-19 10:47 70阅读 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"));

###  ###

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM 节点元素操作

一，判断属性 hasAttribute(‘属性名’) ：判断是否有某个属性 //3,判断属性是否存在 console.log(h1.hasAttri...

悠悠/ 2024年04月19日 10:47/ 0 赞/ 71 阅读

相关 html dom节点源码,HTML DOM children 属性

HTML DOM children 属性元素对象实例获取 body 元素的子元素集合： var c = document.body.children; 定义和用

Dear 丶/ 2022年10月09日 15:18/ 0 赞/ 208 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 340 阅读

相关 HTML dom 元素汇总

使用百分比来获取高度，必须要求定义了父容器高度，如果div的父容器没有定义高度，那么设置百分比无效。内联元素—inline 如之类的内联元素，内联元素对于宽度、高

我就是我/ 2022年06月02日 23:16/ 0 赞/ 213 阅读

相关 jQuery操作dom节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年06月02日 11:55/ 0 赞/ 292 阅读

相关 DOM元素节点查找练习

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

你的名字/ 2022年05月21日 05:46/ 0 赞/ 261 阅读

相关通过DOM关系获取元素节点和操作节点的基本方法

５大节点： HTML文档中的每个成分都是一个节点．（１）整个文档是一个文档节点（２）每个HTML标签是一个标签节点（３）包含在HTML标签中的文本是文本节点

青旅半醒/ 2022年05月17日 01:25/ 0 赞/ 292 阅读

相关利用DOM节点关系访问HTML元素

一介绍一旦获取了某个元素，由于元素实际与DOM树的某个节点对应，因此我们完全可以利用节点之间的父子关系、兄弟关系来访问HTML元素。下面应用利用节点关系访问HTML元

本是古典何须时尚/ 2022年05月12日 00:42/ 0 赞/ 234 阅读

相关 DOM元素子父节点的操作

:) 零散的注意事项 1. offsetLeft/offsetTop/offsetHeight/...都是值，无单位 2. 火狐是在页面加载完后才能得到

淩亂°似流年/ 2021年11月04日 15:28/ 0 赞/ 445 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 607 阅读