- Selector API
- HTML5 Dom Extension
- Element Traversal Specification
Selector API many JavaScript libraries, one of the most common features is to select a pattern matching DOM elements according to CSS selectors Selector API Level1 Core is two methods: Queryselector, Queryselectorall can invoke them through an instance of document and element. When the element is called, it is first queried throughout the article, and then the elements returned in the component child node are fetched. If an unsupported selector is passed in, an error is made. The Queryselectorall () method returns an instance of a nodelist. Classes that can invoke this method include DocumentFragment, in addition to the document and element. The Selector API LEVEL2 specification adds a Matchesselector () method to the element type. This method takes a parameter: CSS selector. Returns true if the element matches the selector, otherwise false. Element.matchesselector (selector); Specification Element.msmatchesselector (selector); Ieelement.mozmatchesselector (selector); Ffelement.webkitmatchesselector (selector); WebKit Element Traversal APIIE9 and previous versions will not return a text node, and other browsers will return text nodes, resulting in inconsistencies between firstchild and ChildNodes. The new traversal specification is:
- childelementcount
- firstelementchild
- lastelementchild
- previouselementsibling
- nextelementsibling
 HTML5 Dom Extension Getelementsbyclassname (), the document or element type can be used, and returns an instance of NodeList. Ie9+ supports the Calsslist property when manipulating the class name, you need to add the delete through the ClassName property. The general practice is to add a space before and after the classname, for the class to be added or removed the same processing, and then the concatenation of strings, delete, replace the work, after successful deletion of classname spaces. The new Classlist property for all elements in HTML5. Includes the following methods: Add, contains, remove, toggle focus Management HTML5 added the ability to assist in managing DOM focus. The Document.activeelement property, which always references the element in the DOM that currently has the focus. The way the element gets focus is page load, user input, and the focus method is called in the code. By default, when a document has just finished loading, a reference to the Document.body element is saved in document.activeelement. Document.activeelement is null during document loading. This property is supported by all browsers. Changes in HTMLDocument. 1, ReadyState property Document.readystate property, two possible values: loading, COMPLETE2, compatibility mode: Document.compatmode; Normal mode "Css1compat" Promiscuous Mode " Backcompat "3, head property: Head = Document.head | | document.getElementsByTagName ("Head") [0] (WebKit browser implementation) 4, custom data properties HTML5 specifies that non-standard attributes can be added to the element, but the "data-" prefix is added. These properties can be arbitrarily added, casually named, just start with data-. After you add a custom property, you can access the value of the custom property through the dataset property of the element. 5, Mark and text innerHTML, Outerhtml;innertext, outertext are all custom attributes of IE, later innerHTML and outterhtml are included in the specification. In read mode, the innerHTML property returns the HTML tag for all child nodes of the calling element; in write mode, innerHTML creates a new DOM tree based on the specified value, and then completely replaces all child nodes of the calling element with the DOM tree. Don't expect allThe browser's innerHTML return the same values. When you replace an element byte point with innerHTML, you remove the JavaScript properties and event handlers in the current element's child nodes to prevent memory leaks. No script and style tags in the innerHTML, both of which do not take effect. Not all browsers support innerHTML, such as
Notes on DOM extensions
