What are the commonly used DOM operations in js?

. The practical and commonly used parts of DOM operations are selected, and the practical but obviously compatible parts are omitted
2.The type attribution of DOM attributes and methods may not be completely accurate
3. Some general compatibility and features are marked (mainly ie8-9 up and down)

Node type

##Label node(Element)1Attribute node(Attr )2Text Node(Text)3CDATA Node(CDATASetion)4Entity Reference Node(EntityReference)5Entity Node(Entity)6ProcessingInstruction7Comment Node(Comment)8Document Node(Document)9Document Type Node(DocumentType)10Document Fragment Node (DocumentFragment)11DTD Declaration Node (Notation)12

Node type	Node value

Node type

##AttributenodeTypenodeNamenodeValuechildNodesparentNodeownerDocumentpreviousSiblingnextSiblingfirstChildlastChildDocument type

Description
Node type
Node name
Node value
Child nodes
Parent Node
Document Node
Previous Node
Next node
First child node
The last child node

AttributedocumentElementhead[Insufficient compatibility ]bodyURLreferrer##domain[can be modified]Page domain nameimagesAll picture collectioncookiecookie informationtitlePage titleactiveElementCurrent focus elementdocumentModeDocument ModereadyStateDocument StatusdoctypeDocument type declarationscriptsScript collectionformsform tag collectionchildrenA collection of child nodes of element typedefaultViewThe window object associated with the document

Description
html tag
head tag
body tag
current Page url
Source page url

MethodDescription##getElementById() Return the element corresponding to the idReturn the collection of corresponding name elementsReturn the collection of elements corresponding to the tag nameReturn the collection of elements with the specified class nameReturns the first element that matches the selectorReturns the set of elements that matches the selectorCreate element nodeCreate text nodeCreate attribute nodeCreate comment nodeCreate an empty DocumentFragment objectWhether the selector matches Element matchingDocument text writingDocument text is writtenFeature monitoringElement type

	getElementsByName()
	getElementsByTagName()
	getElementsByClassName()
	querySelector( )
	querySelectorAll()
	createElement()
	createTextNode()
	createAttribute()
	createComment()
	createDocumentFragment()
	matchesSelector()[Insufficient compatibility, prefix required]
	write()[cursor does not wrap after output]
	writeIn()[ Cursor wraps after output]
	implementation.hasFeature(feature, version)

AttributeDescriptionididClass nametitle Set or return the style attribute of the elementSet or return the element's style attribute ContentSet or return the content of the elementSet or return the text contentSet or return the editable state of the element##isContentEditableWhether it is editablechildElementCountNumber of child element nodesfirstElementChildFirst child element nodelastElementChildLast child element nodepreviousElementSibling Previous element nodenextElementSiblingNext element node

	className
	title
	style
	innerHTML
	outerHTML[including self]
	textContent[ie-innerText]
	contentEditable

##contains (node)Whether the node is a child of the calling node LevelBoolean value##hasFocus()hasChildNodes()isDefaultNamespace(url)##isEqualNode(node)Whether two elements are equalBoolean valueisSupported(feature, version)Whether a feature is supportedBoolean valueAttr type

Method	Description	Return
focus()	Set focus
blur()	Lost focus
appendChild(node)	Insert after the child node list	New node
insertBefore(node, reference node)	Insert node before reference node	Insert node
removeChild(node)	Node deletion	Deleted node
replaceChild(node, replaced node)	Node replacement	Replaced node
cloneNode(Boolean value)	Copy Node	Clone Node
importNode(Node, Boolean value)	From document A Obtain node a and import it into document B (similar to cloneNode method)
Whether the focus has been obtained	Boolean value
Whether there are child nodes	Boolean value
Whether it is specified Namespace	Boolean value

AttributeDescription##nameAttribute nameAttribute valueWhether it is an id typeWhether the attribute is specifiedAttribute lengthAttribute collection

	value
	isId
	specified
	length
	attributes

MethodDescriptiongetAttribute()Get the attribute valueGet the attribute nodeSet attribute valueSet attribute nodeRemove attributeRemove attribute nodeWhether the specified attribute existsWhether the attribute existsText type

	getAttributeNode()
	setAttribute()
	setAttributeNode()
	removeAttribute()
	removeAttributeNode()[ie not supported]
	hasAttribute()
	hasAttributes()

MethodDescriptionappendData(text)Add text to the end of the nodeDelete n characters starting from the specified position Insert text from the specified positionReplace the text from offset position to offset+count with textSplit the current text node from the specified position Into two text nodesIntercept the string starting from offset position to offset+countMerge adjacent text nodes and delete empty text nodesTable operationtable Element

	deleteData(position, quantity)
	insertData(position, text)
	replaceData(position, quantity, text)
	splitText(position)
	substringData(position, quantity)
	normalize()

Attribute MethodDescriptioncaption caption element pointertbody collectiontfoot collectionthead elementCollection of all rows in the tableCreate element, place it in the table, return reference##createTFoot()Create< tfoot> element, put it into the table, return the referencecreateCaption()Create the caption element, put it into the table, return the referencedeleteTHead()Delete thead elementtbody element

	tBodies
	tFoot
	tHead
	rows
	createTHead()
##deleteTFoot()	Delete tfoot element
deleteCaption()	Delete the caption element
deleteRow(pos)	Delete the row at the specified position
insertRow(pos)	Insert a row at the specified position in the row collection

Attribute method

Description##rowstbody all row collectiondeleteRow(pos)Delete the row at the specified positioninsertRow(pos)To the row collection Insert a row at the specified position and return the reference##tr elementAttribute methodDescription

deleteCell(pos)insertCell(pos)

Style operation

Access element style

• DOM style - js can only access direct style attributes through dom.style, but cannot access embedded style sheets and external styles Table

cells	trAll cell collection
Delete the cell at the specified position
Insert a cell at the specified position in the cell collection and return the reference

Attribute method (dom.style)	Description
cssText	Returns the string form of all styles in the style attribute
length	Returns the number of CSS attributes in the element
parentRule	Returns the CSSRule object of CSS information
getPropertyCSSValue(name)	Returns the CSSValue object of the property value ( Contains cssText and cssValueType)
getPropertyPriority(name)	Whether the !important attribute is used
getPropertyValue(name)	Returns the string value of the given property
removeProperty(name)	Removes the given property from the style
setProperty(name, value, priority)	Set the given property to the corresponding value and add the priority

• Calculated style - the actual style used after style cascading

##Attribute methodDescriptiondocument.defaultView.getComputedStyle(dom, pseudo-element string) [ie not supported]Return all calculated styles of the current elementdom.currentStyle[ie support]Return all calculated styles of the current elementOperation style sheet

• document.styleSheets - all style sheets applied to the document

Properties (document.styleSheet[n]) DescriptioncssRules[ie not supported]All style rules in a single style sheetrules[ie supported]Same as aboveinsertRule(rule,index)[ie not supported]Add cssRules Insert the rule string at the specified position in the collectionaddRule(rule,index)[ie support] Same as above##deleteRule (index)[ie not supported]##removeRule(index)[ie supported]Same as above##document.styleSheets[n].cssRules/rules

Delete the rule at the specified position in the cssRules collection

AttributeDescription##cssText[ie not supported]String of the entire style ruleselectorTextStyle selectorstyleSpecific style object

	Size and offset

Properties

DescriptionoffsetParentOffset parent containergetBoundingClientRect()Get the actual position, width and height of the page element (return the attribute object)offsetWidthElement width (visible content area + scroll bar + padding + border) offsetHeightElement height (visual content area + scroll bar + padding + border)offsetLeftLeft distance from the adjacent parentoffsetTopThe top distance from the adjacent parentclientWidthElement width (visual content area + Padding)clientHeightElement height (visible content area + padding)clientLeftThe distance between the padding edge and the border edge (left border)clientTopThe distance between the padding edge and the border edge (top border)scrollWidthElement width (visible content area + scrolling content area + padding)scrollHeightElement height (visible content area + scrolling content area + padding)scrollLeftHidden scroll width (width to be scrolled)scrollTopHidden scroll height (width to be scrolled)clientWidth/ There are browser differences between clientHeight and scrollWidth/scrollHeight

	Compatibility

If you encounter any problems during the learning process or want to obtain learning resources, you are welcome to join the learning exchange group

The above is the detailed content of What are the commonly used DOM operations in js?. For more information, please follow other related articles on the PHP Chinese website!