JavaScript methods for getting elements directly through the element ID and name

Overview:

Chance, I in JavaScript directly with the HTML element ID attribute to get the element, and set the element's other property values, can correctly parse no error! So I went to consult the relevant information, but also other peers so use.

Although this usage is not a standard usage, it is recommended to use document.getElementById (ID);d ocument.getelementbyname (name) , but also a new discovery, which is recorded first for later use.

This article describes how JavaScript obtains elements directly through the element ID and name, as well as the considerations that are summarized in the practice process.

The specific analysis is as follows:

We know some third-party JS Library on how to quickly select the elements in the HTML to do some simplification, seemingly very inscrutable, in fact, otherwise. And JS itself with the special elements of the simple method of selection, the following for everyone simple introduction.

In HTML, the most straightforward way to discern HTML elements is to use the name and ID attributes, which are slightly different: The ID must be unique to the page, but name can be duplicated.

In JS if the ID name is not the same as the built-in or global variables, the name automatically becomes the property of the Window object, and in the top-level environment in an HTML page there is: this = = = Window .

So if we write an HTML element code like this:

1 <  type= "button"  id= "BTN_OK"  value= "OK"  OnClick= "..."/>

You can refer to it like this:

1 // You can refer to this 2 function (){}; 3 // or the following is the same. 4 window.btn_ok.style = ...;

For the name attribute, only certain types of HTML elements have similar methods, such as: Form,img,iframe,applet,embed,object, and so on. In these elements, the elements of a particular Name property can be accessed through the properties of a global variable or document, or, if there are multiple elements of the same name property, a NodeList object that resembles a read-only group, such as the following code:

1 <Div>2   <imgname= "Pic"src="#"alt= "Pic_0" />3   <imgname= "Pic"src="#"alt= "Pic_1" />4   <imgname= "Pic"src="#"alt= "pic_2" />5 </Div>

We can refer to the element name as Pic:

1 // we can refer to the element name as Pic: 2  for inch pic) 3 Console.log (pic[x].alt); 4 // or non-"standard" syntax each statement way 5  for inch pic) 6  Console.log (Img.alt);

Other peers ' views:
① This was originally IE inside, and later firefox chrome seemed to support it. Not recommended, this is not the standard inside, not necessarily support in the future.

② can be written directly, using the id.style.display="inline" id equivalent of a property that is directly an window object, which window.id can be obtained, but not recommended, or getElementById querySelector good.

③getelementbyid Getelementbytagname and other methods are part of the DOM core, not specifically JS, support for any of the DOM programming language support them, such as XML-written documents. There are also html-dom, such as the onclick attribute, that were familiar to people long before DOM core appeared. The example you cite is html-dom, for example, we can put the following statement: document.getElementById(‘form‘) simplified to document.form , similar element.getAttribute(‘src‘) simplification element.src . Html-dom are usually shorter, but can only be used to process Web documents.

The problems I found in the process of practice:

① in HTML element properties such as the onclick JavaScript directly with the ID to get the element no problem;

② use ID to get elements directly in JavaScript in <script></script>: If the referenced HTML element is inside the form tag, parse the element times with ID to get an exception undefined If the referenced HTML element is not inside the form tag, resolution is not a problem.

Reference Link:http://www.jb51.net/article/65099.htm

JavaScript methods for getting elements directly through the element ID and name