HTML Basics: Dom manipulation

DOM (Document Object model)

A Web page is encapsulated into a DOM object that operates on the label of the page through JS in the DOM

First, get the object

Right-click on the browser page-check--console, the console console allows you to enter commands directly through the DOM

//get the label directly document.getElementById ('I1'); //gets the label with ID i1 document.getelementsbytagname ('Div'); //gets an array of labels based on the tag name Document.getelementsbyclassname ('C1'); //gets the array of labels based on the Class property Document.getelementsbyname ('DSX'); //get an array of labels based on the Name property//indirect get label var tmp=document.getelementbyid ('h-test'); Tmp.parentelement; //parent node tag element Tmp.children;//all sub-tags tmp.firstelementchild;//The first child tag element tmp.lastelementchild;//The last child tag element tmp.nextelementsibling;//Next brother tag element tmp.previouselementsibling;Previous sibling tag element

Ii. content of the text

InnerText and innerHTML

gets the text content in the label tmp.innertext=' Change the text content of the label ';  //'<a href= "http://www.imdsx.cn" > Change tag HTML code </a>' //

There is a piece of HTML code like this:

First get to div object: Var div=document.getelementbyid (' Inner1 ')

InnerText gets the text content inside the div tag: div.innertext, the result is only the text within the DIV tag

INNERHTMLL gets all the HTML code inside the div tag: div.innerhtml, the result is the HTML code inside the div:

You can also change text and HTML through innertext and innerHTML:

div.innertext= ' Change the text of the DIV tag '

Div.innerhtml= ' <a href= ' www.baidu.com ' ></a> '

Once you have entered these commands, review Div.innertext and div.innerhtml again to see

Input and TEXTAREA

Tmp.value;  ' content ' //Assign value to input, textarea content

Select Label

 ' option ' ////= 1//Change the option of select by subscript

The HTML code is as follows

var Tmp=document.getelementbyid (' s1 ')//Get Object

Get value

Modify Value

Three, the Operation style

 tmp.classname =  " c1  " ;  Change the Label class property to have only one class property tmp.classlist;   Get the style array Tmp.classList.add (  " aaa   ");  add style array tmp.classList.remove (  " aaa   ");  delete style tmp.checked;   Gets the state of the checkbox true to tick the action individual style style.xxx // Manipulating styles is more granular, manipulating individual style properties, or adding a style property to a label Style.backgroundcolor //Example: Styles in CSS can be connected through "-", in JavaScript, all "-" are removed, "-" capitalization Action property  

Note: CSS style with-, in JS need to-remove, at the same time will-the first letter in the back, such as Background-color in JS is BackgroundColor

Iv. Operation Properties

SetAttribute (key,value)//////Get all the properties of the label

When we are doing selemium, we need to locate the label. However, for Display:none, you cannot get it, you need to remove the attribute before you can manipulate

V. Create a label

CreateElement (tagName)//// Add a sub-label object  within the parent tag ////////// Insert to get to the back of the label

Six, string manipulation

1. String concatenation:

2. Get a character from a string according to the angle label

3. Get the string length

4. The angle of the characters in the string

5. Case conversion of strings

6. Get substring

Gu Tou regardless of tail:

7.

Seven, page bullets and URLs

Console.log (msg)///////Confirm the bullet box, click Confirm to return True, click Cancel to return false  //'http ://www.imdsx.cn' ////= location.href//Refresh

HTML Basics: Dom manipulation