How to get page elements through id attribute in javascript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to get page elements through id attribute in javascript

Jun 09, 2021 pm 04:44 PM

javascript

In JavaScript, you can use the getElementById method to obtain page elements. The syntax format is "document.getElementById("id name")". The getElementById method returns a reference to the first object with the specified ID.

How to get page elements through id attribute in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Web pages organize information by tags, and the id attribute value of the tag is unique. How to find the element to be obtained through javascript

1	`document.getElementById("id")` `//语法`

Copy after login

Through the following code, it is found that the running result is null or [object HTMLParagraphElement]

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;通过ID获取元素&lt;/title&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            var myceshi=document.getElementById(&#39;ceshi&#39;);//获取元素存储在变量中
            // document.write(&#39;结果:&#39;+myceshi);//输出变量
            alert(myceshi);
            document.write(&#39;结果:&#39;+myceshi);//输出变量
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;ceshi&quot;&gt;I love javascript&lt;/div&gt;
        &lt;!-- &lt;script type=&quot;text/javascript&quot;&gt;
            var myceshi=document.getElementById(&#39;ceshi&#39;);//获取元素存储在变量中
            // document.write(&#39;结果:&#39;+myceshi);//输出变量
            alert(myceshi);
            document.write(&#39;结果:&#39;+myceshi);//输出变量
        &lt;/script&gt; --&gt;
    &lt;/body&gt;
&lt;/html&gt;

Copy after login

The obtained element is an object. If we want to operate on the element, we have to use its properties or methods. (object HTMLParagraphElement is the object HTML paragraph element. What is obtained is the element. This element is also the object. The obtained object will not display the value inside, so the object HTMLParagraphElement is displayed. If you want to extract the value inside, use innerHTML to obtain)

The getElementById() method returns a reference to the first object with the specified ID.

Defines multiple methods to find elements, in addition to getElementById(), there are also getElementsByName() and getElementsByTagName().

However, if you need to find a specific element in the document, the most efficient method is getElementById().

When manipulating a specific element of the document, it is best to give the element an id attribute, giving it a unique name (in the document), and then you can use that ID to find the desired element.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to get page elements through id attribute in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn