Run results for: getElementById + querySelector vs querySelector

Run details:
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Browser: Chrome 86
Operating system: Windows
Device Platform: Desktop
Date tested: 3 years ago
Test name	Executions per second
selector	273846.5 Ops/sec
get and selector	2740842.0 Ops/sec
HTML Preparation code:
<body class="lang_pl">
		<div id="tutorials">
			<div class="avatar"></div>
			<div class="bubble">
				<div class="container"></div>
				<div class="controlls"></div>
			</div>
		</div>
		<div id=loading>
			<span id="_t1">...</span>
			<div class="progressbar"><div class="bar"></div></div>
			<div class="progressInfo"></div><div class="helptxt" id="_t2">...</div>
		</div>
		<div id=msg></div>

        <div id=staminashop>
			<div class=a1></div>
			<div style="text-align:center;" class=a2>
				<div id="_t3newWrapper"><b id="_t3new"></b></div>
				<span><b id="_t3"></b></span>
				<div class="stamina_pay_options">
					<div class="st_pay_wrapper"><span id="st_pay_1"></span><button onclick="return staminaShopOptionChoose(1)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(1, true)"  class="bal_pay_increase active"></button></div>
					<div class="st_pay_wrapper"><span id="st_pay_2"></span><button onclick="return staminaShopOptionChoose(7)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(7, true)"  class="bal_pay_increase active"></button></div>
					<div class="st_pay_wrapper"><span id="st_pay_8"></span><button onclick="return staminaShopOptionChoose(30)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(30, true)" class="bal_pay_increase active"></button></div>
				</div>
			</div>
			<!--<div class=a3><button id=p_pay class=bal_pay></button><button id=p_cancel onclick="return hideStaminaShop()" class=bal_cancel></button></div>-->
			<div class=a3><button id=p_cancel onclick="return hideStaminaShop()" class=bal_cancel></button></div>
		</div>

        <div id="upgradeclandepoalert">
            <div class=a1></div>
            <div style="text-align:center;" class=a2>
                <span><b id="upgrade_alert_str"></b></span>
                <div class="clan_depo_pay_options">
                    <div class="clan_depo_pay_wrapper"><span id="clan_depo_pay_1"></span><button id=clan_depo_opt_1 onclick="_g('clan&a=depo&op=upgrade&pay=z')" class="bal_pay active"></button></div>
                    <div class="clan_depo_pay_wrapper"><span id="clan_depo_pay_2"></span><button id=clan_depo_opt_2 onclick="_g('clan&a=depo&op=upgrade&pay=s')" class="bal_pay active"></button></div>
                </div>
            </div>
            <div class=a3><button id=clan_depo_cancel onclick="return hideUpgradeClanDepoAlert()" class=bal_cancel></button></div>
        </div>


		<div id=alert>
			<div class=a1></div>
			<div class=a2></div>
			<div class=a3><button id=a_ok class=bal_ok></button><button id=a_cancel class=bal_cancel></button></div>
		</div>

		<div id="captcha"></div>

		<div id="poll"></div>

		<div id="en_wnd" class="en-window-wrapper">
			<div class="header-wrapper">
				<div class="right-border"></div>
				<div class="left-border"></div>
				<div class="content">
					<div class="header-text-wrapper" id="enwnd_header_txt"></div>
				</div>
				<div class="close-button"></div>
			</div>
			<div class="content-wrapper">
				<div class="background-wrapper">
					<div class="border top"></div>
					<div class="border bottom"></div>
					<div class="border left"></div>
					<div class="border right"></div>
					<div class="corner top-left"></div>
					<div class="corner top-right"></div>
					<div class="corner bottom-left"></div>
					<div class="corner bottom-right"></div>
					<div class="background"></div>
				</div>
				<div class="content-inner" id="enwnd_content">
					<div class="registration-wrapper">
						<div class="header"><div class="mark-outer"><div class="mark"></div></div></div>
						<div class="short-info">
						</div>
						<div class="main-container">
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id=imgload>...</div>

		<div id="quest-log-window">
				<div class="quest-log-header"></div>
				<div class="quest-log-close-but"></div>
				<div class="quest-log-content">
					<div class="quest-log-scroll questlist"></div>
				</div>
			</div>
		</div>

		<div id=dlgwin><div class=w1><div id=dlgtitle></div><div class=closebut onclick='$("#dlgwin").fadeOut("fast"); g.lock.remove("dialogalert"); g.qlogVisible = false;' rollover=22></div>
				<div class=w2></div></div></div>
		<div id=dropmenu><h3></h3><span id="_t4"></span><br>
			<button id="_t5" onclick="moveItemSafe($('#dropmenu').attr('iid'), 'st=-1'); $('#dropmenu').fadeOut()">...</button>
			<button id="_t6" onclick="moveItemSafe($('#dropmenu').attr('iid'), 'st=-2'); $('#dropmenu').fadeOut()">...</button>
			<button id="_t7" onclick='$("#dropmenu").fadeOut()'>...</button>
			<br><small id="_t8">...</small></div>

		<div id=config>
			<div class="conf-title"></div>
            <div id=cfg_options>
                <div opt=1 class="server-opt" id="opt1">...</div>
                <div opt=6 class="server-opt" id="opt6">...</div>
                <div opt=2 class="server-opt" id="opt2">...</div>
                <div opt=3 class="server-opt" id="opt3">...</div>
                <div opt=5 class="server-opt" id="opt5">...</div>
                <div opt=14 class="server-opt" id="opt14">...</div>
                <div opt=4 class="server-opt" id="opt4">...</div>
                <div opt=7 class="server-opt" id="opt7">...</div>
                <div opt=8 class="server-opt" id="opt8">...</div>
                <div opt=9 class="server-opt" id="opt9">...</div>
                <div opt=10 class="server-opt" id="opt10">...</div>
                <div opt=12 class="server-opt" id="opt12">...</div>
                <div opt=13 class="server-opt" id="opt13">...</div>
                <!--<div opt=150 class="local-opt" id="opt150">...</div>-->
                <div opt=16 class="server-opt" id="opt16">...</div>
            </div>
			<button class=changeClient onclick='changeClient()'></button>
			<div class="right-save-buts"><button class=save rollover=20 onclick='config_save()'></button><button class=cancel rollover=20 onclick='config_cancel()'></button></div>
		</div>
		<div id=match-details-wnd>
			<div class="match-details-title"></div>
			<!--<div id="match-details-title-txt"></div>-->
			<div id=match-details-txt></div>
			<div class=close-match-details-wrapper>
				<div class=close-match-details onclick="g.matchmaking.toggleDetailsWnd()"></div>
			</div>

		</div>

		<div id=loots>
            <div id=loots_header_label></div>
			<!--<div id=loots_l></div><div id=loots_r></div>-->
			<center><table><tr>
				</table></center>
			<button id=loots_button onclick=sendLoots(1,false)></button>
			<div id=loots_counter>-</div>
			<div id=loots_bag></div>
			<!--<video id="chest-video">-->
				<!--<source src="img/chest.m4v" type="video/x-m4v">-->
			<!--</video>-->
		</div>

		<!--<video id="chest-video">-->
		<!--<source src="video/chest.m4v" type="video/x-m4v">-->
		<!--</video>-->

		<div id=centerbox2>
			<div id="ni-promo"><div class="ni-button" onclick="changeClient()"></div></div>
			<div id="hieronim_button" onclick="shop_close(); _g('creditshop&npc=68689')"></div>
			<div id="lehim_button" onclick="shop_close(); showStaminaShop();"></div>
			<span id=corners>
				<img class="lt-hor" src="img/lt-hor.png">
				<img class="lt-ver" src="img/lt-ver.png">
				<img class="ld-hor" src="img/ld-hor.png">
				<img class="ld-ver" src="img/ld-ver.png">
				<img class="rt-hor" src="img/rt-hor.png">
				<img class="rt-ver" src="img/rt-ver.png">
				<img class="rd-hor" src="img/rd-hor.png">
				<img class="rd-ver" src="img/rd-ver.png">
				<img class="border-u" src="img/border-u.png">
				<img class="border-l" src="img/border-l.png">
				<img class="border-r" src="img/border-r.png">
				<img class="border-d" src="img/border-d.png">
			</span>
			<img src="img/le-orn1.gif" id=leorn1><img src="img/le-orn2.gif" id=leorn2>
			<img id=tutorial>
		</div>
		<div id=centerbox>
			<div id=base>
				<div id="bground">
					<div id="stasis-overlay">
						<dev class="stasis-overlay__caption">
							<div class="stasis-overlay__title" data-trans="stasis"></div>
							<div class="stasis-overlay__text">
								<div class="stasis-overlay__text-inner"></div>
								<div class="stasis-overlay__time"></div>
							</div>
						</dev>
					</div>
				</div>
				<div id=ground onmousedown="return false">
					<div id=target></div>
					<div id="bubbledialog">
						<div class="bg_layer">
							<div class="top_frame"></div>
							<div class="left_frame"></div>
							<div class="right_frame"></div>
							<div class="bottom_frame"></div>
						</div>
						<div class="content_layer">
							<div class="inner">
								<div class="container">

								</div>
							</div>
						</div>
					</div>
				</div></div>
			<div id="itemWaitBox"><div class="items-container"></div><div class="hoverbutton"></div></div>
			<div id=panel>
				<h1 id=nick></h1>
				<div id=new_event_calendar style="display: none;" tip='' onclick="_g('rewards_calendar&action=show');"></div>
				<div id="skillSwitch" onclick="g.skills.changeSet();" tip="..."></div>
				<div id=buttons>
					<div id=b_quests tip='...' onclick='g.questLog.manageVisibility()'></div>
					<div id=b_clans tip='...' onclick='clan_click()'></div>
					<!--<div id=b_pvp tip='...' rollover=22 onclick='hero.togglePvp()'></div>-->
					<div id=b_recipes tip='...' onclick='_g("craft&a=list")'></div>
					<div id=b_config tip='...' onclick="config_show()"></div>
					<div id=b_map tip='...' onclick='map.showMini()'></div>
					<div id=b_skills tip='...' onclick='g.skills.show()'></div>
					<div id=b_friends tip='...' onclick='_g("friends&a=show")'></div>
					<!--<div id=b_addons tip='...' onclick="extManager.task('add_list')"></div>-->
					<div id=b_matchmaking tip='...' onclick="g.matchmaking.show()"></div>
				</div>
				<div id=b_addons class=b_buttons tip='...' onclick="extManager.task('add_list')"></div>
				<div id=b_news class=b_buttons tip='...' onclick="showNews()"></div>
				<div id=b_help class=b_buttons tip='...' onclick="showHelp()"></div>
				<div id="b_pvp" onclick="hero.togglePvp()" tip="..."></div>
				<div id=bagc><div id=bag></div></div><div id=hlbag></div>
			</div>
			<!--<div id=premiumbut onclick="showPremiumPanel()"></div>-->
			<div id=premiumbut onclick="g.prePremium.showPrePremiumPanel()"></div>
			<!--<div id=helpbut onclick="showHelp()"></div>-->
			<div id=logoutbut onclick='logout()'></div>

			<div id=stats></div><div id=base3></div><div id=gold></div>
			<div id=exp1></div><div id=exp2></div> <div id=life1></div><div id=life2></div>
			<div id=pvpmode></div><div id=bottombar><div id=bottxt></div><input spellcheck="true" id=inpchat maxlength=200 autocomplete="off"></div><div id=botloc></div><div id=lagmeter tip='--ms'></div>
			<!--<div id="event_calendar_switch"></div>-->
			<div id="pvpStatMainBox"><div id="pvpIndicatorsListButton" onclick="_g('conquer')" tip=""></div><div class="bgLayer"></div><div id="pvpStatContainer"><div class="bar fall"><div class="indicator"></div></div><div class="bar raise"><div class="indicator"></div></div></div></div>
			<div id=bchat onclick="toggleChat()" tip="..."></div>
			<div id=chat>
				<div style="position:relative">
					<!--<div id="chatMoveHandler">cm</div>!-->
				</div>
				<div id=chattabs><s id=chb0></s><s id=chb1></s><s id=chb2></s><s id=chb3></s></div>
				<div id=chattxt></div>
			</div>
			<center id=chathorror>
				<h2></h2><h3 id="_t9">...</h3>
				<input>
				<div style='margin-bottom:160px'></div>
				<button id="_t10" onclick=chatSendBad()>...</button>
				<button id="_t11" onclick=$('#chathorror').fadeOut()>...</button>
				<br><span id="_t12"></span>
			</center>
			<div id=youtube>
				<button id="_t13" onclick=hideMovie()></button> <button id="_t14" onclick=minimizeMovie()></button>
				<center></center></div>

			<div id=bookmarks>
				<div id=warn tip='' onclick="toggleConsole()"></div>
				<div id=bm_party tip='' onclick="partyToggle()"></div>
				<div id=bm_movie tip='' onclick="maximizeMovie()"></div>
				<div id=bm_register tip='' onclick="ingameRegistration.show()"></div>
			</div>

			<div id="pre-captcha"></div>

			<div id=console><div id=contxt>
					Margonem console.<br>
				</div><input id=conin autocomplete="off"></div>

			<div id=party><p></p><img src="img/party-bottom.png"></div>

			<div id=dazed><div><img src="/img/dazed3.png"><br><span id=dazeleft></span></div></div>
			<div id=battle>
				<div tip="" onclick="battle_surrender();" id="surrenderBattleButton">Poddaj się</div>
				<div  tip="" onclick="if (ansgame.check()) return false; _g('fight&a=f'); $(this).fadeOut(); g.battle.nobut = true;" id="autobattleButton">Auto</div><div id=battlepanelback></div><div id=battlelog></div>
				<div id=battlepanel>
					<b id=battlemana>0</b><b id=battleenergy>0</b>
					<b id=battletimer>-</b>
					<div id=battlehelp onclick="showDialog((_l() == 'en' ? 'en/' : '') + 'help-title.png', $('#h_battle').html())"></div>
					<div id=battleclose onclick=canLeave()></div>
					<small style='font-size:9px'></small>
				</div>
				<div class="border-b"></div>
			</div>

			<div id=dialog>
				<div class="borders"></div>
				<div id=dlgin>
					<div class="message"></div>
					<div class="replies" id="replies"></div>
				</div>
			</div>

			<div id=minimap>
				<div id=inmap></div><div id=inmap2wrapper><div id="inmap2"><img src=""><div id=hlmap></div><div id=maptip></div></div></div>
				<div id=mappanel>
					<ul class=boxhover>
						<!--<li onclick='$("#inmap2wrapper").fadeIn("fast"); setTimeout(function () {map.highlightMarker()}, 300)'>-->
						<li onclick='$("#inmap2wrapper").fadeIn("fast"); map.highlightMarker()'>
						<li onclick='$("#inmap2wrapper").fadeOut("fast");'>
						<li onclick='$("#minimap").fadeOut("fast"); if (!$("#dialog").is(":visible")) g.lock.remove("minimap")'></ul>
					<div id=maplist></div>
					<input type=text id=mapfilter>
				</div>
			</div>

			<div id=addons>
				<div id="addon_search_div"><span></span> <input id="addon_search"/></div>
				<div id=add_list>
					<h1 id="_t15"></h1>
					<div class="add_list_menu">
						<div class="menu_element" id="ad_opt_badged"></div>
						<div class="menu_element" id="ad_opt_popular"></div>
						<div class="menu_element" id="ad_opt_all"></div>
						<div class="menu_element" class="active" id="ad_opt_unverified" style="display:none;"></div>
					</div>
					<div class="view_port"></div>
				</div>
				<div id=add_mine><h1 id="_t16"></h1><div class="view_port"></div></div>
				<div id=add_edit><h1 id="_t17"></h1><div class="view_port"></div></div>
				<div id=add_active><h1 id="h1_add_active"></h1><div class="view_port"></div></div>
				<div id=add_help><h1 id="_t21"></h1><div id="addon_help_txt"></div></div>
			</div>
			<div id=addonspanel>
				<ul class=boxhover>
					<li onclick="extManager.task('add_list')">
					<li onclick="extManager.task('add_mine')">
					<li onclick="extManager.task('add_active')">
					<li onclick="extManager.task('add_help')">
					<li onclick="extManager.task('quit')"></ul>
			</div>

			<div id=newlvl onclick="$('#abilitypoints').fadeIn();"></div>
			<div id=abilitypoints>
				<div class=closebut onclick='$("#abilitypoints").fadeOut("fast")' rollover=22></div>
				<div id=qSpacer style='height:45px'></div>
				<b id=abpoints></b>

				<div id="strength-increase"></div>
				<div id="dexternity-increase"></div>
				<div id="intelect-increase"></div>

				<div class=ab1 onclick="_g('useab&a=str&cnt=1')"></div>
				<div class=ab1 style="top:178px" onclick="_g('useab&a=agi&cnt=1')"></div>
				<div class=ab1 style="top:243px" onclick="_g('useab&a=int&cnt=1')"></div>
				<div class=ab5 onclick="_g('useab&a=str&cnt=5')"></div>
				<div class=ab5 style="top:178px" onclick="_g('useab&a=agi&cnt=5')"></div>
				<div class=ab5 style="top:243px" onclick="_g('useab&a=int&cnt=5')"></div>
			</div>


			<div id=shop><span id=shop_store></span>
				<div id=for-you-plug></div><div id=for-you-txt></div>
				<div id=shop_buy></div><div id=shop_sell></div>
				<div id="for-you-plug-disabled">
					<div id="for-you-disabled-text"></div>
				</div>
				<div id=shq0></div><div id=shq1></div><div id=shq2></div><div id=shq3></div><div id=shq4></div>
				<div id=shop_bilans></div><div id=shop_close onclick='shop_close()'></div>
				<div id=shop_accept onclick='shop_accept()'></div>
				<div id=shop_recover_items onclick='shop_recover_items()'></div>
				<span id=shop_desc></span><div id="sl_shop_banner" onclick="slShopOpen()"></div><div onclick="shop_close(); _g('creditshop&credits_gold=-1');" id="gold_shop_banner"></div></div>
			<div id="goldShop"><div class="header" id="_t40"></div><div class="options"></div><div class="sllink" onclick="slShopOpen(); return false;"></div><div class="closelink" onclick="hideGoldShop(); return false;"></div></div>
			<div id=friends>
				<div class=closebut onclick="$('#friends').fadeOut('fast'); g.lock.remove('friends')" rollover=22></div>
				<div id=frsort onclick="g.fredit = !g.fredit; _g('friends&a=show')"></div>
				<div id=myfriends></div><div id=mfadd><div id=fradd onclick="_g('friends&a=finvite&nick=' + $('#frname').val())"></div><input class=frinp id=frname></div>
				<div id=myenemies></div><div id=meadd><div id=enadd onclick="_g('friends&a=eadd&nick=' + $('#enname').val())"></div><input class=frinp id=enname></div>
			</div>
            <div id="mc-addon">
                <div class="mc-header">
                    <div class="nick-header"></div>
                </div>
                <div class="mc-body">
                    <div class="all-texts"></div>
                    <div class="times-of-mute"></div>
                    <div class="unmute"></div>
                </div>
            </div>
            <div id="smc-addon">
                <div class="question"></div>
                <div class="days"></div>
                <div id="ban-reason-label"></div>
                <div class="input-wrapper">
                    <input id="banday_reason" class="ban-reason default">
                </div>
                <div class="ban-btn"></div>
            </div>
			<div id="chests-window">
				<div class="chests-choice-wrapper"></div>
				<div class="close-chests-window"></div>
			</div>
			<div id="pre-premium-panel">
				<div id="pre-premium-header-txt"></div>
				<div class="tiles-wrapper"></div>
				<div class="close-pre-premium"></div>
			</div>
			<div id="premiumshop">
				<div class="items_wrapper"></div>
				<div class="sl_amount_ps">122</div>
				<div class="buymore_ps" onclick="slShopOpen();"></div>
				<div class="closebutton_ps" onclick="$('#premiumshop').hide();"></div>
				<div class="promocode_button" onclick="codeManager.showCodeInputWindow();"></div>
			</div>
			<div id="eventCallendar">
				<div class=closebut onclick="eventCalendar.close();" rollover=22></div>
				<div class="matrix">
					<div class="week-switch cell previous">
						<div class="inner-cell"></div>
					</div>
					<div class="week-switch cell next">
						<div class="inner-cell"></div>
					</div>
					<div class="days-wrapper">

					</div>
				</div>
				<div class="controlls">
					<div class="date-display"></div>
					<div class="month-switcher">
						<div class="month-switch previous"></div>
						<div class="month-switch next"></div>
						<div class="month-display"></div>
					</div>
				</div>
			</div>

			<div id="adventCallendar">
				<div class="header">
					<div class="content">
						<div class="header-text-wrapper" id="advent_header_txt"></div>
					</div>
					<div class="close-button" onclick="adventCallendar.close()"></div>
				</div>
				<div class="windows-wrapper">

				</div>
			</div>

			<div id=clanbox class=clan></div>
			<div id=clanmenu class=clan>
				<ul class=boxhover>
					<!--<li onclick="$('#clanbox').html(g.clanlist)">-->
					<li                   onclick="newClanList()">						<span class="gfont" name="clan-list-item-menu"  		 id="clan-list-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanOfficial()">						<span class="gfont" name="clan-official-page-item-menu"  id="clan-official-page-item-menu"  ></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanPriv()">							<span class="gfont" name="clan-private-page-item-menu"   id="clan-private-page-item-menu"   ></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanRecruit()">						<span class="gfont" name="clan-recruit-item-menu"  		 id="clan-recruit-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=members')">					<span class="gfont" name="clan-members-item-menu"  		 id="clan-members-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanTreasury()">						<span class="gfont" name="clan-treasure-item-menu"  	 id="clan-treasure-item-menu"   	></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanManage()">							<span class="gfont" name="clan-manage-item-menu"  		 id="clan-manage-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=dipl')">					<span class="gfont" name="clan-diplomacy-item-menu"  	 id="clan-diplomacy-item-menu"   	></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanHistory(true)">					<span class="gfont" name="clan-history-item-menu"  		 id="clan-history-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=quests_show')">				<span class="gfont" name="clan-quests-item-menu"  		 id="clan-quests-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=skills_show')">				<span class="gfont" name="clan-skills-item-menu"  		 id="clan-skills-item-menu"   		></span></li>
					<li                   onclick="$('.clan').fadeOut(); g.lock.remove('clans');">	<span class="gfont" name="clan-close-item-menu"  		 id="clan-close-item-menu"   		></span></li>
				</ul>
				<div id="create_new_clan" onclick=_g('clan&a=create')></div>
			</div>
			<div id=clanFilter></div>

			<!--<div id="matchmaking-summary">-->
				<!--<div class="header-wrapper">-->
					<!--<div class="graphic"></div>-->
					<!--<div class="edit-header-label"></div>-->
				<!--</div>-->
				<!--<div class="middle-graphics"></div>-->

				<!--<div class="summary-content">-->
					<!--<div class="result-panel">-->
						<!--<div class="your-side">-->
							<!--<div class="your-result"></div>-->
							<!--<div class="your-name-and-level"></div>-->
							<!--<div class="your-prof"></div>-->
							<!--<div class="your-pr"></div>-->
						<!--</div>-->
						<!--<div class="middle-side">-->
							<!--<div class="middle-wrapper">-->
								<!--<div class="avatars-info-wrapper">-->
									<!--<div class="your-outfit-wrapper">-->
										<!--<div class="out-icon"></div>-->
									<!--</div>-->
									<!--<div class="vs-img-wrapper">-->
										<!--<div class="vs-img"></div>-->
									<!--</div>-->
									<!--<div class="enemy-outfit-wrapper">-->
										<!--<div class="out-icon"></div>-->
									<!--</div>-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="pr-change"></div>-->
							<!--<div class="arrow"></div>-->
						<!--</div>-->
						<!--<div class="enemy-side">-->
							<!--<div class="enemy-result"></div>-->
							<!--<div class="enemy-name-and-level"></div>-->
							<!--<div class="enemy-prof"></div>-->
							<!--<div class="enemy-pr"></div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="progress-points">-->
						<!--<div class="progress-points-val"></div>-->
					<!--</div>-->
					<!--<div class="current-stage"></div>-->
					<!--<div class="price-info" data-trans="#price_info#matchmaking"></div>-->
				<!--</div>-->
				<!--<div class="bottom-panel-graphics">-->
					<!--<div class="tokens-amount"></div>-->
					<!--<div class="close-wrapper"></div>-->
				<!--</div>-->
			<!--</div>-->

			<div id=trade>
				<div id="tradebg"></div>
				<div id=tradeground><div id=mytrader></div><div id=trader2></div><div id="trade_protection_info"></div>
					<div id=mytr_items></div><div id=tr2_items></div>
					<div id=mytr_sitems></div><div id=tr2_sitems></div>
					<div id=mytr_value>0</div><div id=tr2_value>0</div>
					<input id=mytr_gold tip='' onblur="$('#mytr_gold').val(round(g.trade.mygold, 2))"><div id=tr2_gold>0</div>
					<button id=tradeaccept onclick=tradeAccept()></button><button id=tradeaccept2></button>
					<button id=tradecancel onclick=tradeCancel()></button></div>
			</div>

			<div id=mails>
				<div class=closebut onclick=hideMails() rollover=22 style='margin-top:5px'></div>
				<div id=inbox></div>
			</div>
			<div id=mailnotifier></div>

			<div id=auctions>
				<div id=ahtitle><div class=closebut onclick=auctionsHide() rollover=22 style="margin-top:4px"></div></div>
				<div id=ahselect>
					<b onclick='ah_select(0, this)' id=b_myah></b>
					<div id="au0" style='color:yellow; border-bottom:1px solid #4c6139; padding:0 0 2px 2px; margin-right:4px'></div>
					<b id="au1" onclick='ah_select(1, this)'></b>
					<b id="au2" onclick='ah_select(2, this)'></b>
					<b id="au3" onclick='ah_select(3, this)'></b>
					<b id="au4" onclick='ah_select(4, this)'></b>
					<b id="au5" onclick='ah_select(5, this)'></b>
					<b id="au6" onclick='ah_select(6, this)'></b>
					<b id="au7" onclick='ah_select(7, this)'></b>
					<b id="au8" onclick='ah_select(8, this)'></b>
					<b id="au9" onclick='ah_select(9, this)'></b>
					<b id="au10" onclick='ah_select(10, this)'></b>
					<b id="au11" onclick='ah_select(11, this)'></b>
					<b id="au12" onclick='ah_select(12, this)'></b>
					<b id="au13" onclick='ah_select(13, this)'></b>
					<b id="au14" onclick='ah_select(14, this)'></b>
					<b id="au15" onclick='ah_select(15, this)'></b>
					<b id="au16" onclick='ah_select(16, this)'></b>
					<b id="au21" onclick='ah_select(21, this)'></b>
					<b id="au22" onclick='ah_select(22, this)'></b>
					<b id="au23" onclick='ah_select(23, this)'></b>
					<b id="au99" onclick='ah_select(99, this)'></b>
				</div>
				<div id=ah_window>
					<div class=redback>
						<span style='color:yellow' id="_t23"></span><br>
						<span id="_t24"></span>
						<div id=ah_new>
							<div style=" margin:5px 0px; width:295px;float:left;">
								<div class=itemcont>
									<div id=ah_item class=ahitem></div>
								</div>
								<label for="ah_price" id="_24_2"></label>
								<input id=ah_price>
								<label for="ah_bo" id="_t25"></label>
								<input id=ah_bo>
								<br><label for="ah_time" id="_t26"></label>
								<input id=ah_time>h
							</div>
							<button onclick=ah_sellItem() class=new_s></button>
							<div style="clear:both;">
								<small></small>
								<center style='color:yellow'><span id="_t27"></span><b id=ah_gl></b></center>
							</div>
						</div>
						<div id=ah_new-s>
							<div style=" margin:5px 0px; width:295px;float:left;">
								<div class=itemcont><div id=ah_item-s class=ahitem></div></div>
								<span id="_t28"></span>
								<span id="au_unbind_price"></span>
								<span id="_t29"></span>
								<div class="gold_txt special_gold">
									<label for="ah_price_special" id="_t41" onclick="toggleAuxGoldAuction()"></label>
									<div id="ah_price_special_hidden"><input id=ah_price_special placeholder=""/>*</div>
								</div>
								<div class="gold_txt special_gold_info" id="_t43"></div>
							</div>

							<button onclick=ah_sellItemS() class=new_s></button>
							<div style="clear:both;">
								<small id="_t30"></small>
								<small id="_t42"></small>
							</div>
						</div>
					</div><div class=sep></div>
					<div id=ah_mylist></div>
				</div>
				<div id=ah_list></div>
			</div>

            <div id=calendar-wrapper></div>

			<div id=depo>
				<div id=depo-title><div class=closebut onclick=depoHide() rollover=22 style="margin-top:4px"></div></div>
				<div id=depo-back></div>
				<div id=depo-right>
					<span id="depo-txt-rent"></span> <b style='color:#fffefe' id=depo-time></b><br>
					<button onclick="$('#depo-buttons').toggle()" id=depo-toggle></button><br>
					<div id=depo-buttons style='display:none'>
						<div class="infotxtdepo private-section">
							<span class="shadowed" id="_t31"></span>
							<span class="next_renew" style="display:none;">
								<span id="_t32"></span>
								<span class="date" style="color:white; font-weight:bold; background-color:#080"></span><br />
							</span>
							<button onclick="depoPay('s')" id=depo-pays></button>
							<button onclick="depoPay('z')" id=depo-payz></button><br>
							<button onclick=depoDel() id=depo-del></button>
						</div>
						<div class="infotxtdepo clan-section">
							<!-- generated in engine.js !-->
						</div>
					</div>
				</div>
				<div id="depo-sections"></div>
				<div id=depo-balance><span id="db_txt"></span><b style='color:#fffefe'>0m</b></div>
				<div id=depo-gold><input maxLength=6>m</div>
				<button id=depo-goldin onclick=depoGoldin()></button>
				<button id=depo-goldout onclick=depoGoldout()></button>
				<div id="depo-items-wrapper">
					<div id=depo-items></div>
				</div>
			</div>
			<div id=skills>
				<div id=skills_title>
					<div id=skillcount></div>
					<div id="skillInBattleCount"></div>
					<div class="skillUseInBattleInfo"></div>
					<div class="freeSkillsLabel"></div>
					<div class=closebut onclick=g.skills.hide() rollover=22 style="margin-top:4px"></div>
				</div>
				<div id="skills_body"></div>
				<div id="skills_footer">
                    <div id="bm-label1"></div>
                    <div class="info-bm-icon info-icon"></div>
                    <div id="bm-label2"></div>
                    <div class="bm-edit-button"></div>
                    <div class="bm-icon"></div>
                </div>
			</div>

			<div id=bm_edit_panel_container>
				<div id=bm_edit_panel_holder>
					<div id=bm_edit_panel>
						<div id="bm_skill_table_wrapper">
							<table id="bm_skill_table"></table>
						</div>
						<div id="bm_rpt_switch_wrapper">
							<div id="bm_rpt_switch"></div>
							<div class="label">Powtarzaj</div>
						</div>
						<div class="bm-opt-list">
							<ul class="boxhover">
								<li><span id="add-normal-attack" class="gfont" name="add-normal-attack-bm"></span></li>
								<li><span id="clear-bm-list"        class="gfont" name="clear-bm-list"></span></li>
								<li><span id="save-and-close-bm" class="gfont" name="save-and-close-bm"></span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div id=books>
				<div id=books_title><span class=closebut onclick="$('#books').fadeOut()" rollover=22 style="margin-top:4px"></span></div>
				<div id=book_c></div><div id=book_t></div>

				<div id=book_flores></div>
				<div id=book_p></div>
				<div id=book_prev onclick=bookPage(-1)></div><div id=book_next onclick=bookPage(1)></div>
			</div>

			<div id=rooms>
				<div id=rooms_title><div class=closebut onclick="$('#rooms').fadeOut(null, function() {g.lock.remove('motel');});" rollover=22 style="margin-top:4px"></div></div>
				<div id=rooms_c></div>
			</div>

			<div id="recipes">
				<div class="recipe-list-label"></div>
				<div class="recipe-list-search">
					<input class="search" placeholder="Szukaj">
				</div>
				<div class="recipe-header"></div>
				<div class="receipe-list"></div>
				<div class="choose-recipe">
					<div class="reagent-list-label"></div>
					<div class="recipe-wrapper"></div>
				</div>
				<input class="start-lvl" val=""/>
				<input class="stop-lvl" val=""/>
				<select class="choose-item-type"></select>
				<select class="choose-prof"></select>
				<div class="close-but"></div>
			</div>

            <div id="barter-window">

            </div>

            <div id="item-changer-group">

            </div>
            <div id="tp-scroll"></div>

			<div id="choose-outfit"></div>

			<div style='display:none'>
				<div id=h_help>
					<div id="h_help_scrolled" style="padding:0px 10px; margin:10px 0px; font-size:0.8em;height:400px;overflow:hidden;"><strong style="color:#400; font-size:16px;" id="_t37"></strong><br />
						<span id="_t38"></span></div>
				</div>
				<div id=h_battle>
					<div id="_t39"style="padding:10px;">

					</div>
				</div>
			</div>

			<div id=ver></div>
		</div>
		<div id=hmenu></div>
	</body>
Tests:
selector
document.querySelector('#abilitypoints .closebut')
get and selector
document.getElementById('abilitypoints').querySelector('.closebut')
Run results for: getElementById + querySelector vs querySelector

selector

get and selector
