DOM中的属性和属性

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

✨ 前言

概述

• DOM元素中有属性和属性两种类型的数据。
• 属性 - 是与元素相关的数据。
• 属性 - 是与在HTML中定义的属性相对应的DOM对象。

​

✨ 正文

属性

• 属性反映了DOM元素的状态。它们可读可写。
• 例如:
  • node.nodeType - 元素类型
  • node.textContent - 元素文本
  • input.value - 输入的值
  • a.href - 链接
• 可以使用nodeType/textContent等直接读取。
• 也可以直接修改,如input.value=newValue。

DOM 节点是常规的 JavaScript 对象。我们可以更改它们。

例如，让我们在 document.body 中创建一个新的属性：

document.body.myData = {
  name: 'Caesar',
  title: 'Imperator'
};

alert(document.body.myData.title); // Imperator

我们也可以像下面这样添加一个方法：

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY（这个方法中的 "this" 的值是 document.body）

 我们还可以修改内建属性的原型，例如修改 Element.prototype 为所有元素添加一个新方法：

Element.prototype.sayHi = function() {
  alert(`Hello, I'm ${this.tagName}`);
};

document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY

特性

• 属性对应HTML属性,是元素在HTML源码中的属性。
• 可通过setAttribute/getAttribute访问属性。
• 例如:
  • elem.getAttribute('id') - 获取id属性
  • elem.setAttribute('id', 'test') - 设置id属性
• 修改属性会自动更新属性。
  • 但修改属性不会立即改变属性。

区别

• 属性直接反映元素状态,属性Indirectly反映元素状态。
• 修改属性会立即更新属性,但反之则不会。

转化

• 属性和属性之间可以互相转化。
• 属性->属性:elem.setAttribute(name, elem[name])
• 属性->属性:elem[name] = elem.getAttribute(name)

总结

• 属性是DOM对象的属性,直接反映状态。
• 属性是HTML属性,通过setAttribute/getAttribute访问。
• 要注意它们之间的区别,在需要时可以互相转化。

• 特性（attribute）—— 写在 HTML 中的内容。
• 属性（property）—— DOM 对象中的内容。

简略的对比：

	属性	特性
类型	任何值，标准的属性具有规范中描述的类型	字符串
名字	名字（name）是大小写敏感的	名字（name）是大小写不敏感的

操作特性的方法：

• elem.hasAttribute(name) —— 检查是否存在这个特性。
• elem.getAttribute(name) —— 获取这个特性值。
• elem.setAttribute(name, value) —— 设置这个特性值。
• elem.removeAttribute(name) —— 移除这个特性。
• elem.attributes —— 所有特性的集合。

        在大多数情况下，最好使用 DOM 属性。仅当 DOM 属性无法满足开发需求，并且我们真的需要特性时，才使用特性，例如：

• 我们需要一个非标准的特性。但是如果它以 data- 开头，那么我们应该使用 dataset。
• 我们想要读取 HTML 中“所写的”值。对应的 DOM 属性可能不同，例如 href 属性一直是一个 完整的 URL，但是我们想要的是“原始的”值。

✨ 结语

        这就是该JavaScript教程中关于DOM属性和属性的内容,我将其整理成博客文章的形式,包含概述、属性、属性、区别、转化和总结几个方面,旨在帮助理解属性和属性之间的区别,让你可以正确使用。请确认是否需要修改或补充。

        理解DOM中的属性和属性及其区别,是掌握DOM编程的一个重要基础。正确使用属性和属性可以让我们更容易地访问和操作DOM元素,使JavaScript代码可读性更强,也更容易维护。

        在编写JavaScript操作DOM的代码时,我们应该注意区分属性和属性,知道它们的用途以及何时使用。属性直接反映元素状态,而属性与HTML属性对应。两者可以相互转化。

        学习DOM编程的第一步就是熟悉元素的各种属性和属性。这样,我们才能自如地读写DOM,实现各种效果和交互。同时,也要适当利用setAttribute/getAttribute等方法操作属性。

        希望这篇文章可以帮助大家对DOM属性和属性有一个整体的理解,掌握它们的区别和转换,在DOM编程中可以得心应手。这也是成为优秀JavaScript开发者的重要一环。

        

​

原文地址：https://blog.csdn.net/qq_41152573/article/details/135930827

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！