JavaScript common DOM Operations collation

1. Select the useful and common part of Dom operation, omit the useful but obvious compatibility part
Object Attribution for 2.DOM properties and methods may not be completely accurate
3. Some general compatibility and features have been identified (mainly ie8-9 up and down)

Node type

node Type	Node Value
Label node (Element)	1
Attribute node (Attr)	2
Literal node (text)	3
CDATA Node (cdatasetion)	4
Entity reference node (EntityReference)	5
Entities Node (entity)	6
Processing instruction node (processinginstruction)	7
Note Node (Comment)	8
Document node (documents)	9
Document type node (DocumentType)	10
Document fragment node (documentfragment)	11
DTD declaration node (Notation)	12

Node type

Properties	Description
NodeType	Node type
NodeName	Node name
NodeValue	Node value
ChildNodes	Child nodes
ParentNode	Parent node
Ownerdocument	Document node
PreviousSibling	Previous node
NextSibling	Next node
FirstChild	First child node
LastChild	Last child node

Document type

Properties	Description
documentelement	HTML tags
head [not compatible]	Head Label
body	body label
URL	current page URL
re Ferrer	source page URL
domain [modifiable]	page name
imag Es	All pictures collection
Cookie	cookie information
title	page title
activeelement	Current focus element
documentmode	document mode
readyState	Document Status
doctype	Document type declaration
Scripts	script collection
forms	Form label Collection
Children A collection of child nodes of the	element type
DefaultView	document associated Window object

Method	Description
getElementById ()	Returns the element that corresponds to the ID
Getelementsbyname ()	Returns the corresponding Name element collection
getElementsByTagName ()	Returns the corresponding tag name element collection
Getelementsbyclassname ()	Returns the collection of elements for the specified class name
Queryselector ()	Returns the first element that matches a selector
Queryselectorall ()	Returns a collection of elements that match a selector
CreateElement ()	Creating ELEMENT nodes
createTextNode ()	Create a text node
CreateAttribute ()	To create an attribute node
Createcomment ()	Create a Comment node
Createdocumentfragment ()	Create an empty DocumentFragment object
Matchesselector ()[not compatible enough, requires a prefix]	Whether the selector conforms to the element match
Write ()[cursor does not wrap after output]	Document Text Write
Writein ()[cursor wrapping after output]	Document Text Write
Implementation.hasfeature (feature, version)	Feature monitoring

Element type

Properties	Description
Id	Id
ClassName	Class name
Title	Title
Style	Sets or returns the style properties of an element
InnerHTML	Sets or returns the contents of an element
outerHTML[includes itself]	Sets or returns the contents of an element
Textcontent[Ie-innertext]	Set or return text content
Contenteditable	Sets or returns the editable state of an element
Iscontenteditable	Whether it can be edited
Childelementcount	Number of child element nodes
Firstelementchild	First element node
Lastelementchild	Last element node
Previouselementsibling	Previous element node
Nextelementsibling	Next element node

Method	Description	return
Focus ()	Set focus
Blur ()	Lose focus
AppendChild (node)	After the list of child nodes is inserted	New node
InsertBefore (node, reference node)	Inserting a node before the reference node	Inserting nodes
RemoveChild (node)	Node deletion	Be abridged.
ReplaceChild (node, node replaced)	Node substitution	Node being replaced
CloneNode (Boolean)	Replication nodes	Clone node
ImportNode (node, Boolean)	Get a node from the a document and import it into the B document (similar to the CloneNode method)
Contains (node)	Whether the node is a child of the calling node	Boolean value
Hasfocus ()	Are you getting the focus	Boolean value
HasChildNodes ()	Whether a child node exists	Boolean value
Isdefaultnamespace (URL)	Whether a namespace is specified	Boolean value
Isequalnode (node)	Two elements are equal	Boolean value
IsSupported (feature, version)	Whether a feature is supported	Boolean value

attr type

Properties	Description
Name	Property name
Value	Property value
Isid	is the ID type
Specified	Whether the property is specified
Length	Property length
Attributes	Property Collection

Method	Description
GetAttribute ()	Get property value
GetAttributeNode ()	Get attribute Node
SetAttribute ()	Setting property values
Setattributenode ()	Set attribute node
RemoveAttribute ()	Delete Property
Removeattributenode ()[ie not supported]	To delete an attribute node
Hasattribute ()	Whether the specified property exists
HasAttributes ()	Whether a property exists

Text type

Method	Description
AppendData (text)	Add text to the end of the node
DeleteData (location, quantity)	Deletes n characters starting at the specified position
InsertData (position, text)	Insert text from a specified position
ReplaceData (position, quantity, text)	Replace text with text from offset position to Offset+count
Splittext (location)	Splits the current text node into two text nodes from a specified location
Substringdata (location, quantity)	Intercepts a string from the offset position to Offset+count
Normalize ()	Merges adjacent text nodes and removes empty text nodes

Table Manipulation TABLE Element

Property Method	Description
Caption	CAPTION element pointer
Tbodies	Tbody Collection
TFoot	Tfoot Collection
THead	Thead elements
Rows	Table All Rows Collection
Createthead ()	Create a <thead> element, put it in a table, return a reference
Createtfoot ()	Create a <tfoot> element, put it in a table, return a reference
Createcaption ()	Creates a caption element, places it in a table, returns a reference
Deletethead ()	Delete thead element
Deletetfoot ()	Delete tfoot element
Deletecaption ()	Delete Caption Element
DeleteRow (POS)	Delete a row at a specified location
InsertRow (POS)	Inserts a row to the specified position in the rowset

Tbody elements

Property Method	Description
Rows	Tbody All Rows Collection
DeleteRow (POS)	Delete a row at a specified location
InsertRow (POS)	Inserts a row to the specified position in the rowset, returning a reference

TR element

Property Method	Description
Cells	TR all cell collections
Deletecell (POS)	Delete a cell at the specified location
InsertCell (POS)	Inserts a cell into the cell collection at the specified location, returning a reference

Style operation Access Element style

• Dom Style--JS can only access direct style properties through Dom.style, and cannot access embedded style sheets and external style sheets

attribute Method (Dom.style)	Description
Csstext	Returns the string form of all styles in the style attribute
Length	Returns the number of CSS properties in an element
Parentrule	Cssrule object that returns the CSS information
Getpropertycssvalue (name)	Cssvalue object that returns the value of the property (contains Csstext and Cssvaluetype)
Getpropertypriority (name)	Whether the!important property is used
GetPropertyValue (name)	Returns the string value of a given property
Removeproperty (name)	Remove a given property from a style
SetProperty (Name,value, priority)	Set the given property to the appropriate value and add the priority

• Calculated style--the style that is actually applied after the style is stacked

Property Method	Description
Document.defaultView.getComputedStyle (DOM, pseudo-element string)[ie not supported]	Returns all calculated styles for the current element
Dom.currentstyle[IE support]	Returns all calculated styles for the current element

Manipulating style Sheets

• document.stylesheets--all style sheets applied to a document

properties (Document.stylesheet[n])	Description
Cssrules[IE not supported]	All style rules in a single style sheet
Rules[IE support]	All style rules in a single style sheet

• Document.stylesheets[n].cssrules/rules under

Properties	Description
Csstext[IE not supported]	String of the entire style rule
Selectortext	Style Selector
Style	Specific Style object

Size and Offset

Properties	Description
OffsetParent	The parent container of the offset
Getboundingclientrect ()	Get page element actual position and width height (return Property object)
Offsetwidth	Element width (visual content area + scroll bar + padding + border)
Offsetheight	Element height (viewable content area + scroll bar + padding + border)
Offsetleft	The left distance from the adjacent parent
OffsetTop	Top distance to adjacent parent
ClientWidth	Element width (visual content area + inner margin)
ClientHeight	Element height (visual content area + inner margin)
ClientLeft	The distance from the edge of the inner margin to the edge of the border (left border)
ClientTop	The distance between the edge of the inner margin and the edge of the border (top border)
ScrollWidth	Element width (visual content area + scrolling content area + inner margin)
ScrollHeight	Element height (visual content area + scrolling content area + inner margin)
ScrollLeft	Hidden scrolling width (width to scroll)
ScrollTop	Hidden Scroll Height (width to scroll)

Compatibility

Clientwidth/clientheight and Scrollwidth/scrollheight There are tour differences

Wen/carries Jade (Jane book author)
Original link: http://www.jianshu.com/p/e1391dc17361
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

JavaScript common DOM Operations collation