Js-dom element Methods and properties

Last Update:2017-11-09 Source: Internet

Author: User

Tags border color tagname

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

js-dom element methods and properties S-dom ElementMethods and Properties
One, get the HTML element
1.getElementByID (ID)
By accessing the ID of the element, this is the method by which the DOM accesses the page element in a basic way.
Example
<div
Id= "divID" > Testing </div>
<script language= "JavaScript" >
Var
Div=document.getelementbyid ("divID");
alert (div.nodename);
Display element name
</script>
If the ID is not unique within the element, then the first ID will be obtained.
2.getElementsByName (name)
Only for input
Radio checkbox and other elements, return an array of elements named name
Example
<div
Name= "George" ></div>
<input
Name= "George" ></div>
<script language=javascript>
Var
Ge=document.getelementsbyname ("George");
Alert
(Georges.length); Gets the number of Georges, the Div-hmm effect
</script>
3.getElementsByTagName (tagname)
Returns an array of elements that have tagname. Working with a large DOM structure will use it.
Two, DOM
ElementCommon methods
1.appendChild (node)
Add content
Appends a node to the current object, example:
<div
id= "Test" >123</div>
<script type= "Text/javascript" >
Var
Newdiv=document.createelement ("div");
var Newtext=document.createtextnode ("A
New Div ");
Newdiv.appendchild (NewText)
;
document.getElementById ("Test"). AppendChild (Newdiv)
;
</script>
Of course, the above function is used document.getElementById ("test"). Innerhtml= "Testing" can be achieved, unfortunately, InnerHTML does not belong to the DOM.
2,removechild (childreference)
Removes the child node of the current node and returns the node
<div
Id= "Father" ><div id= "Child" >a
Child</div></div>
<script type= "Text/javascript" >
Var
Childnode=document.getelementbyid ("Child");
Var
Removednode=document.getelementbyid ("Father"). RemoveChild (Childnode)
</script>
3.cloneNode (Deepboolean)
Copy and return the current replication node, because the ID of the original node was copied Properties, so change the ID in the document tree PropertiesTo ensure that the ID is unique.
4,insertbefore (newelment,targetelement) Insert a new node
Inserts a new node in the current node, if targetelement is null, the new node is the last node.
Example
<body>
<span
Id= "Lovespan" > Bear's Paw I want to!</span>
</body>
<script
Type= "Text/javascript" >
Var
Lovespan=document.getelementbyid ("Lovespan"); Get ID
Var
Newspan=document.createelement ("span");
Var
Newspanref=document.body.insertbefore (Newspan,
Lovespan);
Newspanref.innerhtml= "Fish and";
</script>
Three, DOM ElementCommon Properties
1. Childenodes returns all child node objects,
For example
<ul
Id= "MyList" >
<li> USA </li>
<li> Italy </li>
<li> Canada </li>
</ul>
<script>
Var
Msg= "";
var Mylist=document.getelementbyid ("MyList")
for (i=0;
i<mylist.childnodes.length; i++) {
Var
Li=mylist.childnodes[i];
Msg+=li.innertext;
}
Alert
(msg);
</script>
2,innerhtml
It's a standard but it doesn't book Dom
For example:
<div
Id= "BBB" ><span id= "AAA" > I pull </span></div>
<input
Type=button value= "Click to see" >
<script
language= "JavaScript" >
function
Change ()
{
document.getElementById ("AAA"). innerhtml=
"Modification and modification";
}
</script>
3,style
This is an extremely important Properties, you can get and modify each individual style.
Example: Document.getelementbytagname ("body") [0].style.backgroundcolor= "#cccccc"
4. FirstChild returns the first child node
LastChild
Returns the last child node
ParentNode returns the object of the parent node.
NextSibling
Returns the object of the next sibling node
PreviousSibling returns the object of the previous sibling node
NodeName
Returns the HTML tag name of the node, using uppercase letters in English, such as P, FONT
5,click ()
A single click of the execution element can be used to trigger the OnClick function via a scriptJS Set the properties of Div

SetAttribute Method:

var a=document.createelement ("div"); Create a new div
A.id= "Div1";
Name the new Div
A.style.setattribute ("ZIndex", 2);
Set DIV Stacking order
A.style.setattribute ("TextAlign", dalign);
Alignment
A.style.setattribute ("Border", "#e6e7e8 1px solid");
Border color
A.style.width=divwidth; Div width
A.style.height=dheight;
div height
A.setattribute ("position", "absolute");
A.style.backgroundcolor=dbgcolor;
Div background
A.setattribute ("Z-index", "2"); div stacking Order
A.style.top =
divtop+ "px"; Div Top Margin
A.style.left = divleft+ "px";
Div left margin
A.setattribute ("InnerHTML", info10[0].firstchild.data+ "<br>" +info11[0].firstchild.data);
Document.body.appendChild (a); New Div End

Hide Div:document.getElementById ("Ah"). style.display= "None"//block appears

document.getElementById ("Ah"). Style.disabled= "true"

document.getElementById ("Ah"). Style.readonly= "true"

JS Get node DOM operation

Interface	NodeType Constants	NodeType value	Note
Element	Node.element_node	1	ELEMENT node
Text	Node.text_node	3	Text node
Document	Node.document_node	9	Document
Comment	Node.comment_node	8	Text of the comment
DocumentFragment	Node.document_fragment_node	11	Document fragment
Attr	Node.attribute_node	2	Node properties

CreateAttribute ()

TD valign= "Top" width= "164" >

Method	Description
Creates a new attr node with the specified name.
Createcomment ()	Creates a new comment node with the specified string.
createelement ()	Creates a new element node with the specified tag name.
createTextNode ()	Creates a new Textnode node with the specified text.
getElementById ()	Returns the element node in the document that has the specified ID attribute.
getElementsByTagName ()	< p> returns all element nodes in the document that have the specified tag name.

Property	Describe
Attributes	If the node is an element, the attribute of the element is returned in namednodemap form.
ChildNodes	The child nodes of the current node are stored in node[] form. If there are no child nodes, an empty array is returned.
FirstChild	Returns the first child node of the current node in the form of node. Null if there are no child nodes.
LastChild	Returns the last child node of the current node in the form of node. Null if there are no child nodes.
NextSibling	Returns the sibling next node of the current node as node. If there is no such node, NULL is returned. Next Sibling node
NodeName	The name of the node, and the element node represents the tag name of the element.
NodeType	Represents the type of node.
ParentNode	Returns the parent node of the current node in the form of node. Null if there is no parent node.
PreviousSibling	Returns the sibling node immediately before the current node, in the form of node. If there is no such node, NULL is returned. Previous sibling node

AppendChild ()

TD valign= "Top" width= "$" >

Method	Description
By adding a node to the current node childnodes[] Group to add nodes to the document tree.
CloneNode ()	Copy the current node, or copy the current node and all its descendant nodes.
HasChildNodes ()	Returns true if the current node has child nodes.
InsertBefore ()	Inserts a node into the document tree, positioned before the specified child node of the current node. If the node already exists, it is removed and then inserted into its place.
RemoveChild ()	Removes and returns the specified child node from the document tree.
ReplaceChild ()	Removes and returns the specified child node from the document tree, replacing it with another node.

Js-dom element methods and properties

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More