Получение атрибутов элемента 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>