JavaScript DOM common methods and properties

1. getElementById method

This method returns an object with the given id attribute value, for example an img element with an id value of logo:

<img src="a.jpg" id="logo" />

Then we can use this method to create an object of the property value and assign it to the variable img:

var img = document.getElementById('logo');

Note: It should be imported before the end of the body tag, not at the beginning of the body tag.

2、getElementsByTagName方法

This method returns an array of objects containing all the specified parameter labels, whose parameter is the name of the label.
E.g:

<h1>编程语言</h1>
<p>Java</p>
<p>C++</p>
<h1>Java WEB框架</h1>
<p>Spring MVC</p>
<p>Hibernate</p>
<script type="text/javascript">
    var p = document.getElementsByTagName('p');
    alert(p.length)
</script>

will output 4 because there are 4 <p> elements in the page

3. getElementsByClassName method

This method can access elements through the class attribute of an element, the parameter is the class name, and the return value is an array of elements with the same class name.
E.g:

<div class="test">
    <p>Java</p>
</div>
<div class="test">
    <p>C++</p>
</div>
<script type="text/javascript">
    var p = document.getElementsByClassName('test');
    alert(p.length)
</script>

will output 2

4. getAttribute method

This method does not belong to the document object, it can only be called through the element node object.
Its parameter is the name of the property you intend to query.
E.g:

<p title="编程语言">Java、C++</p>
<p title="Java框架">Spring、Hibernate</p>
<script type="text/javascript">
    var paras = document.getElementsByTagName("p");
    for(var i = 0; i < paras.length; i++)
        alert(paras[i].getAttribute("title"));
</script>

Two prompt boxes will pop up: programming language, Java framework

5, setAttribute method

The setAttribute method is used to modify the value of the attribute node. Similar to getAttribute, setAttribute can only be used for element nodes. It takes two parameters: the name of the property you want to modify and the value you want to modify.

<p title="编程语言">Java、C++</p>
<p title="Java框架">Spring、Hibernate</p>
<script type="text/javascript">
    var paras = document.getElementsByTagName("p");
    for(var i = 0; i < paras.length; i++)
    {
        paras[i].setAttribute("title","hello");
        alert(paras[i].getAttribute("title"));
    }
</script>

Two prompt boxes will pop up: both are hello

6. children property

Similarly, children does not belong to the document object. It can only call
the children property through the element node object, which can be used to obtain all DOM elements of an element, and return an array containing all the child elements of this element.
E.g:

<p>Java、C++</p>
<p>Spring、Hibernate</p>
<script type="text/javascript">
    var para = document.getElementsByTagName("body")[0];
    alert(para.children.length)
</script>

will output 3 because there are two <p.../> attributes and one <script.../> attribute

7. childNodes property

This method is similar to the children method, but the childNodes method returns all elements contained in an element, including text nodes.
E.g:

<p>Java、C++</p>
<p>Spring、Hibernate</p>
<script type="text/javascript">
    var para = document.getElementsByTagName("body")[0];
    alert(para.childNodes.length)
</script>

6 will be output because there are two <p.../> attributes and one <script.../> attribute, and each <p.../> attribute and <script.../> contains a text element.

8. nodeType property

The value of the nodeType property lets us know which kind of node we are dealing with, it can only be called through the element node object. Among them:
the nodeType of the element node is 1, the attribute node is 2, and the text node is 3

<p>Java、C++</p>
<p>Spring、Hibernate</p>
<script type="text/javascript">
    var para = document.getElementsByTagName("body")[0].childNodes;
    for(var i = 0; i < para.length; i++)
        alert(para[i].nodeType);
</script>

will output 3, 1, 3, 1, 3, 1