Document-getElementById.html (12148B)
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 instance"); 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 name"); 73 assert_true(result instanceof HTMLDivElement, "should be a valid Element instance"); 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 document."); 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 element"); 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 1st"); 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 1st 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 `Document`, 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 the 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.value"); 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 instance"); 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 instance"); 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 document."); 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>