HTML DOM 节点元素操作

悠悠 2024-04-19 10:47 38阅读 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 条评论，38人围观）

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

相关阅读

相关 HTML DOM 节点元素操作

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

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

相关 HTML DOM节点操作

一，节点内容 innerHTML设置节点内容 <body> <div id="div"> 节点内容 ...

绝地灬酷狼/ 2024年04月19日 09:35/ 0 赞/ 33 阅读

相关 HTML DOM节点概述

一，概述 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 标准被分为 3 个不同的部分： 1. 核心 DOM ...

「爱情、让人受尽委屈。」/ 2024年04月19日 09:29/ 0 赞/ 32 阅读

相关 DOM操作 - 节点操作方式

DOM 树就是我们 html 结构中一个一个的节点构成的，不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点 DOM节点节点：页面的所有组成部

小咪咪/ 2023年10月14日 22:29/ 0 赞/ 100 阅读

相关 JavaScript HTML DOM 元素（节点）

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

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

相关 jQuery操作dom节点

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

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

相关 DOM元素节点查找练习

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

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

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

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

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

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

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

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

相关 JavaScript 操作HTML DOM元素

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

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