【EASYDOM系列教程】之属性操作

BigNerdCoding 发布于2019-08-21 11:59 / 3213人阅读

摘要：对象提供了一些方法实现元素的属性操作，这种操作要比对象提供的方法操作属性节点要更便捷。值得注意的是如果指定的属性不存在，则返回或空字符串。如果删除的属性不存在的话，不会引发任何异常。

Element 对象提供了一些方法实现 HTML 元素的属性操作，这种操作要比 Node 对象提供的方法操作属性节点要更便捷。

获取指定元素的属性

Element 对象提供了 getAttribute() 方法用于获取指定元素的属性值，其语法结构如下:

var attribute = element.getAttribute(attributeName);

在上述语法结构中，调用 getAttribute() 方法的 element 表示指定的元素，传递的参数 attributeName 则表示指定的属性名，得到的是指定属性对应的值。

值得注意的是: 如果指定的属性不存在，则返回 null 或 "" （空字符串）。

我们可以通过以下示例代码，学习 getAttribute() 方法的具体使用:

var btn = document.getElementById("btn");
var className = btn.getAttribute("class");
console.log(className);

设置指定元素的属性

Element 对象提供了 setAttribute() 方法用于设置指定元素的属性值，其语法结构如下:

element.setAttribute(name, value);

在上述语法结构中，调用 setAttribute() 方法的 element 表示指定的元素，传递的参数 name 表示设置指定的属性名，value 表示设置指定属性的值。

值得注意的是: 如果该属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。

我们可以通过以下示例代码，学习 setAttribute() 方法的具体使用:

var btn = document.getElementById("btn");
var className = btn.getAttribute("class");
className += " animate";
btn.setAttribute("class",className);

删除指定元素的属性

Element 对象提供了 removeAttribute() 方法用于删除指定元素的属性，其语法结构如下:

element.removeAttribute(attrName);

在上述语法结构中，调用 removeAttribute() 方法的 element 表示指定的元素，传递的参数 attrName 则表示删除的属性名。

值得注意的是:

删除属性尽量使用 removeAttribute() 方法，而不是调用 setAttribute() 方法将指定属性的值设置为 null。

如果删除的属性不存在的话，不会引发任何异常。

我们可以通过以下示例代码，学习 removeAttribute() 方法的具体使用:

var btn = document.getElementById("btn");
btn.removeAttribute("class");

判断是否含有指定属性

Element 对象提供了 hasAttribute() 方法用于判断是否含有指定的属性，其语法结构如下:

var result = element.hasAttribute(attrName);

在上述语法结构中，调用 hasAttribute() 方法的 element 表示指定的元素，传递的参数 attrName 则表示要判断的属性名。

而 result 则是 hasAttribute() 方法的返回值，是一个 Boolean 类型的值。如果结果为 true，则表示含有指定的属性；如果结果为 false，则表示不含有指定的属性。

我们可以通过以下示例代码，学习 hasAttribute() 方法的具体使用:

var btn = document.getElementById("btn");
var result = btn.hasAttribute("class");
console.log(result);

判断是否含有属性

Element 对象提供了与 hasAttribute() 方法相似的 hasAttributes() 方法用于判断是否含有属性，其语法结构如下:

var result = element.hasAttributes();

在上述语法结构中，调用 hasAttribute() 方法的 element 表示指定的元素，result 则是 hasAttributes() 方法的返回值，是一个 Boolean 类型的值。

值得注意的是: 该方法在某些浏览器中，已被废弃。

我们可以通过以下示例代码，学习 hasAttributes() 方法的具体使用:

var btn = document.getElementById("btn");
var result = btn.hasAttributes();
console.log(result);

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

云服务器海外云主机系列之系列之二架构之坑系列 linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87321.html

【EASYDOM系列教程】之 Element 对象

摘要：而标准规范中提供了对象，主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象，而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Element 对象，该对象提供了 HTML 页面中所有元素所具有的属性和方法。我们都知道 DOM 标准规范中提供了 Nod...

jeyhan 2019-08-21 11:55 评论0 收藏0
【EASYDOM系列教程】之Node介绍

摘要：对象的作用树结构主要是依靠节点进行解析，称为节点树结构。对象的继承链关系对象是继承于对象的，是一个用于接收事件的对象。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Node 对象，该对象主要提供了用于解析 DOM 节点树结构的属性和方法。 Node 对象的作用 DOM 树结构主要是依靠节点进行解析，...

oliverhuang 2019-08-20 18:16 评论0 收藏0
【EASYDOM系列教程】之创建页面元素

摘要：对象提供了可以创建元素节点属性节点和文本节点的方法，方便更新页面中的元素。是返回值，表示创建的元素。最后，通过方法创建属性节点，并设置了属性值为，再将该属性节点添加到新创建的元素中。 Document 对象提供了可以创建元素节点、属性节点和文本节点的方法，方便 DOM 更新 HTML 页面中的元素。创建元素节点 Document 对象提供了 createElement() 方法创建元...

nifhlheimr 2019-08-20 18:04 评论0 收藏0
【EASYDOM系列教程】之获取内联样式

摘要：回顾什么是内联样式所谓内联样式，就是通过页面元素的属性为当前元素定义样式。对象提供的属性和方法可以帮助我们获取样式的具体内容。遍历对象由于对象具有属性，返回该对象的属性的数量。方法通过获取的样式属性名，这种方式也可以通过方式进行替换。回顾什么是内联样式所谓内联样式，就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。以下代码示例，就是通过 style 属...

xiaodao 2019-08-22 11:05 评论0 收藏0
【EASYDOM系列教程】之遍历元素

摘要：对象提供了一系列的属性和方法用来利用元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考元素树一节有关元素之间关系的内容。该属性获取一个包含指定元素的所有子元素的集合。值得注意的是如果当前元素无子节点，则属性返回。 Element 对象提供了一系列的属性和方法用来利用 DOM 元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考《DOM 元素树》一...

codeGoogle 2019-08-21 12:00 评论0 收藏0