javascript - 获取 DOM 元素属性而不再次查询 DOM 并设置默认值(如果不存在)

Question

我使用以下方法获取 DOM 元素:

a = document.querySelector('[data-time]');

我想检查该元素是否具有其他特定属性。

如果有，我想获取它们的值或设置默认值。

我可以使用:

c = a.querySelector('[data-time-pre])

但我为每个属性调用 DOM。

所以我想到使用:

placeholder = a.attributes.placeholder

那么，在这种情况下，如果属性不存在，分配默认值的最简单方法是什么。

我找到了 hasOwnProperty('property1') 但我不确定我正在查找的属性是否继承，而且如果我需要使用多个 ifs有很多属性。

也许有这样的事情:

placeholder = (a.attributes.placeholder, 'default')

Answer 1

您可以执行以下操作:

• 将属性名称和默认值构造为 k/v 对。
• Array.map超过Object.keys属性/默认对。
• 如果该键不作为属性存在，请使用默认值进行设置。
• 返回现有或设置的属性。

const el = document.querySelector('#el')

const attrs = {
  // key : default value
  ['data-foo']: 'foo',
  ['data-bar']: 'bar',
  ['data-baz']: 'baz'
}

const results = Object.keys(attrs).map(key => {
  if (!el.hasAttribute(key))
    el.setAttribute(key, attrs[key])
   
  return { attr: key, value: el.getAttribute(key) }
})

console.log(results)

<div id="el" data-foo="hello-world"></div>