對象不支持此屬性或方法document.querySelector

Question

我在IE7測試一行代碼，但它給我下面的錯誤：

Object doesn't support this property or method and it refers to

這裏的問題線問題：

var checked = document.querySelector('[name="answer1"]:checked'); 

這是整個代碼

問題1：你喜歡訓練嗎？

<input name="q4" value="Yes" type="radio"> Yes 
<input name="q4" value="No" type="radio"> No 
<br> 
<button id="getval">cick here</button> 

<script type="text/javascript"> 
document.getElementById('getval').onclick = function() { 
    var checked = document.querySelector('[name="q4"]:checked'); 
    alert(checked ? checked.value : 'Not selected'); 
} 
</script> 

有沒有辦法解決這個問題？

Answer 1

舊的IE沒有querySelector。你必須使用一個引擎，如嘶嘶聲（這是在jQuery的是什麼），熱情等

Answer 2

在IE 9的CSS3選擇像您正在使用所支持的一個..

http://caniuse.com/queryselector

Answer 3

你可以參考creating-a-queryselector-for-ie-that-runs-at-native-speed 和adding-document-queryselectorall-support-to-ie-7

好吧，你可以使用jQuery $（「＃選擇」）作爲等於queryselector，您可以包括jQuery的爲。

Answer 4

querySelector是only available in IE8+。要通過IE7中的選擇器查詢，您需要諸如Sizzle之類的東西，它是jQuery中內置的CSS查詢選擇器代碼的獨立版本。或者，如果你喜歡的東西有點更輕，更無縫的，你可以使用填充工具，如一個described here，像這樣：

if (!document.querySelectorAll) { 
    document.querySelectorAll = function (selectors) { 
    var style = document.createElement('style'), elements = [], element; 
    document.documentElement.firstChild.appendChild(style); 
    document._qsa = []; 

    style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}'; 
    window.scrollBy(0, 0); 
    style.parentNode.removeChild(style); 

    while (document._qsa.length) { 
     element = document._qsa.shift(); 
     element.style.removeAttribute('x-qsa'); 
     elements.push(element); 
    } 
    document._qsa = null; 
    return elements; 
    }; 
} 

if (!document.querySelector) { 
    document.querySelector = function (selectors) { 
    var elements = document.querySelectorAll(selectors); 
    return (elements.length) ? elements[0] : null; 
    }; 
}