节点操作大全(二)~操作节点的属性

下面是对节点属性操作的整理，希望可以帮助到有需要的小伙伴~
跟小编来康康吧

文章目录

获取节点的属性值
设置节点的属性值
删除节点的属性

获取节点的属性值

方式1：

元素节点.属性;
元素节点[属性]; // 注意：中括号里面的属性名要加引号

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取属性</title><style>#a {width: 100px;height: 100px;background-color: aqua;}#b {width: 100px;height: 100px;background-color: blueviolet;}</style>
</head>
<body><div id="a"></div><div id="b"></div><script>// 方式1：元素节点.属性;var a = document.getElementById("a");console.log(a.id);var b = document.getElementById("b");console.log(b.id);// 方式2：元素节点[属性];   注意：中括号里面的属性名要加引号console.log(a["id"]);console.log(b["id"]);</script>
</body>
</html>

结果：

方式2：（推荐）

元素节点.getAttribute("属性名");

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取属性</title><style>.a {width: 100px;height: 100px;background-color: blueviolet;}#b {width: 100px;height: 100px;background-color: cadetblue;}</style>
</head>
<body><div class="a"></div><div id="b"></div><script>var a = document.getElementsByClassName("a")[0];var b = document.getElementById("b");console.log(a.getAttribute("class"));console.log(b.getAttribute("id"));</script>
</body>
</html>

获取节点属性方式1：元素节点.属性; 和方式2：元素节点.getAttribute(“属性名”); 的区别：

元素节点.属性是直接操作标签
元素节点.getAttribute(“属性名”); 的区别是把标签作为DOM节点

设置节点的属性值

方式1：setAttribute() 方法
语法格式：

setAttribute("属性名","属性值");

如果元素中存在指定的属性，该属性的值会被更新；否则，则 setAttribute() 方法将为元素创建该属性并赋值
实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设置属性值</title><style>.red {width: 100px;height: 100px;background-color: red;}#yellow {width: 100px;height: 100px;background-color: yellow;}#blue {width: 100px;height: 100px;background-color: blue;}</style></head>
<body><div name="one"></div><div name="two" id="yellow"></div><script>// 获取 name属性为one的 divvar div1 = document.getElementsByName("one")[0];// 给获取的div添加属性，由于在style里面设置了属性，所以该div会有宽高，会变成红色// 原来 name为one的div没有class属性，通过setAttribute()，给他设置了一个属性并赋值 // 相当于 <div name="one" class="red"></div>div1.setAttribute("class","red");// 获取 name属性为two的 divvar div2 = document.getElementsByName("two")[0];// 给获取的id设置blue属性并赋值，由于该div原来已经有id属性并有属性值了// 当重新给该div设置id属性并赋值的时候，新的id会覆盖原来旧的iddiv2.setAttribute("id","blue");</script>
</body>
</html>

删除节点的属性

语法格式：

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

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>删除节点</title>
</head>
<body><ul id="fruit"><li id="apple">苹果</li><li class="banane">香蕉</li><li>橘子</li></ul><script>var ul = document.getElementById("fruit");var li2 = ul.children[1];// 删除 香蕉 的class属性li2.removeAttribute("class");console.log(li2);</script></body>
</html>

删除属性前：

删除属性后：

节点操作大全(二)~操作节点的属性相关推荐

计算机word操作大全,Word操作练习题大全(共题).doc
Word操作练习题大全(共题) Word2003操作练习题大全(共20题) Word操作练习题操作题例题与解析 [ 例3-11 ]:将以下素材按要求排版. (1).将标题字体设置为"华文行 ...
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题.这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下.现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助. 好吧,我们先 ...
DMO简介和DOM操作（二）
DMO简介和DOM操作(二) 节点的获取.设置和删除 1.获取节点元素节点.getAttribute(属性名) 2.设置节点元素节点.setAttribute(属性名,新的属性值) 3.删除节点 ...
关于数据结构中的叶节点和二度节点的关系（通俗的理解）。
简单记录一下自己的一些地方和对于这个问题我的一些见解. 有说的不好的地方欢迎指正. 这里只给出一种理解,另一种利用公式进行理解的,我就不写了,因为csdn里面太多了! 先说结论: 叶节点的数目 = 二 ...
DOM节点操作大全(一)
下面是对DOM节点操作的整理,有创建节点.插入节点.删除节点.复制节点希望可以帮助到有需要的小伙伴哦在下一篇博客小编会整理DOM节点属性的知识点文章目录创建节点插入节点删除节点复制节点 ...
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、查看/修改/删除属性节点、创建和增加节点）
一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( ) 按元素的name名称来访问,返回带有指定名称的 ...
DOM（三）：节点操作——获取父子兄节点（查）、添加和删除元素节点
一.节点之间的层级:父子兄节点主要有父子兄关系 1.父节点操作语法:子节点.parentNode,得到的是一个元素不是集合比如我选了一个类名叫zzy的元素 var zzy = document ...
W3C DOM操作之创建新节点
DOM树 vs DisplayList显示列表两个很相似的东西,关于显示列表的教程看flash里吧,这里主要看看如何使用js操作DOM树 1.为DOM树添加节点,首先得创建一个 DOM的节点有2个 ...
AVL树添加节点后的平衡操作（一）逻辑分析：左旋、右旋、双旋（超详细图解）
AVL树 AVL树是最早发明的自平衡二叉搜索树之一,其名字来源于两位发明它的科学家G. M. Adelson-Velsky 和 E. M. Landis(来自苏联的科学家). AVL树的特点 AVL树 ...