The full name of DOM is document object model . What is DOM used for? Assuming you think of your document as a single object, the DOM is the standard for how to manipulate and control this object using HTML or XML.

1. Get elements

When programming in Javascript, getting the elements of a document is the basic way to work with the DOM. Two of the basic methods used to get elements are described below: getElementById() and getElementsByTagName().

1. Get element by ID

The getElementById() method is a frequently used method in the DOM. It takes a specific element of the HTML document and returns a reference to it. In order to get an element, it must have an ID attribute.

An example is as follows:

<div id="div1">
    <p id="p1">
        I am the first P</p>
    <p id="p2">
        I am the second P</p>
 
 
window.onload = function () {
        var str = document.getElementById("p1").innerHTML;
        alert(str); // pop up I am the first P
    }</div>

2. Get by tag name

The getElementById() method works fine when only getting one or a few elements, but when I need to get more than one element at the same time, the getElementsByTagName() method is more suitable. The latter is to return all elements of the specified tag type in an array or list format.

An example is as follows:

<div id="div1">
    <p id="p1">
        I am the first P</p>
    <p id="p2">
        I am the second P</p>
 
 
window.onload = function () {
        var str = document.getElementsByTagName("p")[1].innerHTML;
        alert(str); //output I am the second P, because the P with index 1 is obtained, and the index starts from 0
    }    
 
window.onload = function () {
        var arr = document.getElementsByTagName("p");
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i].innerHTML);
        }
    }
 
window.onload = function () {
        var node = document.getElementById("div1");
     var node1 = document.getElementsByTagName("p")[1]; //Get from the acquired element
        alert(node1.innerHTML);
}</div>

3. Obtained by attribute name

The getElementsByName() method returns a collection of objects with the specified name.

This method is similar to the getElementById() method, but it queries the element's name attribute instead of the id attribute.

Also, because the name attribute may not be unique within a document (eg, radio buttons in HTML forms often have the same name attribute), all getElementsByName() methods return an array of elements, not an element

<html>
<head>
<script type="text/javascript">
<--Return a collection of all element objects with name=myInput-->
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />

</body>
</html>

  <--Get the value of the object whose subscript is 1 in the object-->
  var x=document.getElementsByName("myInput")[1].value;
  <--Get the object whose subscript is 1 in the object-->		
  var x=document.getElementsByName("myInput")[1];
  var y=x.getAttribute("type");
  alert(y);

2. Operational properties

1、getAttribute()与setAttribute()

getAttribute() is to read the content of the attribute. The modification made by the setAttribute() method to the document will make the display effect and/or behavior of the document in the browser window change accordingly, but we are passing the browser's view source The (view source) option to view the source code of the document will still see the original attribute value - that is, changes made by the setAttribute() method will not be reflected in the source code of the document itself. This "inconsistency" phenomenon stems from the working mode of the DOM: first load the static content of the document, and then refresh them in a dynamic way, and the dynamic refresh does not affect the static content of the document. That's the real power and allure of the DOM: Refreshing page content can happen without the end user performing a page refresh in their browser.

2. Examples

<title>Untitled Document</title>
<script language="JavaScript">
    function change() {
        var input = document.getElementById("li1");
        alert(input.getAttribute("title"));
        input.setAttribute("title", "mgc");
        alert(input.getAttribute("title"));
    }
</script>
 
 
<ul id="u">
    <li title="hello" id="li1">Magci</li>
    <li>J2EE</li>
    <li>Haha!</li>
</ul>
<input onclick="change();" type="button" value="Change">

Attributes commonly used in js