【JS-DOM】 html特性和DOM属性的区分与使用

LiujiaHuan13

已于 2022-07-16 13:50:49 修改

阅读量252

点赞数

文章标签： javascript html 前端

于 2022-06-06 19:58:13 首次发布

本文链接：https://blog.csdn.net/qq_39679797/article/details/125153144

版权

Attributes and properties

如果标签是 <body id=“page”>，那么 DOM 对象就会有 body.id=“page”

特性—属性映射并不是一一对应的

1.dom属性

创建新属性
添加新的方法
修改内建属性的原型(prototype)

2.html特性

解析：标准特性非标准特性
标准特性元素之间可见性
访问非标准特性

elem.hasAttribute(name) — 检查特性是否存在。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
elem.attributes //读取所有特性：属于内建 Attr 类的对象的集合，具有 name 和 value 属性。

html特征：1.大小写不敏感 2.值总是字符串类型

总结一句特性是写在html的，有标准和非标准

标准的会被自动翻译成DOM的属性

非标准的必须通过特殊的方法来访问

3.属性-特性同步

例外例如 input.value 只能从特性同步到属性，反过来则不行

4.DOM属性多类型

5.非标准特性

功能：

1.将自定义的数据从 HTML 传递到 JavaScript，或者用于为 JavaScript “标记” HTML 元素。

<!-- 标记这个 div 以在这显示 "name" -->
<div show-info="name"></div>
<!-- 标记这个 div 以在这显示 "age" -->
<div show-info="age"></div>

<script>
  // 这段代码找到带有标记的元素，并显示需要的内容
  let user = {
    name: "Pete",
    age: 25
  };

  for(let div of document.querySelectorAll('[show-info]')) {
    // 在字段中插入相应的信息
    let field = div.getAttribute('show-info');
    div.innerHTML = user[field]; // 首先 "name" 变为 Pete，然后 "age" 变为 25
  }
</script>

2.配合css做样式状态变化 场景：订单状态颜色变化

<style>
  /* 样式依赖于自定义特性 "order-state" */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>

<div class="order" order-state="pending">
  A pending order.
</div>

<div class="order" order-state="canceled">
  A canceled order.
</div>

这样子使用方便管理和更改

避免被归为标准特性 ：使用data-*
elem.dataset.* 获取到data-*特性
驼峰式调用：像 data-order-state 这样的多词特性可以以驼峰式进行调用：dataset.orderState

部分引用：javsscript.info

LiujiaHuan13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS-DOM】 html特性和DOM属性的区分与使用

如果标签是，那么 DOM 对象就会有 body.id=“page”特性—属性映射并不是一一对应的html特征：1.大小写不敏感 2.值总是字符串类型总结一句特性是写在html的，有标准和非标准标准的会被自动翻译成DOM的属性非标准的必须通过特殊的方法来访问功能：2.配合css做样式状态变化场景：订单状态颜色变化这样子使用方便管理和更改部分引用：javsscript.info......
复制链接

扫一扫