blob: e8f716fc9898e3491e4608aa86554cd33328d35d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementsBySelector Demo</title>
<style type="text/css">
body {
margin: 1em 3em;
font-family: georgia;
}
div#foo {
border: 2px solid red;
}
</style>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript" src="../../dom.js"></script>
<script type="text/javascript">
function show(a) {
str = '';
for (i = 0; i != a.length; i++) {
str = str + a[i].toString() + '\n';
}
alert(str);
}
</script>
</head>
<body>
<h1>document.getElementsBySelector Demo</h1>
<p>See <a href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a> for more information.</p>
<p>Here are some links in a normal paragraph: <a href="http://www.google.com/" title="Google!">Google</a>, <a href="http://groups.google.com/">Google Groups</a>. This link has <code>class="blog"</code>: <a href="http://diveintomark.org/" class="blog">diveintomark</a></p>
<div id="foo">
<p>Everything inside the red border is inside a div with <code>id="foo"</code>.</p>
<p>This is a normal link: <a href="http://www.yahoo.com/">Yahoo</a></p>
<p>This link has <code>class="blog"</code>: <a href="http://simon.incutio.com/" class="blog">Simon Willison's Weblog</a></p>
</div>
<form action="" method="get" onsubmit="return false;">
<p>Try them out: </p>
<ul>
<li><input type="submit" value="document.getElementsBySelector('a')" onclick="show(document.getElementsBySelector('a'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('p a.blog')" onclick="show(document.getElementsBySelector('p a.blog'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('div#foo a')" onclick="show(document.getElementsBySelector('div#foo a'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('#foo a.blog')" onclick="show(document.getElementsBySelector('#foo a.blog'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('.blog')" onclick="show(document.getElementsBySelector('.blog'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('a[href^="http://www"]')" onclick="show(document.getElementsBySelector('a[href*="http://www"]'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('a[href$="org/"]')" onclick="show(document.getElementsBySelector('a[href$="org/"]'))" /> (fails in Opera 7)</li>
<li><input type="submit" value="document.getElementsBySelector('a[href*="google"]')" onclick="show(document.getElementsBySelector('a[href*="google"]'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('a[rel="bookmark"]')" onclick="show(document.getElementsBySelector('a[rel="bookmark"]'))" /></li>
<li><input type="submit" value="document.getElementsBySelector('a[title]')" onclick="show(document.getElementsBySelector('a[title]'))" /></li>
</ul>
</form>
</body>
</html>
|
