diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index cd988f73..2f541688 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -6,40 +6,7 @@ There are additional searching methods for that. ## document.getElementById or just id -If an element has the `id` attribute, then there's a global variable by the name from that `id`. - -We can use it to immediately access the element no matter where it is: - -```html run -
-
Element
-
- - -``` - -The behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don't have HTML in view, it's not obvious where the variable comes from. - -If we declare a variable with the same name, it takes precedence: - -```html run untrusted height=0 -
- - -``` - -The better alternative is to use a special method `document.getElementById(id)`. +If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is. For instance: @@ -49,23 +16,61 @@ For instance: ``` -Here in the tutorial we'll often use `id` to directly reference an element, but that's only to keep things short. In real life `document.getElementById` is the preferred method. +Also, there's a global variable named by `id` that references the element: -```smart header="There can be only one" -The `id` must be unique. There can be only one element in the document with the given `id`. +```html run +
+
Element
+
-If there are multiple elements with the same `id`, then the behavior of corresponding methods is unpredictable. The browser may return any of them at random. So please stick to the rule and keep `id` unique. + ``` -```warn header="Only `document.getElementById`, not `anyNode.getElementById`" +...That's unless we declare a JavaScript variable with the same name, then it takes precedence: + +```html run untrusted height=0 +
+ + +``` + +```warn header="Please don't use id-named global variables to access elements" +This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility. + +The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from. + +Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from. + +In real life `document.getElementById` is the preferred method. +``` + +```smart header="The `id` must be unique" +The `id` must be unique. There can be only one element in the document with the given `id`. + +If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique. +``` + +```warn header="Only `document.getElementById`, not `anyElem.getElementById`" The method `getElementById` that can be called only on `document` object. It looks for the given `id` in the whole document. ```