HTML DOM Object

This article mainly introduces the HTML DOM object: Document, Element, Attr, event, and so on 4 objects.

Directory

1. Document object: Represents the root node of the document tree, and most of the properties and methods operate on the element.

2. Element object: Represents an element in a document that can be included as an element node, a text node, and an annotation node.

3. Attr Property Object: Represents a property of an element node. You can get, add, and modify the specified property.

4. Event object: Indicates the state at the time the event occurred, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, the state of the mouse button, and so on.

1. Document Object

The Document object is the root node of the documentation tree.

Gets a document object that is typically passed through the window's document property.

1.1 Static Properties

readonly [] document.all : Gets an array that contains all the elements within the HTML document.

readonly [] document.anchors : Gets an array that contains all the anchor elements within the HTML document.

ReadOnly body document.body : Gets the BODY element within the HTML document.

String document.charset : Sets or gets the character encoding of the document.

Cookie document.cookie : Sets or gets a cookie for the current HTML document.

String Document.designmode : Sets whether the document can be edited. On: document editable; off (default): Document is not editable.

ReadOnly string document.domain : Gets the domain name of the current HTML document.

readonly [] document.forms : Gets an array that contains all the form elements within the HTML document.

readonly [] document.images : Gets an array that contains all the image elements within the HTML document.

readonly [] document.links : Gets an array containing all the link elements within the HTML document

ReadOnly string document.referrer : Gets the URL of the source loaded into this document.

String document.title : Sets or gets the title of the HTML document.

ReadOnly string document. URL : Gets the URL of the HTML document.

1.2 Static methods

Attribute document.createattribute(attrname): Creates a Property object. Eg:document.createAttribute (' id '); Create an ID property

HtmlElement document.createelement(elementname): Creates an Element object. Eg:document.createElement (' a '); Create a element of a

HtmlElement document.createelementns(namespaceuri,attrname): Creates an Element object and specifies a namespace. Eg:document.createElementNS ("http://www.w3.org/1999/xhtml", "a");

EventType document.createevent(eventtype): Creates a specified event type.

parameter: eventtype {eventtyper}: Specifies the event type, such as MouseEvent. Return value: {EventType} returns the type of event created. Example:var mouseEvent =  //  Create a mouse event

Detailed Method

HtmlElement document.getElementById(elementid): Gets the first element of the specified ID.

parameter: ElementID {string}: ID of the element. Return value: {htmlelment} Gets the element object for the specified ID. If not found, gets null, if the container contains more than one element of the same ID, gets the first matching element. Example:var//  get an element with ID btn_submit

Detailed Method

Htmlelement[] document.getelementsbyclassname(className): Gets an array of elements with a class property that contains the specified value.

Note: If the element class property contains more than one class, you can get this element by specifying either one. Parameter: className {string}: The element class attribute contains the character. Return value: {htmlelement[]} returns an array of elements. Example:var//  get an array of elements containing the class attribute containing btn-hide

Detailed Method

Htmlelement[] document.getelementsbyname(namevalue): Gets an array of elements of the Name property for the specified value.

parameter: namevalue {string}: The value specified by the element name property. Return value: {htmlelement[]} returns an array of elements. Example:var//  Gets an array of elements whose Name property is txt

Detailed Method

Htmlelement[] document.getelementsbytagname(elementname): Gets an array of elements that specify the element name.

parameter: elementname {string}: The name of the element. such as: Div, A and so on. Return value: {htmlelement[]} returns an array of elements. Example:var//  get array of element a

Detailed Method

void document.write(String): writes content to an HTML document. Eg:document.write (' <div> Show div control </div> ');

void Document.writeln(String): writes content to an HTML document and wraps the line at the end.

2. Element Object

Description : The element object represents elements in a document and can be included as element nodes, text nodes, and annotation nodes.

Access : Available through document.getElementById (ElementID), Document.getelementsbyname (ClassName), Document.getelementsbyname (Namevalue), document.getElementsByTagName (elementname), and so on to get the specified element.

extended Read : https://developer.mozilla.org/en-US/docs/Web/API/Attr

2.1 Instance Properties

ReadOnly namednodemap attributes : Read-only, gets all the property collection objects for this element.

ReadOnly htmlelement[] children : Gets an array of the following elements of this element.

ReadOnly string[] classlist : Read-only, gets an array containing the class of the element. Eg:<button class= "Btn-show btn-submit" ></buttom> = [' btn-show ', ' btn-submit ']

String className : Sets or gets the class property of the element. Eg:<button class= "Btn-show btn-submit" ></buttom> = [' Btn-show btn-submit ']

String ID : Sets or gets the ID of the element.

String InnerHTML : Gets the contents of an element in HTML code format settings.

Example: HTML:<div><span> content </span></div>Js:document.getElementById (//  = "<span> content </span>"

Detailed Method

String innerText : Sets or gets the text content within the element.

Example: HTML:<div><span> content </span></div>Js:document.getElementById (//  = "Content

Detailed Method

Cssstyledeclaration style: Sets or gets the style of the element. Eg:element.style.width= ' 30px '; Set the width style of an element

ReadOnly string tagName : Gets the element name of the element, returned in uppercase format. eg:<div></div> = Element.tagname; Back to DIV

ReadOnly string NamespaceURI : Gets the namespace of the element. The default return is: "http://www.w3.org/1999/xhtml".

String title : Sets or gets the value of the element title property.

 

2.2 Example methods

void Blur(): The element loses focus. Eg:document.getElementById (' text '). blur ();

void Click(): The element simulates the click. Eg:document.getElementById (' text '). Click ();

void Focus(): The element gets the focus. Eg:document.getElementById (' text '). focus ();

String getattribute(attributename): Gets the value of the specified property, and returns null if the property does not exist. Eg:document.getElementById (' div '). getattribute (' name '); Gets the name property of the element

Boolean hasattribute(attributename): Determines whether the current element contains an attribute. Eg:document.getElementById (' div '). Hasattribute (' name '); = = true: Contains the name attribute

HtmlElement queryselector(cssselector): Gets the first matching child element that conforms to cssselector under the element. If not found, returns NULL.

the Cssselector style selector, which finds elements based on CSS matching rules. Example:1) find Document.queryselector (' #btn ') by ID; 2) Find Document.queryselector ('. Btn-show ') according to class; 3) Select Document.queryselector (//  Get button Element 4) based on the element typeto find document.queryselector based on a specific attribute (  //  custom attribute Data-po value is cool

Detailed Method

htmlelement[] queryselectorall(cssselector): gets an array that contains all the child elements that conform to the Cssselector match under the element. Cssselector Specifications Refer to the previous method of the detailed.

void removeattribute(attributename): Deletes the specified attribute of the element. Returns undefined regardless of whether the element contains this attribute.

void SetAttribute(attributename,value): Sets the value of an attribute of the element. If this property does not exist in the element, the Add property operation is performed. Eg:document.getElementById (' div '). SetAttribute (' name ', ' Logdiv '); Set the Name property

3. Attr Property Object

description : The Attr object represents a property of an element node.

Get method : Element.attributes property gets the Attr object.

extended Read : https://developer.mozilla.org/en-US/docs/Web/API/Attr

3.1 Instance Properties

ReadOnly string name : Read-only, gets the property name. Eg:document.getElementById (' div '). attributes[0].name;//= ID: Gets the name of the first property

String value : Sets or gets the value of the property. Eg:document.getElementById (' div '). attributes[0].value;//= div: Gets the value of the first property

3.2 Methods

No

4. Event Object

Description : The event object represents the state at which the event occurred, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, the state of the mouse button, and so on.

Get method : Invokes the Window.event object when the first parameter is triggered by the event or when an event is triggered.

document.getElementById (' btn '). AddEventListener (' click ', Function (e) {    console.log (window.event==e);//= = True: The two are the same when triggered

Bubbling Event : When a child element fires an event, the parent element fires the same time (the event is allowed to bubble).

block subsequent handlers : through the AddEventListener () method, you can register multiple handlers for the same event of an element, and after you call the Stopimmediatepropagation () method in an event, Handlers that have been registered later will not be executed. For example, an element registers 3 functions on the Click event, calls the Stopimmediatepropagation () method on the 2nd function, and the 3rd function does not execute.

extended Read : https://developer.mozilla.org/en-US/docs/Web/API/Event

4.1 Instance Properties

ReadOnly boolean altkey : Read-only, gets whether the ALT key is pressed. true: pressed; false: not pressed. Applicable event: Mouse/keyboard.

ReadOnly Boolean Bubbles : Read-only, gets whether this event is bubbling. Applicable event: Mouse/keyboard.

readonly int button : Read-only, gets the mouse which button clicked to trigger this event. 0: Left button, 1: Medium key, 2: Right key. Applicable event: Mouse.

ReadOnly boolean cancelable : Read-only to get whether this event can be revoked. True: The event can be revoked. You can call Preventdefault () to cancel the subsequent default action. Flase: The event is not revocable. Applicable event: Mouse/keyboard.

ReadOnly ASCII charcode : Read-only, gets the ASCII code of the key, which can be converted to characters by String.fromCharCode (). Applicable event: Keyboard event (onkeypress Event for text input box, KeyDown and KeyUp not supported).

ReadOnly long ClientX : Read-only, gets the x-coordinate of the mouse in the browser. Applicable event: Mouse.

ReadOnly long ClientY : Read-only, gets the y-coordinate of the mouse in the browser. Applicable event: Mouse.

ReadOnly boolean ctrlkey : Read-only to get the CTRL key pressed. Applicable event: Mouse/keyboard.

ReadOnly Object currenttarget : Read-only, gets the object that is handling this event, can be element, document object, and so on. Applicable event: Mouse/keyboard.

readonly int Detail : Read-only, get mouse clicks: 1 means click, 2 means double-click, 3 means three hits, and so on. Applicable event: Mouse.

ReadOnly ASCII keycode : Read-only, gets the ASCII code of the key, which can be converted to characters by String.fromCharCode (). Applicable event: Keyboard.

ReadOnly long OffsetX : Read-only, gets the x-coordinate of the mouse over the entire body area. Applicable event: Mouse.

ReadOnly long OffsetY : Read-only, gets the y-coordinate of the mouse over the entire body area (clienty+scroll.top). Applicable event: Mouse.

ReadOnly long ScreenX : Read-only, gets the x-coordinate of the mouse over the entire display area. Applicable event: Mouse.

ReadOnly long ScreenY : Read-only, gets the y-coordinate of the mouse over the entire display area. Applicable event: Mouse.

ReadOnly boolean shiftkey : Read-only, gets whether the SHIFT key is pressed. Applicable event: Mouse/keyboard.

ReadOnly Object target : Read-only to get the objects that triggered this event. Applicable event: Mouse/keyboard.

ReadOnly string type : Read-only, gets the event name (does not contain the prefix on, such as: click). Applicable event: Mouse/keyboard.

4.2 Example methods

void Preventdefault(): The subsequent default action of the terminating event (the event is to be undone, that is, the Cancelable property is true). For example: CheckBox's Click event, execute this code, the element will not be ticked and unchecked.

document.getElementById (' Ckbox '). onclick=function(e) {    //  checkbox will not be ticked and unchecked };

Method Example

void stopimmediatepropagation(): A Subsequent handler that blocks the bubbling behavior of the current event and blocks the same type of event on this element.

document.body.onclick=function(e) {Console.log (' Body-click '); };d Ocument.getelementbyid (' btn '). AddEventListener (' click ',function(e) {Console.log (' Btn-click-1 ');}); document.getElementById (' btn '). AddEventListener (' click ',function(e) {Console.log (' Btn-click-2 '); //The stopimmediatepropagation () method blocks the bubbling behavior of the current event and blocks subsequent handler functions for the same type of event on this element;    //will be output: btn-click-1, Btn-click-2    //if the Stopimmediatepropagation () method is canceled, the output will be: Btn-click-1, Btn-click-2, btn-click-3, Body-clicke.stopimmediatepropagation ();}); document.getElementById (' btn '). AddEventListener (' click ',function(e) {Console.log (' Btn-click-3 ');});

Method Example

void stoppropagation(): Blocks the bubbling behavior of the current event.

Document.body.onclick = function (e) {    console.log ('body's Click event ');}; document.getElementById ('btn'). onclick = function (e) {    Console.log ( ' BTN's Click event ' );     // block the subsequent bubbling behavior of this event, which was previously clicked to trigger the same type of event of the body };

Detailed Method

The difference between the 4.3 currenttarget and the target property

currenttarget : Gets the object that is handling this event.

target : Gets the object that triggered this event.

the difference is mainly in the bubbling event : assume that both the body and the button element are registered with the Click event, and when the button element is clicked, the body's Click event is also triggered, in which case the Click event of the body Currenttarget points to the BODY element, and target points to the button element.

Example : Display results when a button element is clicked

Document.body.onclick = function (e) {    console.log (e.currenttarget);//point to BODY element    Console.log (e.target);// For the bubbling event, point to the element that triggered the start. Otherwise, the element itself. };d Ocument.getelementbyid (' btn '). onclick = function (e) {    console.log (e.currenttarget);    Console.log (E.target); };

　　

================================== Series article ==========================================

This article: 5.2 HTML DOM objects

Web Development Road Series articles

HTML DOM Object