JavaScript advanced Programming-Reading notes (4)

11th Chapter DOM Extension

1. Selector API

The core of Selector API Level 1 is two methods: Queryselector () and Queryselectorall (). In a compatible browser, they can be called through an instance of the document and element type. Currently fully supported selector API Level 1 browser has IE 8+, Firefox 3.5+, Safari 3.1+, Chrome and opera + +.

The Queryselector () method receives a CSS selector, returns the first element that matches the pattern, and returns null if no matching element is found.

The Queryselectorall () method returns all matching elements, not just an element. This method returns a NodeList object.

2. Element traversal

To compensate for the way the browser handles white space characters between DOM elements, the element Traversal API defines additional attributes for DOM elements:

L Childelementcount: Returns the number of child elements (excluding text nodes and notes).

L Firstelementchild: points to the first child element; FirstChild's element version.

L Lastelementchild: points to the last child element; LastChild element version.

L Previouselementsibling: points to the previous sibling element; previoussibling's element version.

L Nextelementsibling: points to the latter sibling element; nextsibling's element version.

Browsers that support the element traversal specification include IE +, Firefox 3.5+, Safari 4+, Chrome, and opera.

3, HTML5

(1) Class-related extensions

HTML5 has added a number of APIs that are dedicated to simplifying the use of CSS classes. The Getelementsbyclassname () method is the most popular method that can be called through the Document object and all HTML elements.

When you manipulate the class name, you need to add, remove, and replace the class name through the ClassName property. Because classname is a string, you must set the value of the entire string every time, even if you only modify part of the string.

HTML5 adds a way to manipulate the class name to make the operation simpler and more secure, which is to add the Classlist attribute to all elements. This type defines the following methods: Add (), contains (), remove (), toggle ().

(2) Focus management

HTML5 also added the ability to subsidize the management of Dom focus. The first is the Document.activeelement property, which always references the element in the DOM that currently has the focus.

The way elements get focus is page loading, user input (usually by pressing the TAB key), and calling the focus () method in code.

(3) Changes in HTMLDocument

HTML5 expands the HTMLDocument and new features are added:

ReadyState property: There are two possible values loading (loading documents) and complete (the document has been loaded);

Compatmode (Compatibility Mode) property: In standard mode, the value is css1compat, whereas in promiscuous mode, the value is Backcompat.

Head Property

(4) Character Set properties

CharSet property: Represents the character set that is actually used in the document, and can also be used to specify a new character set. By default, the value is "UTF-16", but this value can be modified by the <meta> element, the response header, or by setting the CharSet property directly.

Defaultcharset property: Indicates what the default character set should be for a swing document according to the browser and operating system settings.

5) Custom Data properties

HTML5 specifies that non-standard attributes can be added to the element, but the prefix data-is added. After you add a custom property, you can access the custom property value through the element's DataSet property.

(6) Insertion mark

Inserting a large number of new HTML tags into a document through DOM manipulation is cumbersome. In contrast, using the insertion mark technique, inserting HTML strings directly is not only easier, but also faster.

In read mode, the innerHTML property returns the HTML markup that corresponds to all child nodes of the calling element, including elements, annotations, and text nodes. In write mode, innerHTML creates a new DOM tree based on the specified value, and then the DOM tree completely replaces all of the original child nodes of the calling element.

In read mode, outerHTML returns the HTML tags of its elements and all child nodes. In write mode, outerHTML creates a new DOM subtree based on the specified HTML string, and then completely replaces the called function with the DOM subtree.

To make it easier for developers to control page scrolling, HTML5 chose scrollIntoView as the standard method.

4. Proprietary extensions

When a browser developer discovers a missing feature, it adds a proprietary extension to the DOM to compensate for the lack of functionality. Currently, there are still a large number of proprietary extensions that are not written to the standard, and they are proprietary features.

Children property: When an element contains only child nodes of an element, the children property does not differ from Childnode.

Contains () Method: Identifies whether a node is a descendant of another node. The call to the contains () method should be an ancestor node, which receives a parameter, the descendant node of the peach detection. If the detected node is a descendant node, the method returns true; returns FALSE.

Using DOM Level 3 comparedocumentposition () can also determine the relationship between nodes.

The innerHTML property allows you to manipulate all text content contained in an element, including text in the child document tree. The scope of the outerHTML property extends to the node that contains it.

12th Chapter DOM2 and DOM3

1. Style

There are 3 ways to define styles in HTML: Include external style sheet files through the <link/> element, define inline styles using <style/> elements, and define styles for specific elements using the style attribute.

(1) Accessing style sheets

Any HTML element that supports the style attribute has a corresponding style attribute in JavaScript. This style object contains all of the style information specified by the HTML style attribute, but is not included in the cascading style of an external style sheet or embedded style sheet. Any CSS property specified in the style attribute will behave as the corresponding property of the Style object.

var mydiv = document.getElementById ("mydiv");

Set Background color

MyDiv.style.border = "1px solid black";

Although a style object can provide style information for any element that supports the style attribute, it does not contain style information that is stacked from the surface of other styles and affects the current element. To get the calculated style, the getComputedStyle () method is used. IE does not support this method, but it has a similar concept to the Currentstyle property.

(2) Operation style Sheet

All style sheets for the application document are represented by the Document.stylesheets collection.

To add a new rule to an existing style sheet, you need to use the Insertrule () method, and the method to delete the rule from the style sheet is deleterule ().

(3) Element size

L Offset

L Client Area Size

L Scrolling Size

3. Traverse

The DOM2-level traversal and scope module defines two types used to assist in the sequential traversal of the DOM structure: Nodeiterator and Treewalker. These two types can perform depth-first (Depth-first) traversal operations on the DOM structure based on a given starting point.

4. Scope

A range is a means of selecting a specific part of the DOM structure and then performing the appropriate action.

The DOM2 class defines the Createrange method in the document type. Using Hasfeature () or directly detecting the method, you can determine whether the browser supports scopes.

What to do in the scope of operation:

The L deletecontents () method is able to remove the contents of a range from the document;

L extractcontents () also removes the range selection from the document, but it returns the extent of the document fragment;

L Use the Insertnode () method to insert a node at the beginning of a range selection;

L Insert content in surround range, using Surroundcontents () method;

L Use the collapse () method to collapse the range;

In cases where there are multiple scopes, the Compareboundarypoints () method can be used to determine whether these ranges have a common boundary (start or end point);

L can use the Clonerange () method to copy the range;

After you have used the range, it is a good idea to call the detach () method to isolate the range from the document in which it was created.

IE8 and earlier versions do not support DOM scopes, but support a similar concept, both for the text range.

17th Chapter error Handling and debugging

1. Several ways to avoid browser responses to JavaScript errors:

Use the Try-catch statement where an error can occur, giving you the opportunity to respond to the error in the appropriate way, without having to follow the browser's mechanism for handling the error.

Using the Window.onerror event handler, this way you can accept all errors that Try-catch cannot handle (ie and Firefox only).

2. Common error types

Type conversion errors, data type errors, communication errors

3. Commissioning Technology

(1) The most common practice is to insert the alert () function anywhere in the code you want to debug. We also no longer recommend that you use alert () in debugging because you need to clean up after debugging.

(2) Logging messages to the console

For IE8, Firefox, Chrome, and Safari, you can write messages to the JavaScript console through the console object, which has the following methods:

²error (message): Log error messages to the console;

²info (message): Logging informational messages to the console;

²log (message): Log general messages to the console;

²warn (Message): Logs a warning message to the console.

(3) record the message to the current page

is to create a small area in the page to display the message.

(4) Error thrown

If the error message is specific, it can basically be used as the basis for determining the source of the error.

JavaScript advanced Programming-Reading notes (4)