JavaScript Dom Outline

Tag: Selected node content change HTML NTS delete node att before

DOM defines a standard way to access and manipulate HTML documents

Access (Find tags)
----Direct Lookup
document.getElementById ("Idname")
document.getElementsByTagName ("TagName")
Document.getelementsbyname ("name")
Document.getelementsbyclassname ("name")

----Navigation Properties
Nodeelement.parentelement//parent node Tag element
Nodeelement.children//All sub-tags
Nodeelement.firstelementchild//First child tag element
Nodeelement.lastelementchild//Last child tag element
Nodeelement.nextelementtsibling//Next sibling tag element
Nodeelement.previouselementsibling//Previous sibling tag element

Operation
1 text manipulation
Value operation
Element.innerhtml (Operations on labels)
Element.innertext (about text operations)
Assignment operation:
Element.innerhtml= ""
Element.innertext= ""



2 Property Operations <div key1=value1 key2=value2>div</div>
Attribute value: (1) Element.getattribute (attribute name).

(2) element. Attribute name (recommended)

Assignment operation: (1) Element.setattribute (property name, property value).

(2) element. Property Name = property value

About the class attribute:
Element.classlist.add ("Class value")
Element.classlist.remove ("Class value")

About the Select tag:
Ele_select.options.length=0 emptying operation
Ele_select.selectedindex index value of option selected


About the Style property: Implementing a CSS operation on a tag
Element.style. Style attribute = "value"




3 node operation

-----Add Tags
Generate a tag: var ele_create=document.createelement ("tag name")
<p></p>

Add Tags:

Parent tag. appendchild (add Tag object)
InsertBefore

-----Delete a node:

Parent tag. RemoveChild (the Label object found)

-----Replacement Node:
Parent tag. ReplaceChild (NewNode, found label object)


-----Copy a Node
Node.clonenode (true)//true means copying child nodes at the same time

Dom two types of binding event modes
Mode 1
<script>
function foo (self) {
Alert (123)
Self: <p onclick= ' foo (this) ' ></p>
}
</script>
<p onclick= "foo (this)" ></p>

Mode 2
A Label object. On Event =function () {
Alert (456)
This: The label object of the binding event
}

Specific events

Click event onclick
Get/Lose Focus onfocus onblur
Content changed onchange (selecte)
Onmouse Mouse-related events
Commit Event: onsubmit
Load event: OnLoad

JavaScript Dom Outline