DOM (Document Object Model) refers to the Document Object Model
Primary values are used to manipulate html documents
All nodes have a parent node, and only one node has no parent element (root node) HTML
A node can have more than one child node, but a node has and only one parent node
DOM methods for JavaScript
The method is what we can do on a node (an HTML element).
Programming interfaces can access HTML DOM through JavaScript (and other programming languages).All HTML elements are defined as objects, while programming interfaces are object methods and object properties.
The method is an action you can perform (such as adding or modifying elements).
Properties are values that you can get or set, such as the name or content of a node.
HTML DOM Object-Method and Properties
1. Common DOM operation methods:
getElementById() returns an element with the specified ID.Element of ID. getElementsByTagName() returns a list of nodes (collections/arrays of nodes) containing all elements with the specified tag name. getElementsByClassName() returns a list of nodes that contain all the elements with the specified class name. getElementsByName() returns a list of nodes with all elements of the specified name.
appendChild() adds a new child node to the specified node. removeChild() deletes child nodes. replaceChild() replaces the child node. insertBefore() inserts a new child node in front of the specified child node.
<script type="text/javascript"> window.onload=function(){ //appendChind adds a new node to the specified node var aa=document.createElement('a'); document.getElementById('div1').appendChild(aa) //removeChild() deletes child nodes var span2=document.getElementById('span2') document.getElementById('div2').removeChild(span2) //ReplaceChild replaces child nodes var pp=document.createElement('p'); //console.log(pp) var span3=document.getElementById('span3') document.getElementById('div3').replaceChild(pp,span3) //InsertBefore (new node, old node) insert new node var span=document.createElement('span'); var span4=document.getElementById('span4'); document.getElementById('div4').insertBefore(span,span4) } </script> </head> <body> <div id="div1">1 <span id="span1"> </span> </div> <div id="div2">2 <span id="span2"> </span> </div> <div id="div3">3 <span id="span3"> </span> </div> <div id="div4"> <span id="span4"> </span> </div> </body>
createElement() creates element nodes. createTextNode() creates a text node. createAttribute() creates an attribute node. getAttribute() returns the specified property value. setAttribute() sets or modifies the specified property to the specified value.
<script type="text/javascript"> window.onload=function(){ //createElement() creatin var span=document.createElement('span'); console.log(span)//<span></span> // createTextNode() Creates a text node var tex=document.createTextNode('This is created by a text node'); document.getElementById('div1').appendChild(tex); //createAttribute() Creates the attribute node var nod=document.createAttribute('class'); nod.value='div02'; document.getElementById('div2').setAttributeNode(nod)//<div id="div2" class="div02">2</div> //getAttribute() Gets the specified attribute value var div3=document.getElementById('div3'); console.log(div3.getAttribute('id'))//div3 //setAttribute() Sets or modifies the value of a specified property //Set up: document.getElementById('div4').setAttribute('class','div04')//<div id="div4" class="div04">4</div> //Modify: document.getElementById('div5').setAttribute('id','div05')//<div id="div05"></div> } </script> </head> <body> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5"></div> </body>
2. Common attributes:
innerHTML - Text value of a node (element) parentNode - The parent node of a node (element) childNodes - Child node of a node (element) attributes - Attribute node of a node (element) nodeName - Name of the node nodeValue - Value of the node nodeType - Type of node
<script type="text/javascript"> window.onload=function(){ //innHTML sets or gets the start and end HTML tags for an element //Obtain: console.log(document.getElementById('div1').innerHTML);//123456 //Set up: document.getElementById('div1').innerHTML='abcdefg'//<div id="div1">abcdefg</div> //parentNode returns the parent node of the specified node console.log(document.getElementById('span3').parentNode.nodeName)//DIV console.log(document.getElementById('span3').parentNode.nodeType)//1 represents the basic label //nextSibling Brothers Node console.log(div1.nextSibling.nextSibling);//<div id="div2">...<.div>Returns the div2 collection //childNodes returns child nodes var chil=document.getElementById('div3').childNodes; console.log(chil);//NodeList(3) var chill=document.getElementById('div3').children; console.log(chill)//HTMLCollection [span#span3, span3: span#span3] //Attributes returns the specified set of node attributes //Node Name Specifies the node name of the node //If the node is an element node, nodeName returns the label name //If the node is a property node, nodeName returns the name of the property //Node Value specifies the node value of the node console.log(document.getElementById('inpu1').nodeValue) //nodeType Specifies the type of node console.log(document.getElementById('div4').nodeType)//1 } </script> </head> <body> <div id="div1">123456</div> <div id="div2">aaa <span id="span2"> </span> </div> <div id="div3">bbb <span id="span3"> asdgfref </span> </div> <div id="div4"> <input type="text" name="inpu1" id="inpu1" value="This is a text box" /> </div> </body>
Reference: https://www.w3cschool.cn/javascript/js-htmldom.html