Python-Ref > Mimo python > JavaScript > Modifying the DOM tree
 
 

<-^^->
Klíčová slova
Moduly
Knihovní funkce

Modifying the DOM tree

Javascript has full access to the DOM tree of the page in works on. This can be used for many interesting things.
Expand/Shrink
function filter() {
    var filter = document.getElementById("filter").value;
    var filter_re = new RegExp(filter);
    var ul = document.getElementById("names");
    for (var i=0; i<ul.childNodes.length; i++) {
	var li = ul.childNodes[i];
	if (li.nodeType == Node.ELEMENT_NODE) {
	    if (li.childNodes[0].nodeValue.search(filter_re) < 0) {
		li.style.display = "none";
	    }
	    else {
		li.style.display = "list-item";
	    }
	}
    }
}

Zdroj: (js5-1.html)
  1   <html xmlns="http://www.w3.org/1999/xhtml">
  2   <head>
  3    <title>Javascript example</title>
  4    <meta content="text/html; charset=utf-8" http-equiv="content-Type"/>
  5    <script src="infiles/js5-1.js" type="text/javascript"> </script>
  6   </head>
  7   <body>
  8     <p>Enter filter: <input type="text" id="filter"/>
  9     <input type="button" value="Filter" onclick="filter();"/></p>
 10     
 11     <ul id="names">
 12       <li>9-ethylpurin-6-amine</li>
 13       <li>1,2-dichloroethane</li>
 14       <li>benzene-1,2,3,5-tetrol</li>
 15       <li>1,2,4-trichlorobenzene</li>
 16       <li>2,3-dihydroxybenzoic acid</li>
 17       <li>2-chloroacetaldehyde</li>
 18       <li>2-chloroethanol</li>
 19       <li>2-hydroxypentanedioic acid</li>
 20       <li>2-hydroxypropanedioate</li>
 21       <li>2-hydroxypropanedioic acid</li>
 22       <li>2-oxopentanedioic acid</li>
 23       <li>2-oxobutanoic acid</li>
 24       <li>2,4-diaminopentanoic acid</li>
 25       <li>2,5-dichlorophenol</li>
 26       <li>2-oxohexanedioic acid</li>
 27       <li>3,4-dihydroxybenzoic acid</li>
 28       <li>3-aminopropanal</li>
 29       <li>pyridine-3-carbonitrile</li>
 30       <li>3-oxohexanedioic acid</li>
 31       <li>3-oxobutanoic acid</li>
 32       <li>3-hydroxybenzaldehyde</li>
 33       <li>3-(hydroxymethyl)phenol</li>
 34       <li>3-phenylpropanoic acid</li>
 35       <li>2-pyridin-3-ylacetic acid</li>
 36       <li>4-aminobutanal</li>
 37       <li>4-aminobutanoic acid</li>
 38       <li>4-(hydroxymethyl)phenol</li>
 39       <li>4-hydroxybenzaldehyde</li>
 40       <li>4-methylpentanal</li>
 41       <li>4-hydroxybenzoic acid</li>
 42       <li>5-aminopentanoic acid</li>
 43       <li>6,7-dihydropteridine</li>
 44       <li>8-amino-7-oxononanoic acid</li>
 45       <li>ethane-1,2-diol</li>
 46       <li>acetate</li>
 47       <li>acetic acid</li>
 48       <li>acetaldehyde</li>
 49       <li>acetamide</li>
 50       <li>3-hydroxybutan-2-one</li>
 51       <li>propan-2-one</li>
 52       <li>phosphono acetate</li>
 53       <li>7H-purin-6-amine</li>
 54       <li>hexanedioic acid</li>
 55       <li>2-(4-aminobutyl)guanidine</li>
 56       <li>2-amino-6-oxohexanoic acid</li>
 57       <li>1-aminopropan-2-one</li>
 58       <li>2-amino-3-oxobutanoic acid</li>
 59       <li>azane</li>
 60       <li>azanium</li>
 61       <li>amino-phosphanylmethanol</li>
 62       <li>2-aminobenzoic acid</li>
 63       <li>oxane-2,3,4,5-tetrol</li>
 64       <li>hydrogen arsorate</li>
 65       <li>arsoric acid</li>
 66       <li>3-aminopropanoic acid</li>
 67       <li>benzaldehyde</li>
 68       <li>benzene</li>
 69       <li>benzoate</li>
 70       <li>benzoic acid</li>
 71       <li>phenylmethanol</li>
 72       <li>3-phenylbenzene-1,2-diol</li>
 73       <li>bromide</li>
 74       <li>hydrogen bromide</li>
 75       <li>butanal</li>
 76       <li>butane-2,3-diol</li>
 77       <li>butan-1-ol</li>
 78       <li>butanoic acid</li>
 79       <li>phosphono butanoate</li>
 80       <li>calcium(+2) cation</li>
 81       <li>pentane-1,5-diamine</li>
 82       <li>carbamate</li>
 83       <li>carbamic acid</li>
 84       <li>phosphono carbamate</li>
 85       <li>carbon dioxide</li>
 86       <li>carbon monoxide</li>
 87       <li>formate</li>
 88       <li>formic acid</li>
 89       <li>2-aminooxyacetate</li>
 90       <li>2-aminooxyacetic acid</li>
 91       <li>benzene-1,2-diol</li>
 92       <li>methane</li>
 93       <li>2-chloroacetic acid</li>
 94       <li>2-chlorobenzene-1,4-diol</li>
 95       <li>3-phenylprop-2-enal</li>
 96       <li>3-phenylprop-2-en-1-ol</li>
 97       <li>hexa-2,4-dienedioic acid</li>
 98       <li>chloride</li>
 99       <li>hydrogen chloride</li>
100       <li>chromen-2-one</li>
101       <li>4-propan-2-ylbenzaldehyde</li>
102       <li>3,5-diaminohexanoic acid</li>
103       <li>4-ethenyl-2-methoxyphenol</li>
104       <li>2-methylphenol</li>
105       <li>2-hydroxybenzoic acid</li>
106       <li>3-methylbenzene-1,2-diol</li>
107       <li>3-methylphenol</li>
108       <li>2-oxohept-3-enedioic acid</li>
109       <li>octane</li>
110       <li>5-amino-3-oxohexanoic acid</li>
111       <li>benzene-1,3,5-triol</li>
112       <li>2-aminoacetaldehyde</li>
113       <li>2,3-diaminopropanoic acid</li>
114       <li>but-2-ynedioic acid</li>
115       <li>octanoic acid</li>
116       <li>heptanedioic acid</li>
117       <li>2,5-diaminopentanoic acid</li>
118       <li>3,6-diaminohexanoic acid</li>
119       <li>2-(1H-indol-3-yl)acetamide</li>
120       <li>2-nitropropane</li>
121       <li>hydrogen sulfide</li>
122       <li>4-aminophenol</li>
123       <li>3-pyrrolidin-2-ylpyridine</li>
124       <li>4-oxohex-2-enedioic acid</li>
125       <li>2-aminobutanedioic acid</li>
126       <li>propane-1,3-diamine</li>
127       <li>3-hydroxybutanoic acid</li>
128       <li>3-chlorobenzoic acid</li>
129       <li>hexane-1,2,3,4,5,6-hexol</li>
130       <li>octanal</li>
131       <li>2-methoxyphenol</li>
132       <li>2-aminohexanedioic acid</li>
133       <li>2,4-diaminobutanoic acid</li>
134       <li>3H-imidazol-4-amine</li>
135       <li>2-methylpropanedioic acid</li>
136       <li>2-oxoethylphosphonic acid</li>
137       <li>4-aminobutylurea</li>
138       <li>3,5-dihydroimidazol-4-one</li>
139       <li>2,5-dioxopentanoic acid</li>
140       <li>2-hydroxybutanedioic acid</li>
141       <li>propanal</li>
142       <li>2-phosphonooxyacetic acid</li>
143       <li>hydrogen selenide</li>
144       <li>cyanic acid</li>
145       <li>4-nitrobenzaldehyde</li>
146       <li>arsorous acid</li>
147       <li>2-phosphonoacetic acid</li>
148       <li>2-(4-oxobutyl)guanidine</li>
149       <li>6-aminohexanoic acid</li>
150       <li>phenylmercury</li>
151       <li>dibenzofuran</li>
152       <li>4-amino-3H-pyrimidin-2-one</li>
153       <li>2-aminopropanoic acid</li>
154       <li>2-aminopentanedioic acid</li>
155       <li>2-hydroxypropanoic acid</li>
156       <li>1,3-diazinane-2,4-dione</li>
157       <li>butane-2,3-dione</li>
158       <li>7,8-diaminononanoic acid</li>
159       <li>diethyl hydrogen phosphate</li>
160       <li>chroman-2-one</li>
161       <li>6,8-bis-sulfanyloctanamide</li>
162       <li>1,3-dihydroxypropan-2-one</li>
163       <li>2-dimethylaminoacetic acid</li>
164       <li>N-methylmethanamine</li>
165       <li>methylsulfinylmethane</li>
166       <li>2-aminoethanol</li>
167       <li>ethanol</li>
168       <li>formaldehyde</li>
169       <li>formamide</li>
170       <li>but-2-enedioic acid</li>
171       <li>pentanedioic acid</li>
172       <li>2-aminoacetic acid</li>
173       <li>2,3-dihydroxypropanal</li>
174       <li>propane-1,2,3-triol</li>
175       <li>2-hydroxyacetaldehyde</li>
176       <li>2-hydroxyacetic acid</li>
177       <li>oxaldehydic acid</li>
178       <li>carbonic acid</li>
179       <li>formonitrile</li>
180       <li>hydrogen carbonate</li>
181       <li>thiocyanic acid</li>
182       <li>molecular hydrogen</li>
183       <li>hydrogen peroxide</li>
184       <li>benzene-1,4-diol</li>
185       <li>hydroxylamine</li>
186       <li>3,7-dihydropurin-6-one</li>
187       <li>1H-imidazole</li>
188       <li>2-iminobutanedioic acid</li>
189       <li>1H-indole</li>
190       <li>2-(1H-indol-3-yl)acetate</li>
191       <li>molecular iodine</li>
192       <li>potassium(+1) cation</li>
193       <li>2-aminopentanoic acid</li>
194       <li>pentane-1,2,3,4,5-pentol</li>
195       <li>2-amino-4-oxobutanoic acid</li>
196       <li>2-hydroxypropanal</li>
197       <li>2,6-diaminohexanoic acid</li>
198       <li>propanedioic acid</li>
199       <li>3-oxopropanoic acid</li>
200       <li>methanethiol</li>
201       <li>2-oxopropanal</li>
202       <li>carbanide</li>
203       <li>methanol</li>
204       <li>magnesium(+2) cation</li>
205       <li>N-phenylacetamide</li>
206       <li>sodium(+1) cation</li>
207       <li>naphthalene</li>
208       <li>hydroxyazanium</li>
209       <li>nickel(+2) cation</li>
210       <li>nickel</li>
211       <li>pyridine-3-carboxamide</li>
212     </ul>
213   </body>
214   </html>
Doba běhu: 2.5 ms
Expand/Shrink
function filter() {
    var filter = document.getElementById("filter").value;
    var filter_re = new RegExp(filter);
    var ul = document.getElementById("names");
    for (var i=0; i<ul.childNodes.length; i++) {
	var li = ul.childNodes[i];
	if (li.nodeType == Node.ELEMENT_NODE) {
	    if (li.childNodes[0].nodeValue.search(filter_re) < 0) {
		li.style.display = "none";
	    }
	    else {
		li.style.display = "list-item";
	    }
	}
    }
}

Rozdíl proti: js5-1.html
@@ -5,8 +5,7 @@
  <script type="text/javascript" src="infiles/js5-1.js"> </script>
 </head>
 <body>
-  <p>Enter filter: <input type="text" id="filter"/>
-  <input type="button" onclick="filter();" value="Filter"/></p>
+  <p>Enter filter: <input type="text" id="filter" onkeyup="filter();"/></p>
   <ul id="names">
     <li>9-ethylpurin-6-amine</li>
Zdroj: (js5-2.html) +++
Doba běhu: 3.3 ms
Expand/Shrink
function show_color() {
    document.getElementById("penguin").setAttribute("src", "penguin.jpg");
}

function show_grey() {
    document.getElementById("penguin").setAttribute("src", "penguin-grey.jpg");
}
Zdroj: (js5-3.html)
  1   <html xmlns="http://www.w3.org/1999/xhtml">
  2   <head>
  3    <title>Javascript example</title>
  4    <meta content="text/html; charset=utf-8" http-equiv="content-Type"/>
  5    <script src="infiles/js5-3.js" type="text/javascript"> </script>
  6   </head>
  7   <body>
  8     <img src="penguin-grey.jpg" alt="penguin" onmouseover="show_color()" onmouseout="show_grey()" id="penguin"/>
  9   </body>
 10   </html>
Doba běhu: 2.6 ms