DOM操作-02-对节点属性进行获取、设置、删除操作

最新推荐文章于 2023-10-05 15:24:35 发布

金子塔上的大熊猫

最新推荐文章于 2023-10-05 15:24:35 发布

阅读量441

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41874591/article/details/116032091

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

对节点属性的获取
对节点属性的设置
对节点属性的删除
注意事项：
总结：

对节点属性的获取

三种方式：

元素节点.属性名;
元素节点[属性名];
元素节.getAttribute(“属性名”);

<body>
<div id="content" class="first01" title="title1">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    console.log(content.id);
    console.log(content.className);
    console.log(content.title);
    console.log('----------------------');
    console.log(content["id"]);
    console.log(content["className"]);
    console.log(content["title"])
    console.log('----------------------');
    console.log(content.getAttribute("id"));
    //用class即可
    console.log(content.getAttribute("className"));
    console.log(content.getAttribute("title"));
</script>
</body>

在这里插入图片描述
上面 console.log(content.getAttribute(“className”));结果为null，参数改为class就可以了。

对节点属性的设置

设置不经可以更改标签存在的属性值，还可以添加属性和该属性的值。

第一种方式

节点名.属性名=“值”

<body>
<div id="content" class="first01" title="title1">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    content.id="content100";
    content.className="content100";
    content.title="content100";
</script>
</body>

在这里插入图片描述

第二种方法

元素节点[属性名]=“值”

<body>
<div id="content" class="first01" title="title1">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    content["id"]="content99";
    content["className"]="content99";
    content["title"]="content99";
</script>
</body>

在这里插入图片描述

第三种方法（推荐使用）

元素节点.setAttribute(“属性名”,“属性值”);
前两种是直接操作标签，该种把标签作为DOM节点

<body>
<div id="content" class="first01" title="title1">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    content.setAttribute("id","content199");
    //注意：这里是class，不是className
    content.setAttribute("class","content199");
    content.setAttribute("title","content199");
</script>
</body>

在这里插入图片描述

对节点属性的删除

元素节点.removeAttribute(属性名);

<body>
<div id="content" class="first01" title="title1">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    content.removeAttribute("id");
    content.removeAttribute("class");
    content.removeAttribute("title");
</script>
</body>

在这里插入图片描述

注意事项：

原始属性和非原始属性

原始属性：预设的
非原始属性：用户自定义的

属性不同对获取方法的影响

原始属性

由上面测试可知：对获取方法没有影响

非原始属性

只有getAttribute()方法正常获取

<body>
<div id="content" class="first01" title="title1" aa="aaaa">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    console.log(content.aa);
    console.log(content["aa"]);
    console.log(content.getAttribute("aa"));
</script>
</body>