获取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>