Dom object for JavaScript manipulation

What do you call dom?

Dom is the Document Object model, which is a set of API interfaces based on browser programming (in this tutorial, which can be said to be DHTML programming), the recommended standard for the web, and each browser has some subtle differences, Among them, Mozilla's browser is closest to the standard.

Dom belongs to the browser, not the core content of the specification in the JavaScript language specifications.

DOM node tree

In HTML all things have nodes, Dom regards HTML document as a node tree, through DOM, all nodes in the node tree can be accessed through JavaScript, all HTML elements can be modified, created, deleted.

Find element

1. Direct Search

Method name	Describe
getElementById (ID) (document)	Gets the element that has the specified unique ID property value in the document
Getelementsbytagname_r (name)	Returns an array of child elements in the current element with the specified tag name
Document.getelementsbyclassname	Get a collection of tags based on attributes
GetAttribute (name)	Returns the attribute value of an element, specified by name

2. Indirect search

Property name	Describe
ChildNodes	Returns an array of all child elements of the current element
ChildNodes	Returns all child elements of the current element
FirstChild	Returns the first subordinate child element of the current element
LastChild	Returns the last child element of the current element
NextSibling	Returns the element immediately following the current element
PreviousSibling	Returns the element immediately preceding the current element
Parentelement	Returns the label element of its parent node
Children	Returns all its child tags
Firstelementchild	Returns the first child tag element
Lastelementchild	Returns the last child tag element
Nextelementtsibling	Return下一个兄弟标签元素
Previouselementsibling	Returns the previous sibling tag element

With the power and flexibility of XML, XML is used as the communication medium between the browser and the server.

Manipulating elements

1, dynamic creation of content in the use of the information of the DOM properties and methods

Properties/Methods	Describe
Document.createelement_x (TagName)	The Createelement_x method on a Document object can create an element specified by tagname. If a string div is used as a method parameter, a DIV element is generated
document.createTextNode (text)	The createTextNode method of a Document object creates a node that contains static text
<element>.appendchild (Childnode)	The AppendChild method adds the specified node to the list of child nodes of the current element (as a new child node).
<element>.setattribute (name, value)	These methods get and set the value of the name attribute in the element, respectively
<element>.insertbefore (NewNode, TargetNode)	Inserts the node newnode as a child of the current element before the TargetNode element
<element>.removeattribute (name)	This method removes the attribute from the element name
<element>.removechild (Childnode)	This method removes the child element from the element Childnode
<element>.replacechild (NewNode, OldNode)	This method replaces the node OldNode with the node NewNode
<element>.haschildnodes ()	This method returns a Boolean value that indicates whether the element has child elements

1. Access the elements in the DOM, primarily through the getElementById (), getElementsByTagName (), Getelementsbyclassname () method, as follows:

To create a text box:

[HTML]

1. UserName:<input type="text" name="uname" class="U">

Get text box contents via JS:

[JavaScript]

/Get text box contents by ID

document.getElementById ("name"). Value;

text box contents by tag name

document.getElementsByTagName ("input") [0].value;

Get text box Contents by name

Document.getelementsbyname ("uname") [0].value;

Get text box content from class

Document.getelementsbyclassname ("U") [0].value

/Gets the text box content document.getElementById ("name") by ID. value;//through the Label name text box content document.getelementsbytagname ("input") [0].value ;//Gets the text box content document.getelementsbyname ("uname") by name [0].value;//Gets the text box contents by class Document.getelementsbyclassname (" U ") [0].value

2. adding attributes to elements in the DOM

To create a text box:

[HTML]

1. <input type="text" name="uname" class="U">

<input type= "text" name= "uname" class= "U" >

Add id attribute to INPUT element via JS code

[Java]

1. document.getElementsByTagName ("input") [0].id="name";

document.getElementsByTagName ("input") [0].id= "name";

3. Inserting content in DOM elements

Div:

[HTML]

1. <div id="context">hello,2017</div>

<div id= "Context" >Hello,2017</div>

Insert the content using the innerHTML attribute in JS and use GetAttribute () to get the property value in the tag

[JavaScript]

1. Inserts content into the specified element and replaces content already in the element
2. document.getElementById ("context"). innerhtml="Happy Holidays";

Inserts the content into the specified element and replaces the content already in the element document.getElementById ("context"). Innerhtml= "Happy Holidays";

[JavaScript]

1. Gets the attribute value in the element
2. document.getElementById ("context"). GetAttribute ("id");

Gets the attribute value in the element document.getElementById ("context"). getattribute ("id");

4. Adding and deleting elements in the DOM

Div:

[HTML]

1. <div id="context">
2. <font color="Red">hello,2017</font>
3. </div>

<div id= "Context" >   <font color= "Red" >Hello,2017</font></div>

1) Span style= "Font-size:medium" > Use appendchild () in the DOM append element

[HTML]

1. Create a button new element in the DOM
2. var btn=document.createelement ("button");
3. Text content
4. var context=document.createTextNode ("Ferry Man, you deserve to see!")  ");
5. Append content to the button label
6. Btn.appendchild (Context);
7. Appends a new element to an element specified in HTML
8. document.getElementById ("Div1"). AppendChild (BTN);

The DOM creates the button new element var btn=document.createelement ("button");//text content var Context=document.createtextnode ("Ferry Man, you are worth seeing!") ");//Append the contents to the button label Btn.appendchild (Context);//Append the new element document.getElementById (" Div1 ") to the element specified in the HTML. appendchild ( BTN);

2) in JS

Useremovechild () in the DOM Delete Element

[HTML]

1. Get parent Node
2. var pare=document.getElementById ("context");
3. Get child nodes
4. var p=document.getelementsbytagname ("font") [0];
5. Delete the child nodes under the parent node and delete the child nodes without getting the parent node directly
6. Pare.removechild (P)

Dom object for JavaScript manipulation