DOM manipulation of HTML basics

DOM (Document Object model)

The presentation of a Web page is a page composed of HTML tags, and the DOM object actually converts the HTML tag into a document object. The various tags of HTML can be found through the methods provided by JS in the DOM object. By locating the label, you can manipulate the label to make the page move and move the page up.

Get tags

//Get tags directlydocument.getElementById (' I1 ');//get the label with ID i1document.getElementsByTagName (' Div ');//get an array of labels by tag nameDocument.getelementsbyclassname (' C1 ');//get an array of labels based on the class propertyDocument.getelementsbyname (' Dsx ');//get an array of labels based on the Name property //Get tags indirectly varTmp=document.getelementbyid (' H-test '); Tmp.parentelement; //parent node Tag elementTmp.children;//All Child TagsTmp.firstelementchild;//first child label elementTmp.lastelementchild;//last child tag elementtmp.nextelementsibling;//Next sibling tag elementtmp.previouselementsibling;//previous sibling tag element

Action Label

First, the text content operation

innerHTML and InnerText tmp.innertext;//get the text content in a labelTmp.innertext= ' Old Iron double-click 666 ';//Change the contents of text within a labeltmp.innerhtml;//get all the contents of the tag, including the HTML codetmp.innerhtml= ' <a href= ' http://www.imdsx.cn ' > Big bro </a> '//InnerHTML can change a string containing HTML code into a labelinput, textarea label tmp.value;//get input, textarea parameterTmp.value= ' content '//Assigning the contents of input and textareaSelect label Tmp.value;//gets the value parameter of the SELECT tagTmp.value= ' option '//Modify Select OptionsTmp.selectedindex;//gets the option subscript for the Select labelTmp.selectedindex= 1//To change options for select by subscript

Event

Direct binding

To bind an event directly in a tag

Indirect binding

Obj.onclick=function () {} binding event via JavaScript for tags that require binding events

Direct Binding<input type= "button" value= "Submit" style= "float:left;margin-top:16px" ondblclick= "showvalued ();" >//this refers to the current label for this operation<input type= "button" value= "Submit" style= "float:left;margin-top:16px" ondblclick= "showvalued (this);" >//function receives this, locates the elements of the operation by looking for the parent, sibling, childfunctionshowvalued (THS) {alert (ths.previousElementSibling.value);} Indirect bindingvarobj = document.getElementById (' Onmouse '); Obj.onmouseover=function() {Obj.style.background= ' Red '; }; //The this generation of indirect bindings refers to the label found by getElementByIdvarobj = document.getElementById (' Onmouse '); Obj.onmouseout=function () {      This. Style.background = "; } //load force binding supports different two-segment code for the same operationvarobj = document.getElementById (' Onmouse '); Obj.addeventlistener (' Click ',function() {Console.log (111) }, false) onfocus ()//take action when getting cursorOnblur ()//lose focus do operationOnClick ()//action when clickedOnDblClick ()//action when double-clickonMouseOver ()//mouse hover trigger actiononMouseOut ()//trigger action when mouse leaves hover

Action Style

Tmp.classname = ' C1 ';//change Label class property can have only one class propertytmp.classlist;//get array of stylesTmp.classList.add (' AAA ');//Add Style arrayTmp.classList.remove (' AAA ');//Delete a styletmp.checked;//gets the status of the checkbox true to tickmanipulating individual styles style.xxx//manipulation styles are more granular, manipulating a single style property, or adding a style property to a labelStyle.backgroundcolor//example: In CSS, styles can be connected through "-", in JavaScript, all "-" is removed, "-" followed by the first character uppercase

Action Properties

// set properties, add attributes or custom properties to labels  // Delete property, delete the specified attribute  in the label // get all the properties of the label

Create a label

Object Mode Create label

CreateElement (TagName)//Create a Label object from the DOMappendchild (tagobj)//Add a sub-label object to the parent tagCreate a label by string insertAdjacentHTML (where, tagstr)//Add a child, brother tag inside or outside a parent tagBeforebegin//insert to front of get to labelAfterbegin//insert to the front of the child label that gets to the labelBeforeEnd//insert to the back of the child label that gets to the labelAfterend//insert to get to the back of the label

Other operations

 console.log (msg) //  print data   alert ()  //  bullet box prompt   confirm ()  //  Confirm the bullet box, return TRUE or false   Location.href  //   location.href  = ' http://www.imdsx.cn ' // " Span style= "COLOR: #008000" > redirect   Location.reload ()  //  refresh   location.href  = Location.href //  refresh   

Timer

SetInterval (function, time)//set the timer to execute once every timeclearinterval (intervalobj)//Clear Timer  functiontimeinterval () {varSetint = SetInterval (function() {Console.log (1); //execute once to end a scheduled taskclearinterval (Setint)},1000)} setTimeout (function, time)//set the timer, after the page load is completed, time, execute function, only oncecleartimeout (timeoutobj)//the timer is cleared during the wait process  functiontimeOutInterval () {varSetTime = SetTimeout (function() {Console.log (' After clicking, two seconds after the prompt copy ')     }, 2000); //wait for the process, clear the timercleartimeout (settime)}

DOM manipulation of HTML basics