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>Results: The interface prints out three helloes, accompanied by a prompt box "3". When clicking OK, the content displayed on the interface becomes hello hello world
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.getElementsByTagName(): Get the element.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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>Results: The interface prints out three helloes, accompanied by a prompt box "3". When clicking OK, the content displayed on the interface becomes hello hello world
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute(): Get element attributes.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example
<a id="aid"></a> <script> function getAttr1(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("id"); alert("a's ID is:"+attr); } function getAttr2(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("title"); alert("a's title content is: "+attr); } getAttr1(); getAttr2(); </script>Result: The prompt box "A's ID is: aid". After clicking OK, the prompt box "A's title content is: Get the tag attribute of a".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() sets element attributes.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example
<a id="aid2">aid2</a> <script> function setAttr(){ var anode=document.getElementById("aid2"); anode.setAttribute("title","Dynamic setting of a title attribute"); var attr=anode.getAttribute("title"); alert("Dynamic setting of title value is: "+attr); } setAttr(); </script>Result: The prompt box "Dynamic setting title value is: Dynamically set title property of a" pop-up.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 the dialog box "3" pops up on .1.2.3, and then press OK to pop up.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode(): Access the parent node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example
<div> <p id="pid"></p> </div> <script> function getParentNode(){ var div=document.getElementById("pid"); alert(div.parentNode.nodeName); } getParentNode(); </script>Result: A prompt box pops up: DIV.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.createElement(): Create element node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example:
<script> function createNode(){ var body=document.body; var input=document.createElement("input"); input.type="button"; input.value="button"; body.appendChild(input);//Insert node} createNode(); </script>Result: A button appears.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.createTextNode(): Create text node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example:
<script> function createNode(){ var element = document.createElement("div"); 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 <div> element and specifies a class attribute with a value of "message". Then, another text node is created and added to the element created earlier. The last step is to add this element to the <body> element in the document, so that you can see the newly created elements and text nodes in the browser.
Result: The page shows hello world.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.insertBefore(): Insert node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example
<div id="div"> <p id="pid">p element</p> </div> <script> function addNode(){ var div=document.getElementById("div"); var node=document.getElementById("pid"); var newnode=document.createElement("p"); newnode.innerHTML="Dynamic insertion of a p element"; div.insertBefore(newnode,node); } addNode(); </script>Result: The interface prints out: Dynamically insert a p element
p element
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.removeChild(): Delete the node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example
<div id="div"> <p id="pid">p element</p> </div> <script> function removeNode(){ var div=document.getElementById("div"); var p=div.removeChild(div.childNodes[1]); } removeNode(); </script>Result: The interface shows nothing.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetHeight: Web page size
12.scrollHeight: Web page size
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
example:
<script> function getSize(){ var width=document.documentElement.offsetWidth||document.body.offsetWidth;//Solve compatibility issues var height=document.documentElement.offsetHeight||document.body.offsetHeight; alert(width+","+height); } getSize(); </script>Show results:
This article mainly introduces JS DOM to control HTML elements. The content of the article mainly includes DOM, HTML, etc. The article comes from the Internet, please refer to it.