DOM note (3): Element interface and HTMLElement interface, domhtmlelement

DOM note (3): Element interface and HTMLElement interface, domhtmlelement

I. Element Interface

The Element interface represents an Element. This interface is extended from the Node interface and naturally inherits the attributes and methods of the Node interface. It also has a set of attributes and methods for elements.

The Element interface has fewer common attributes, and is commonly used as a read-only tagName attribute. This attribute returns the Element name and the data type is DOMString.

The method defined by the Element interface is mainly for Attribute operations. The common methods are as follows:

Method Name	Data Type	Description
GetAttribute	DOMString	Returns the corresponding property.
GetAttributeNode	Attr	Returns the corresponding attribute node.
GetAttributeNodeNS	Attr	Returned attribute namespace
GetAttributeNS	DOMString	Returns the corresponding attribute node.
GetElementsByTagName	NodeList	Get element list by node name
GetElementsByTagNameNS	NodeList	Searches for all elements based on the tag name in the specified space.
HasAttribute	Boolean	Determine whether an attribute exists
HasAttributeNS	Boolean	Determine whether an attribute exists
RemoveAttribute	Void	Delete attributes
RemoveAttributeNode	Attr	Delete attributes
RemoveAttributeNS	Void	Delete attributes
SetAttribute	Void	Add attribute
SetAttributeNode	Attr	Add attribute nodes
SetAttributeNodeNS	Attr	Add attribute nodes
SetAttributeNS	Void	Add attribute

 

Ii. HTMLElement Interface

This interface inherits from the Element interface, which is also used to represent an HTML Element and has custom attributes and methods.

1. attribute list

Attribute name	Data Type	Read-Only	Description
InnerHTML	DOMString		Get or set HTML content
OuterHTML	DOMString		Sets or obtains the object's plain text format.
Id	DOMString		Id attribute of the corresponding element
Title	DOMString		Title attribute of the corresponding element
Lang	DOMString		Lang attribute of the corresponding element
Dir	DOMString		Dir attribute of the corresponding element
ClassName	DOMString		Class Attribute of the corresponding element
ClassList	DOMTokeList	Y	Returns the class attribute of the element as the DOMTokenList object.
Dataset	DOMStringMap	Y	Return the Custom data-* attribute set.
Hidden	Boolean		Hidden attribute of the corresponding element
TabIndex	Long		TabIndex attribute of the corresponding element
AccessKey	DOMString		AccessKey attribute of the corresponding element
AccessKeyLabel	DOMString	Y	Return hotkey combination
Draggable	Boolean		Draggable attribute of the corresponding element
ContentEditable	DOMString		ContentEditable attribute of the corresponding element
IsContentEditable	Boolean	Y	Determine whether an element can be edited
ContextMenu	HTMLMenuElement		ContextMenu attribute of the corresponding element
Spellcheck	DOMString		Spellcheck attribute of the corresponding element
CommandType	DOMString	Y	CommandType attribute of the corresponding element
Label	DOMString	Y	Label attribute of the corresponding element
Icon	DOMString	Y	Icon attribute of the corresponding element
Disabled	Boolean	Y	Disabled attribute of the corresponding element
Checked	Boolean	Y	The checked attribute of the corresponding element.
Style	CSSStyleDeclaration	Y	Style attribute of the corresponding element

 

2. Method list

Method Name	Data Type	Description
GetElementsByClassName	NodeList	Obtains all elements based on the class attribute of the element.
InsertAdjacentHTML	Void	Insert HTML or XML
Click	Void	Click an element to trigger the click event.
ScrollIntoView	Void	Scroll element content to the viewpoint
Focus	Void	Element focus
Blur	Void	Element loses focus

First: http://www.ido321.com/1321.html

Next article: DOM notes (4): HTML 5 DOM complex data types