Home > Developer > JavaScript
JavaScript Advanced Programming Chapter 11th--dom Extensions
The main extension of DOM is the selector API, HTML5, and element traversal
Selectors API: Defines two methods Queryselector () and Queryselectorall () that can be obtained from the DOM based on CSS selectors
Elements. The Queryselector () method receives a CSS selector, returns the first element that the pattern matches, and Queryselectorall () receives the parameter
Number, but returns the NodeList instance; the Matchesselector () method returns a Boolean value. ELEMENT traversal: Handling spaces between elements or empty
White text node
ELEMENT traversal: Defines additional attributes for DOM elements that can be easily skipped from one element to another.
HTML5: Defines a number of extended functions for the standard DOM. Class-related extensions: New Getelementsbyclassname () method,
Returns all the elements that match the class name, adding the Classlist property of the action class name to add, remove, or replace the class name.
Focus Management: The Document.activeelement property, which always references the element currently called focus in the DOM, adds a new
The Document.hasfocus () method is used to determine whether the document has been focused. Changes in HTMLDocument: document's ReadyState
The loading property, which represents the document being loaded, complete represents a document that has already been loaded, and it implements a document that indicates that it has been loaded
Completed indicator; Compatibility mode, Document.compatmode property returns "Css1compat" in standard mode, in promiscuous mode
Returns "Backcompat"; new Document.head Property Character Set properties: CharSet and Defaultcharset properties
You can get the specific information about the character encoding used by the document custom data properties: Add a data-prefix to add any named property.
The value of the custom property is accessed through the DataSet property of the element.
Insert Tag: innerHTML property: In read mode, the innerHTML property returns the HTML tag corresponding to all child nodes of the calling element.
In write mode, the innerHTML property creates a new DOM tree based on the specified value, and then uses the DOM tree to completely replace the calling element's original
All child nodes. outerHTML: In read mode, outerHTML returns the HTML tags of the element and all child nodes that call it, in write mode
, outerHTML creates a new DOM subtree based on the specified HTML string, and then completely replaces the calling element with the DOM subtree.
such as: Div.outerhtml= "<p>this is a p</p>" equivalent to Var p=document.createelement ("P"); P.appendchild
(document.createTextNode ("This is a P")); Div.parentNode.replaceChild (P,DIV); The newly created amount <p> element will replace
All the <div> elements in the DOM tree. insertAdjacentHTML () method, receives two parameters, inserts the position and HTML text to be inserted
This, the first parameter must be: Beforebegin afterbegin beforeend afterend
scrollIntoView () Method: This method is used to control page scrolling, this method can be used for all HTML elements, by scrolling the browser window
or a container element, the calling element can appear in the viewport. Children property: Refers to a child node that contains the same or an element in the element, and
The value of ChildNodes is the same, Element.children contains () method: used to detect whether the node is a descendant node of a node, return
Boolean value, alert (Document.documentElement.contains (document,body)); This example detects <body> elements
Returns true if it is a descendant of the All text that contains the text in the child document tree. When the InnerText property reads a value, all the text in the child document tree is stitched together;
, all child nodes of the element are deleted, and the text nodes that contain the corresponding text values are inserted. Setting the InnerText property removes all previously existing
Child nodes that completely alter the DOM subtree and also re-encode the HTML syntax characters; Outertext properties: With InnerText properties
The difference is that the Outertext property, in write mode, replaces the entire element instead of simply replacing the child node of the element that called it. Example:
Div. outertext= "Hello World"; Equivalent to var text = document.createTextNode ("Hello World");
Div.parentNode.replaceChild (Text,div)
JavaScript Advanced Programming Chapter 11th--dom Extensions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
