Javascript函数在IE中返回undefined

Question

我遇到了这个代码的问题,它在IE以外的所有浏览器上工作.

HTML

<div class="separator">
<a href="http://www.domain.com/images/s1920/original.jpg">
<img height="250" src="http://www.domain.com/images/s400/photo.jpg" />
</a>
</div>

JAVASCRIPT

<script type='text/javascript'>
var ImageSource = document.getElementsByClassName('separator')[0].getElementsByTagName('a')[0].href;
ImageSource = ImageSource.replace(/0\//, '0-d/');
</script>

它按预期工作,但当我在IE上测试它返回此错误,

Message: Object doesn't support this property or method

可能是什么问题呢？

Answer 1

.getElementsByClassName IE8或更早版本不支持.

您可以使用.querySelector(),它可以在IE8和所有其他现代浏览器中使用.

var ImageSource = document.querySelector('.separator').getElementsByTagName('a')[0].href;

请注意,querySelector()返回单个元素(因此[0]在上面的代码中没有后面的元素).在给定的示例中,您只需要一个元素,但如果您想要多个元素.getElementsByClassName(),那么您可以使用.querySelectorAll().

另请注意,以上所有内容仅适用于IE8及更高版本.如果您需要支持IE7,那么您将不得不寻找另一种解决方案.可能你最好的选择是jQuery,因为IE7没有内置的原生解决方案.

希望有所帮助.