从我的上一个问题开始。我制作了一个辅助功能(请参见下文),以将元素插入DOM中。该函数的一部分使用'instanceof'来确定"此"元素是否是htmlmediaelement的实例,并通过参数" elemsrc"来确定源属性。
我的问题:有没有办法检查元素是否"期望"定义源属性?我问的原因是,然后我可以将此功能用于所有"期望"具有源属性定义的元素。我知道我可以使用实例&撤销使用源属性的每个元素,但如果可能的话,我更喜欢一种滑动的方式。
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;
}
}
}
您可以检查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>
这是更新的函数:
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;
}
}
}