How to click multiple instances of the same icon on a webpage? (Javascript)
I want to write a script that will click every instance of a certain icon. The following code is from the source that is what I want to click on. It has a onclick event defined, I just don't know how to search the page for these icons and then click on them. Can anyone help? Thanks.
<dl class="recommend">
<dt class='recs'>
<a href="javascript://" onclick="RecSpy('article', '6107445', 'tippers'); return false;">1</a>
</dt>
<dd>
<a href="javascript:void(0);" onclick="RecommendItem(1,'article','6107445','1','recommendstatus_article6107445'); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();">
<img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' />
</a>
</dd>
<dt class='tippers'>
<a href="javascript://" style='color: #969600;' onclick="RecSpy('article', '6107445', 'tippers'); return f开发者_如何学编程alse;"></a>
</dt>
<dd>
<a href="javascript:void(0);" onmouseover="return overlib('GeekGold Tip', WRAP );" onmouseout="nd();" onClick="GeekGoldTip(0,'article','6107445','recommendstatus_article6107445'); return false;">
<img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' />
</a>
</dd>
<dd>
<a href="javascript:void(0);" onclick="RecommendItem(0,'article','6107445','','recommendstatus_article6107445', 'article6107445' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();">
<img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif'/>
</a>
</dd>
<dt class='thumbsdown'></dt>
</dl>
If not using jQuery:
function fireClick(elem)
{
if (!elem) return;
if (document.dispatchEvent)
{
// W3C
var oEvent = document.createEvent("MouseEvents");
oEvent.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, elem);
elem.dispatchEvent(oEvent);
}
else if (document.fireEvent)
{
// IE
elem.click();
}
}
var images = document.getElementsByTagName('img'),
i,
len = images.length,
image;
for (i=0; i<len; i++)
{
image = images[i];
if (image.className === 'icon')
{
fireClick(image.parentNode);
}
}
fireClick()
remorselessly poached from here.
Edit re: OP comment "The first <dd><a href="javascript:void(0);"
I want to click"
function fireClick(elem)
{
if (!elem) return;
if (document.dispatchEvent)
{
// W3C
var oEvent = document.createEvent("MouseEvents");
oEvent.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, elem);
elem.dispatchEvent(oEvent);
}
else if (document.fireEvent)
{
// IE
elem.click();
}
}
var images = document.getElementsByTagName('img'),
i,
len = images.length,
image;
for (i=0; i<len; i++)
{
image = images[i];
if (image.className === 'icon' && image.parentNode.nodeName === 'A' && image.parentNode.parentNode.nodeName === 'DD')
{
fireClick(image.parentNode);
break;
}
}
if using jQuery:
$('img.icon').parent().click();
if using native DOM manipulation (no jQuery) something like this:
var icons = document.getElementsByTagName('img');
for(var i = 0; i < icons.length; i++){
if(icons[i].className == 'icon'){
icons[i].parentNode.onclick();
}
}
Edit: added native javascript code as well.
(isn't it obvious however with this that jQuery is a great addition?)
精彩评论