Attributes 和 properties区别和联系？

Attributes 和 properties区别和联系？

当浏览器加载页面时，它会“读取”（或者称之为：“解析”）HTML 文本并生成 DOM 对象。对于元素节点，大多数 HTML 特性会自动变成 DOM 对象的属性.

HTML的特性和DOM对象的属性

并不是每个HTML文本生成DOM对象时都可以创建所有属性，只有对应的标准化特性才可以，比如每个元素都有的id 和input 含有type

如果没有自动生成想要的属性，可以自己添加

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

<body something="non-standard">
  <script>
    alert(document.body.getAttribute('something')); // non-standard
  </script>
</body>

getAttribute('About')大小写时不区分的，attributes 以 name 和 value 这样的键—值对收集在一个可迭代对象里

特性与属性同步

<input>

<script>
  let input = document.querySelector('input');

  // 特性 => 属性
  input.setAttribute('id', 'id');
  alert(input.id); // id（更新了）

  // 属性 => 特性
  input.id = 'newId';
  alert(input.getAttribute('id')); // newId（更新了）
</script>

有些只能从单向传递

<input>

<script>
  let input = document.querySelector('input');

	// 特性 => 属性
  input.setAttribute('value', 'text');
  alert(input.value); // text
	
	// 这操作无效 属性 => 特性
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text（没有更新！）
</script>

当属性值是布尔值

<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 特性值是：空字符串
  alert(input.checked); // 属性的值是：true
</script>

当属性值是对象时

<div id="div" style="color:red;font-size:120%">Hello</div>

<script>
  // 字符串
  alert(div.getAttribute('style')); // color:red;font-size:120%

  // 对象
  alert(div.style); // [object CSSStyleDeclaration]
  alert(div.style.color); // red
</script>

还有一个非常重要的不同点。DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西！

例如 href DOM 属性总是一个绝对路径的，而特性值只包含相对路径或者只包含 #hash 这一部分。

这里有一个例子：

<a id="a" href="#hello">link</a>
<script>
  // 特性
  alert(a.getAttribute('href')); // #hello

  // 属性
  alert(a.href ); // 绝对路径 http://site.com/page#hello
</script>

但是自定义的特性也存在问题。如果我们使用了一个非标准化的特性，之后却变成了一个标准化的值并用来做其他事情，HTML 语言一直在发展，越来越多的标准化特性解决了开发者的开发需求。这就是一个不可控的例子。

为了解决这个冲突产生了 data-* 这个特性。

所有以 “data-” 开头的特性值可以给编程人员正常使用，同时它还是 dataset 合法值。

例如, 如果一个 elem 有一个键名是 "data-about" 的特性，那么可以通过 elem.dataset.about 取到这个合法值。

像这样：

<body data-about="Elephants">
<script>
  alert(document.body.dataset.about); // Elephants
</script>

<!DOCTYPE html>
<html>
<body>

  <div data-widget-name="menu">Choose the genre</div>

  <script>
    console.log(document.body.firstElementChild.dataset.widgetName)
  </script>
</body>
</html>

posted on 2019-08-06 11:03  2481  阅读(547)  评论(0)  编辑  收藏  举报

导航