OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <meta charset=utf-8> | |
3 <title>Document.getElementById</title> | |
4 <link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com
"> | |
5 <link rel=help href="https://dom.spec.whatwg.org/#dom-document-getelementbyid"> | |
6 <script src="../../../../resources/testharness.js"></script> | |
7 <script src="../../../../resources/testharnessreport.js"></script> | |
8 <body> | |
9 <div id="log"></div> | |
10 | |
11 <!-- test 0 --> | |
12 <div id=""></div> | |
13 | |
14 <!-- test 1 --> | |
15 <div id="test1"></div> | |
16 | |
17 <!-- test 5 --> | |
18 <div id="test5" data-name="1st"> | |
19 <p id="test5" data-name="2nd">P</p> | |
20 <input id="test5" type="submit" value="Submit" data-name="3rd"> | |
21 </div> | |
22 | |
23 <!-- test 15 --> | |
24 <div id="outer"> | |
25 <div id="middle"> | |
26 <div id="inner"></div> | |
27 </div> | |
28 </div> | |
29 | |
30 <script> | |
31 var gBody = document.getElementsByTagName("body")[0]; | |
32 | |
33 test(function() { | |
34 assert_equals(document.getElementById(""), null); | |
35 }, "Calling document.getElementById with an empty string argument."); | |
36 | |
37 test(function() { | |
38 var element = document.createElement("div"); | |
39 element.setAttribute("id", "null"); | |
40 document.body.appendChild(element); | |
41 this.add_cleanup(function() { document.body.removeChild(element) }); | |
42 assert_equals(document.getElementById(null), element); | |
43 }, "Calling document.getElementById with a null argument."); | |
44 | |
45 test(function() { | |
46 var element = document.createElement("div"); | |
47 element.setAttribute("id", "undefined"); | |
48 document.body.appendChild(element); | |
49 this.add_cleanup(function() { document.body.removeChild(element) }); | |
50 assert_equals(document.getElementById(undefined), element); | |
51 }, "Calling document.getElementById with an undefined argument."); | |
52 | |
53 | |
54 test(function() { | |
55 var bar = document.getElementById("test1"); | |
56 assert_not_equals(bar, null, "should not be null"); | |
57 assert_equals(bar.tagName, "DIV", "should have expected tag name."); | |
58 assert_true(bar instanceof HTMLDivElement, "should be a valid Element instan
ce"); | |
59 }, "on static page"); | |
60 | |
61 | |
62 test(function() { | |
63 var TEST_ID = "test2"; | |
64 | |
65 var test = document.createElement("div"); | |
66 test.setAttribute("id", TEST_ID); | |
67 gBody.appendChild(test); | |
68 | |
69 // test: appended element | |
70 var result = document.getElementById(TEST_ID); | |
71 assert_not_equals(result, null, "should not be null."); | |
72 assert_equals(result.tagName, "DIV", "should have appended element's tag nam
e"); | |
73 assert_true(result instanceof HTMLDivElement, "should be a valid Element ins
tance"); | |
74 | |
75 // test: removed element | |
76 gBody.removeChild(test); | |
77 var removed = document.getElementById(TEST_ID); | |
78 // `document.getElementById()` returns `null` if there is none. | |
79 // https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid | |
80 assert_equals(removed, null, "should not get removed element."); | |
81 }, "Document.getElementById with a script-inserted element"); | |
82 | |
83 | |
84 test(function() { | |
85 // setup fixtures. | |
86 var TEST_ID = "test3"; | |
87 var test = document.createElement("div"); | |
88 test.setAttribute("id", TEST_ID); | |
89 gBody.appendChild(test); | |
90 | |
91 // update id | |
92 var UPDATED_ID = "test3-updated"; | |
93 test.setAttribute("id", UPDATED_ID); | |
94 var e = document.getElementById(UPDATED_ID); | |
95 assert_equals(e, test, "should get the element with id."); | |
96 | |
97 var old = document.getElementById(TEST_ID); | |
98 assert_equals(old, null, "shouldn't get the element by the old id."); | |
99 | |
100 // remove id. | |
101 test.removeAttribute("id"); | |
102 var e2 = document.getElementById(UPDATED_ID); | |
103 assert_equals(e2, null, "should return null when the passed id is none in do
cument."); | |
104 }, "update `id` attribute via setAttribute/removeAttribute"); | |
105 | |
106 | |
107 test(function() { | |
108 var TEST_ID = "test4-should-not-exist"; | |
109 | |
110 var e = document.createElement('div'); | |
111 e.setAttribute("id", TEST_ID); | |
112 | |
113 assert_equals(document.getElementById(TEST_ID), null, "should be null"); | |
114 document.body.appendChild(e); | |
115 assert_equals(document.getElementById(TEST_ID), e, "should be the appended e
lement"); | |
116 }, "Ensure that the id attribute only affects elements present in a document")
; | |
117 | |
118 | |
119 test(function() { | |
120 // the method should return the 1st element. | |
121 var TEST_ID = "test5"; | |
122 var target = document.getElementById(TEST_ID); | |
123 assert_not_equals(target, null, "should not be null"); | |
124 assert_equals(target.getAttribute("data-name"), "1st", "should return the 1s
t"); | |
125 | |
126 // even if after the new element was appended. | |
127 var element4 = document.createElement("div"); | |
128 element4.setAttribute("id", TEST_ID); | |
129 element4.setAttribute("data-name", "4th"); | |
130 gBody.appendChild(element4); | |
131 var target2 = document.getElementById(TEST_ID); | |
132 assert_not_equals(target2, null, "should not be null"); | |
133 assert_equals(target2.getAttribute("data-name"), "1st", "should be the 1st")
; | |
134 | |
135 // should return the next element after removed the subtree including the 1s
t element. | |
136 target2.parentNode.removeChild(target2); | |
137 var target3 = document.getElementById(TEST_ID); | |
138 assert_not_equals(target3, null, "should not be null"); | |
139 assert_equals(target3.getAttribute("data-name"), "4th", "should be the 4th")
; | |
140 }, "in tree order, within the context object's tree"); | |
141 | |
142 | |
143 test(function() { | |
144 var TEST_ID = "test6"; | |
145 var s = document.createElement("div"); | |
146 s.setAttribute("id", TEST_ID); | |
147 // append to Element, not Document. | |
148 document.createElement("div").appendChild(s); | |
149 | |
150 assert_equals(document.getElementById(TEST_ID), null, "should be null"); | |
151 }, "Modern browsers optimize this method with using internal id cache. " + | |
152 "This test checks that their optimization should effect only append to `Doc
ument`, not append to `Node`."); | |
153 | |
154 | |
155 test(function() { | |
156 var TEST_ID = "test7" | |
157 var element = document.createElement("div"); | |
158 element.setAttribute("id", TEST_ID); | |
159 gBody.appendChild(element); | |
160 | |
161 var target = document.getElementById(TEST_ID); | |
162 assert_equals(target, element, "should return the element before changing th
e value"); | |
163 | |
164 element.attributes[0].value = TEST_ID + "-updated"; | |
165 var target2 = document.getElementById(TEST_ID); | |
166 assert_equals(target2, null, "should return null after updated id via Attr.v
alue"); | |
167 var target3 = document.getElementById(TEST_ID + "-updated"); | |
168 assert_equals(target3, element, "should be equal to the updated element."); | |
169 }, "changing attribute's value via `Attr` gotten from `Element.attribute`."); | |
170 | |
171 | |
172 test(function() { | |
173 var TEST_ID = "test8"; | |
174 | |
175 // setup fixture | |
176 var element = document.createElement("div"); | |
177 element.setAttribute("id", TEST_ID + "-fixture"); | |
178 gBody.appendChild(element); | |
179 | |
180 // add id-ed element with using innerHTML | |
181 element.innerHTML = "<div id='"+ TEST_ID +"'></div>"; | |
182 var test = document.getElementById(TEST_ID); | |
183 assert_equals(test, element.firstChild, "should not be null"); | |
184 assert_equals(test.tagName, "DIV", "should have expected tag name."); | |
185 assert_true(test instanceof HTMLDivElement, "should be a valid Element insta
nce"); | |
186 }, "add id attribute via innerHTML"); | |
187 | |
188 | |
189 test(function() { | |
190 var TEST_ID = "test9"; | |
191 | |
192 // add fixture | |
193 var fixture = document.createElement("div"); | |
194 fixture.setAttribute("id", TEST_ID + "-fixture"); | |
195 gBody.appendChild(fixture); | |
196 | |
197 var element = document.createElement("div"); | |
198 element.setAttribute("id", TEST_ID); | |
199 fixture.appendChild(element); | |
200 | |
201 // check 'getElementById' should get the 'element' | |
202 assert_equals(document.getElementById(TEST_ID), element, "should not be null
"); | |
203 | |
204 // remove id-ed element with using innerHTML (clear 'element') | |
205 fixture.innerHTML = ""; | |
206 var test = document.getElementById(TEST_ID); | |
207 assert_equals(test, null, "should be null."); | |
208 }, "remove id attribute via innerHTML"); | |
209 | |
210 | |
211 test(function() { | |
212 var TEST_ID = "test10"; | |
213 | |
214 // setup fixture | |
215 var element = document.createElement("div"); | |
216 element.setAttribute("id", TEST_ID + "-fixture"); | |
217 gBody.appendChild(element); | |
218 | |
219 // add id-ed element with using outerHTML | |
220 element.outerHTML = "<div id='"+ TEST_ID +"'></div>"; | |
221 var test = document.getElementById(TEST_ID); | |
222 assert_not_equals(test, null, "should not be null"); | |
223 assert_equals(test.tagName, "DIV", "should have expected tag name."); | |
224 assert_true(test instanceof HTMLDivElement,"should be a valid Element instan
ce"); | |
225 }, "add id attribute via outerHTML"); | |
226 | |
227 | |
228 test(function() { | |
229 var TEST_ID = "test11"; | |
230 | |
231 var element = document.createElement("div"); | |
232 element.setAttribute("id", TEST_ID); | |
233 gBody.appendChild(element); | |
234 | |
235 var test = document.getElementById(TEST_ID); | |
236 assert_equals(test, element, "should be equal to the appended element."); | |
237 | |
238 // remove id-ed element with using outerHTML | |
239 element.outerHTML = "<div></div>"; | |
240 var test = document.getElementById(TEST_ID); | |
241 assert_equals(test, null, "should be null."); | |
242 }, "remove id attribute via outerHTML"); | |
243 | |
244 | |
245 test(function() { | |
246 // setup fixtures. | |
247 var TEST_ID = "test12"; | |
248 var test = document.createElement("div"); | |
249 test.id = TEST_ID; | |
250 gBody.appendChild(test); | |
251 | |
252 // update id | |
253 var UPDATED_ID = TEST_ID + "-updated"; | |
254 test.id = UPDATED_ID; | |
255 var e = document.getElementById(UPDATED_ID); | |
256 assert_equals(e, test, "should get the element with id."); | |
257 | |
258 var old = document.getElementById(TEST_ID); | |
259 assert_equals(old, null, "shouldn't get the element by the old id."); | |
260 | |
261 // remove id. | |
262 test.id = ""; | |
263 var e2 = document.getElementById(UPDATED_ID); | |
264 assert_equals(e2, null, "should return null when the passed id is none in do
cument."); | |
265 }, "update `id` attribute via element.id"); | |
266 | |
267 | |
268 test(function() { | |
269 var TEST_ID = "test13"; | |
270 | |
271 var create_same_id_element = function (order) { | |
272 var element = document.createElement("div"); | |
273 element.setAttribute("id", TEST_ID); | |
274 element.setAttribute("data-order", order);// for debug | |
275 return element; | |
276 }; | |
277 | |
278 // create fixture | |
279 var container = document.createElement("div"); | |
280 container.setAttribute("id", TEST_ID + "-fixture"); | |
281 gBody.appendChild(container); | |
282 | |
283 var element1 = create_same_id_element("1"); | |
284 var element2 = create_same_id_element("2"); | |
285 var element3 = create_same_id_element("3"); | |
286 var element4 = create_same_id_element("4"); | |
287 | |
288 // append element: 2 -> 4 -> 3 -> 1 | |
289 container.appendChild(element2); | |
290 container.appendChild(element4); | |
291 container.insertBefore(element3, element4); | |
292 container.insertBefore(element1, element2); | |
293 | |
294 | |
295 var test = document.getElementById(TEST_ID); | |
296 assert_equals(test, element1, "should return 1st element"); | |
297 container.removeChild(element1); | |
298 | |
299 test = document.getElementById(TEST_ID); | |
300 assert_equals(test, element2, "should return 2nd element"); | |
301 container.removeChild(element2); | |
302 | |
303 test = document.getElementById(TEST_ID); | |
304 assert_equals(test, element3, "should return 3rd element"); | |
305 container.removeChild(element3); | |
306 | |
307 test = document.getElementById(TEST_ID); | |
308 assert_equals(test, element4, "should return 4th element"); | |
309 container.removeChild(element4); | |
310 | |
311 | |
312 }, "where insertion order and tree order don't match"); | |
313 | |
314 test(function() { | |
315 var TEST_ID = "test14"; | |
316 var a = document.createElement("a"); | |
317 var b = document.createElement("b"); | |
318 a.appendChild(b); | |
319 b.id = TEST_ID; | |
320 assert_equals(document.getElementById(TEST_ID), null); | |
321 | |
322 gBody.appendChild(a); | |
323 assert_equals(document.getElementById(TEST_ID), b); | |
324 }, "Inserting an id by inserting its parent node"); | |
325 | |
326 test(function () { | |
327 var TEST_ID = "test15" | |
328 var outer = document.getElementById("outer"); | |
329 var middle = document.getElementById("middle"); | |
330 var inner = document.getElementById("inner"); | |
331 outer.removeChild(middle); | |
332 | |
333 var new_el = document.createElement("h1"); | |
334 new_el.id = "heading"; | |
335 inner.appendChild(new_el); | |
336 // the new element is not part of the document since | |
337 // "middle" element was removed previously | |
338 assert_equals(document.getElementById("heading"), null); | |
339 }, "Document.getElementById must not return nodes not present in document"); | |
340 | |
341 // TODO: | |
342 // id attribute in a namespace | |
343 | |
344 | |
345 // TODO: | |
346 // SVG + MathML elements with id attributes | |
347 | |
348 </script> | |
349 </body> | |
350 </html> | |
OLD | NEW |