How to use DOM in JS to control HTML elements

This article mainly introduces the relevant information about using DOM to control HTML elements in JS. Friends in need can refer to it

1.getElementsByName(): Get name.

~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

Example:

<p name="pn">hello</p>
   <p name="pn">hello</p>
   <p name="pn">hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByName("pn");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML="world";
          }
   </script>

Result: The interface prints three hellos, accompanied by a prompt box "3". When OK is clicked, the content displayed on the interface changes to hello hello world

~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

2.getElementsByTagName(): Get elements.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example

<p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByTagName("p");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML="world";
          }
   </script>

Result: The interface prints three hellos, accompanied by a prompt box "3". When OK is clicked, the content displayed on the interface changes to hello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.getAttribute(): Get element attributes.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example

<a id="aid" title="得到a的标签属性"></a>
   <script>
           function getAttr1(){
               var anode=document.getElementById("aid");
               var attr=anode.getAttribute("id");
               alert("a的ID是:"+attr);
            }
           function getAttr2(){
              var anode=document.getElementById("aid");
              var attr=anode.getAttribute("title");
              alert("a的title内容是："+attr);
           }
            getAttr1();
            getAttr2();
  </script>

Result: A prompt box pops up "the ID of a is: aid". After clicking OK, a prompt box pops up "the title content of a is: get the label attribute of a" .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() setting Element properties.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example

<a id="aid2">aid2</a> 
   <script>
        function setAttr(){
           var anode=document.getElementById("aid2");
           anode.setAttribute("title","动态设置a的title属性");
           var attr=anode.getAttribute("title");
           alert("动态设置的title值为："+attr);
       }
       setAttr();
   </script>

Result: A prompt box pops up "The dynamically set title value is: Dynamically set the title attribute of a".

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.childNodes(): Access child nodes.

~~~~~~~~~~~~~~~~~~~~~~~~~~··

Example

<ul><li>1</li><li>2</li><li>3</li></ul>
   <script>
           function getChildNode(){
                var childnode=document.getElementsByTagName("ul")[0].childNodes;
                alert(childnode.length);
                alert(childnode[0].nodeType);
           }
          getChildNode();
  </script>

Result: The interface prints out .1 .2 .3 and a dialog box "3" pops up. After pressing OK, "1" pops up.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6.parentNode(): Access the parent node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

Example

<p>
        <p id="pid"></p>
   </p>
   <script>
        function getParentNode(){
            var p=document.getElementById("pid");
            alert(p.parentNode.nodeName);
        }
       getParentNode();
  </script>

Result: Pop-up prompt box: p.

~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~

7.createElement(): Create an element node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example:

 <script>
       function createNode(){
             var body=document.body;
             var input=document.createElement("input");
             input.type="button";
             input.value="按钮";
             body.appendChild(input);//插入节点
        }
         createNode();
 </script>

Result: A button appears.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

8.createTextNode(): Create a text node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example:

    <script>
        function createNode(){
              var element = document.createElement("p");
              element.className = "message";
              var textNode = document.createTextNode("Hello world!");
              element.appendChild(textNode);
              document.body.appendChild(element);
        }
      createNode();
   </script>

Code analysis: This example creates a new

element and assigns it a class attribute with a value of "message". Then, another text node is created and added to the previously created element. The last step is to add this element to the element in the document, so that the newly created elements and text nodes can be seen in the browser.

Result: The page displays hello world.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9.insertBefore(): Insert node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Example

<p id="p">
          <p id="pid">p元素</p>
    </p>
    <script>
        function addNode(){
             var p=document.getElementById("p");
             var node=document.getElementById("pid");
             var newnode=document.createElement("p");
             newnode.innerHTML="动态插入一个p元素";
             p.insertBefore(newnode,node);
        }
        addNode();
    </script>

Result: The interface prints out: Dynamically insert a p element

                                                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10.removeChild(): Delete the node.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

Example

<p id="p">
          <p id="pid">p元素</p>
    </p>
    <script>
       function removeNode(){
               var p=document.getElementById("p");
               var p=p.removeChild(p.childNodes[1]);
        }
      removeNode();
   </script>

Result: The interface displays nothing.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11.offsetHeight :Web page size

12.scrollHeight:Web page size

~~~~~~~~~~~~~~~~~~~~~~~~~~·

Example:

  <script>
      function getSize(){
          var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
          var height=document.documentElement.offsetHeight||document.body.offsetHeight;
          alert(width+","+height);
      }
      getSize();
 </script>

Display result:

The above is the entire content of this article , I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to display JSON data in html

##

The above is the detailed content of How to use DOM in JS to control HTML elements. For more information, please follow other related articles on the PHP Chinese website!