检查 HTML 元素是否需要源属性

Question

继续我之前的问题。我制作了一个辅助函数（见下文），用于将元素插入 DOM。该函数的一部分使用 'instanceof' 来确定 'this' 元素是否是 HTMLMediaElement 的实例，并通过参数 'elemSrc' 确定源属性。

我的问题：有没有办法检查一个元素是否'expecting'要定义的源属性？我问的原因是，然后我可以对 'expect' 的所有元素使用此函数来定义源属性。我知道我可以使用 instanceof 并取消每个使用 source 属性的元素，但如果可能的话我更喜欢更灵活的方式。

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;
          }
      }
    }

Answer 1

您可以检查 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>

Answer 2

这是更新后的函数：

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;
      }
  }
}

检查 HTML 元素是否需要源属性

Check if an HTML element is expecting a source attribute

javascript

src