書式
element = YAHOO.util.Selector.query(selector)element : ページ上のエレメント
selector : セレクタ
説明
Ajaxライブラリ リファレンスサンプルコード [実行]
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="yui/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/selector-beta.js"></script>
<script type="text/javascript"><!--
function highlightElement(cName){
var tagObj = YAHOO.util.Selector.query(cName);
YAHOO.util.Dom.setStyle(tagObj, "background-color", "orange");
}
function revert(){
var tagObj = YAHOO.util.Selector.query("*");
YAHOO.util.Dom.setStyle(tagObj, "background-color", "white");
}
// --></script>
</head>
<body>
<h1>CSSセレクタ形式で選択</h1>
<form>
<input type="button" value="ハイライトを戻す" onClick="revert()"><br>
<input type="button" value="divタグをハイライト" onClick="highlightElement('div')"><br>
<input type="button" value="noteクラスをハイライト" onClick="highlightElement('.note')"><br>
<input type="button" value="divタグのnoteクラスをハイライト" onClick="highlightElement('div.note')"><br>
<input type="button" value="cautionクラスをハイライト" onClick="highlightElement('.caution')"><br>
<input type="button" value="pタグとh1タグをハイライト" onClick="highlightElement('p, h1')"><br>
</form>
<div id="box1" class="note">サンプルテキスト (box1:note)</div>
<div id="box2">サンプルテキスト (box2:なし)</div>
<div id="box3" class="note">サンプルテキスト (box3:note)</div>
<div id="box4">サンプルテキスト (box4:なし)</div>
<div id="box5" class="note caution">サンプルテキスト (box5:note caution)</div>
<p id="box6" class="note">サンプルテキスト(pタグ) (box6:note)</div>
</body>
</html>