Проверьте, ожидает ли элемент HTML атрибут источника - PullRequest
Новая
       13

Проверьте, ожидает ли элемент HTML атрибут источника

0 голосов
/ 01 марта 2019

Исходя из моего предыдущего вопроса.Я сделал вспомогательную функцию (см. Ниже) для вставки элементов в DOM.Часть функции использует instanceof, чтобы определить, является ли элемент this экземпляром HTMLMediaElement, и определяет атрибут источника с помощью аргумента elemSrc.

Мой вопрос: Есть ли способ проверить, ожидает ли элемент определения атрибута источника?Причина, по которой я спрашиваю, состоит в том, что я мог бы затем использовать эту функцию для всех элементов, которые «ожидают» иметь определенный атрибут источника.Я знаю, что могу использовать instanceof & reel для каждого элемента, который использует атрибут источника, но я бы предпочел более плавный способ, если это возможно. 

function insertElem(numberOfElems, elemTag, elemId, elemClass, parentSelector, elemSrc){
    /*
    * numberOfElements:-    Pass in a whole integer.
    * elemTag:-             Pass in the element tag type (inside "" or '').              
    * elemId:-              Pass in a name for the element id (inside "" or ''),
                            an integer is appended to the id name by the for loop.
    * elemClass:-           Pass in a name for element class (inside "" or '').
    * parentSelector:-      Pass in the identifier of the parent element (inside "" or '')
                            * querySelector prefixes:    # = id
                                                         . = class
                                                         none = tag 
    *elemSrc:-              Pass in the source media url (inside "" or ''). 
    */      
      if (numberOfElems > 1) {
        for (i = 0; i < numberOfElems; i++) {
          var elem = this[elemId + i];
          elem = document.createElement(elemTag);
          elem.id = elemId + '_' + i;
             if (elemClass) {
                elem.className = elemClass;
             }
          parentEl = document.querySelector(parentSelector);
          parentEl.appendChild(elem);
            if(elem instanceof HTMLMediaElement) {
                elem.src = elemSrc;
            }
        }
      } else {
        var elem = this[elemId];
        elem = document.createElement(elemTag);
        elem.id = elemId;
            if (elemClass) {
                elem.className = elemClass;
            }
        parentEl = document.querySelector(parentSelector);
        parentEl.appendChild(elem);
           if(elem instanceof HTMLMediaElement) {
                elem.src = elemSrc;
          }
      }
    }

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вот обновленная функция: 

function insertElem(numberOfElems, elemTag, elemId, elemClass, parentSelector, elemSrc){
/*
* numberOfElements:-    Pass in a whole integer.
* elemTag:-             Pass in the element tag type (as a string).              
* elemId:-              Pass in a name for the element id (as a string),
                        an integer is appended to the id name by the for 
                        loop.
* elemClass:-           Pass in a name for element class (as a string).
* parentSelector:-      Pass in the identifier of the parent element 
                        (as a string).
                        * querySelector prefixes:    # = id
                                                     . = class
                                                     none = tag 
*elemSrc:-              Pass in the source media url (as a string). 
*/      
  if (numberOfElems > 1) {
    for (i = 0; i < numberOfElems; i++) {
      var elem = this[elemId + i];
      elem = document.createElement(elemTag);
      elem.id = elemId + '_' + i;
         if (elemClass) {
            elem.className = elemClass;
         }
      parentEl = document.querySelector(parentSelector);
      parentEl.appendChild(elem);
        if('src' in elem) {
            elem.src = elemSrc;
        }
    }
  } else {
    var elem = this[elemId];
    elem = document.createElement(elemTag);
    elem.id = elemId;
        if (elemClass) {
            elem.className = elemClass;
        }
    parentEl = document.querySelector(parentSelector);
    parentEl.appendChild(elem);
       if('src' in elem) {
            elem.src = elemSrc;
      }
  }
}
0 голосов
/ 01 марта 2019

Вы можете проверить, существует ли src как ключ в элементе HTML. 

if('src' in elem){
   //src is a valid attribute for elem
}

Демонстрация: 

<label>Element Type: <input type="text" id="elemType"/></label>
<br/>
<button id="process">
Process
</button>
<p id="result">
</p>
<script>
var elemTypeInput = document.getElementById("elemType"), processBtn = document.getElementById("process"), res = document.getElementById("result");
processBtn.addEventListener("click", function(e){
	var elemType = elemTypeInput.value;
  if(!elemType.trim()){
  	res.textContent = "Element Type can not be empty!";
  } else {
    try{
    var elem = document.createElement(elemType);
    var hasSrc = 'src' in elem;
    res.textContent = elemType + " element has src attribute: " + hasSrc;
    } catch(e){
    	res.textContent = "Please enter a valid element type.";
    }
    }
});
</script>
...