2017-08-09 64 views
1

我試圖做這樣的事情(僞代碼)值:的javascript:檢查是否元素可以接受

if (element can accept a value) 
    element.value = "my new value"; 
else 
    element.innerHTML = "my new value"; 

所以對於輸入,文本區域等將設置value,但股利或跨度將設置爲innerHTML

或者我應該簡單地設置valueinnerHTML,因爲innerHTML對輸入元素是無害的嗎?

+1

爲什麼你需要這樣做?爲什麼不知道元素是輸入還是內容元素? – Barmar

+1

typeof element.value!='undefined' –

+0

我不認爲有一個乾淨的方法來做到這一點,但你可以嘗試這樣的事情: 'if(element.tagName =='input'|| element.tagName =='testarea'|| ...)' –

回答

0

正如評論所說,你可以使用

if (element.nodeName == "INPUT" || element.nodeName == "TEXTAREA") {} 

"INPUT""TEXTAREA"是您正在使用的標籤,因此無論加那些你想檢測你認爲合適。

Here is a more in-depth explanation of nodeName


作爲一個側面說明,你可以顯著簡化這

if (element.nodeName != "DIV") {} 

但這隻能做,如果你確定獲取傳遞中的任何元素將是一個類型的輸入或的div

0

基本在運營商應該做的伎倆

function hasValue(elem) { 
 
    return 'value' in elem 
 
} 
 

 
console.log('input', hasValue(document.querySelector('#t1'))) 
 
console.log('div', hasValue(document.querySelector('#t2'))) 
 
console.log('select', hasValue(document.createElement('select'))) 
 
console.log('textarea', hasValue(document.createElement('textarea'))) 
 
console.log('h1', hasValue(document.createElement('h1'))) 
 
console.log('span', hasValue(document.createElement('span')))
<input type="text" id="t1" /> 
 
<div id="t2"></div>

0

可以使用attributes屬性來獲取標籤名

function updateElement(elemId) { 
 
    var attr = document.getElementById(elemId).attributes; 
 

 
    if (attr[0].ownerElement.tagName === 'INPUT') { 
 
    document.getElementById(elemId).value = 'adding to value' 
 
    } else { 
 
    document.getElementById(elemId).innerHTML = 'added in inner html' 
 
    } 
 

 
} 
 

 
updateElement('inputElem') 
 
updateElement('divElem')
<input id='inputElem'> 
 
<div id='divElem'></div>

0

您可以使用in運營商,以檢查是否任何元素具有value屬性 - 看演示如下:

Array.prototype.forEach.call(document.body.children, function(element) { 
 
    if ('value' in element) 
 
    element.value = "form"; 
 
    else 
 
    element.innerHTML = "not form"; 
 
});
<input/> 
 
<div></div> 
 
<textarea></textarea> 
 
<select> 
 
    <option value="not form">Not form</option> 
 
    <option value="form">Form</option> 
 
</select>

如果您選擇了jQuery,還有一個更簡單的選項:input selelctor - 請參閱以下演示:

$('body').children().each(function() { 
 
    if ($(this).is(':input')) 
 
    $(this).val("form"); 
 
    else 
 
    $(this).html("not form"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input/> 
 
<div></div> 
 
<textarea></textarea> 
 
<select> 
 
    <option value="not form">Not form</option> 
 
    <option value="form">Form</option> 
 
</select>

相關問題