Read "JavaScript DOM programming Art"

The National Day holiday took three or four days to read the book, the book is very thin, because it is an introductory book, Dry goods are not many.

4. ChildNodes NodeType nodevalue firstchild lastchild

ChildNodes returns all the immediate child nodes, the element node is 1, the attribute node is 2, the text node is 3, and even line breaks and spaces are also seen as nodes (and children differences)

The first firstchild of P is the text, shouldn't it be an attribute node?? —————— know.

Note the difference between the FirstChild attribute in JavaScript and the first-child of CSS

5.
Smooth degradation

Learning from CSS, separating JavaScript, and using attributes such as onclick in an HTML document is a practice that is inefficient and prone to problems.

Backwards compatibility, object/method detection

Performance considerations

6. Rewriting the picture library

7. Create tags dynamically

Traditional technology: Document.Write InnerHTML
Dom methods: createelement, createTextNode, Appenchild, and InsertBefore

After you specify the target of the request and how the response is handled, you can use the Send method to send the request:
Request.send (NULL);

An easy-to-ignore problem with asynchronous requests is asynchrony, which is that the script continues execution after the XMLHttpRequest request is sent, and does not wait for the response to return. To do this, if other scripts depend on the server's response, then the corresponding code must be transferred to the function assigned to the onReadyStateChange property.

When using AJAX, it is important to pay attention to the same Origin strategy. Requests sent using the XMLHttpRequest object can only access data that is in the same domain as the HTML in which they reside, and cannot send requests to other domains.

One feature of AJAX applications is to reduce the number of times a page is repeatedly loaded, which can enhance the usability of the site, so that users can quickly respond without having to refresh the page. However, this lack of state-record technology conflicts with some of the browser's usage conventions, which prevents users from using the Back button or adding bookmarks to pages in a particular state.

8. Enrich the contents of the document

Progressive enhancement and smooth degradation

The Displayabbreviations and Displaycitations functions previously written have many things in common: from creating a specific element
The node collection (abbr element or BLOCKQUOTE Element) begins with a loop that iterates through the node collection and creates some markup in each loop, and finally inserts the newly created tag into the document.

Use JavaScript functions to extract some of the existing information from the document structure, and then reinsert the information into the document in a clear and meaningful way.

The following DOM methods are most useful when you need to retrieve existing information in a document: Getelementbyid,getelementsbytagname,getattribute

The following DOM methods are most useful when you need to add information to a document:
Createelement,createtextnode,appendchild,insertbefore,setattribute

I hope you always remember that JavaScript scripts should only be used to enrich the content of the document and avoid using DOM technology to create core content.

9. Css-dom

You cannot simply query the style object's font-family, because the hyphen between "font" and "family" is interpreted by JavaScript as a minus sign, which makes an error, and when you need to refer to a CSS property with a minus sign in the middle, the DOM requires that the hump be named
。

Styles declared in an external style table do not enter the style object, and the styles declared in the

By the way: CSS three style precedence: inline style > Inline style > Join style

Previoussibling,nextsibling,parentnode,firstchild,lastchild, etc. are not used to update information.

When to set a style with a DOM script: sets the style based on the position of the element in the node tree, sets the style repeatedly according to a condition, and responds to the event.

In many cases, it's OK to use purely CSS or DOM scripts to set the style, at least consider these factors:
What is the simplest solution to this problem, and which solution will be supported by more browsers.

ClassName Property

The ClassName property is a readable/writable property, which is the property of all element nodes.
Instead of using the DOM to change the style of an element directly, use JavaScript code to update the class property of the element, and then have the style set for that class in the CSS style sheet.

Setting the class property of an element with the ClassName property replaces (instead of appending) the original class setting of the element, and what we actually need is an append effect that will overlay multiple styles.

To do this, you can encapsulate a function addclass, which takes two parameters: the first is the element that needs to add a new class, and the second is the new class's setting value (value).

1 functionaddclass (element, value) {2     if(!element.classname) {3Element.classname =value;4     }5     Else{6Newclassname =Element.classname;7Newclassname + = "";//Note that a space is required8Newclassname + =value;9Element.classname =Newclassname;Ten     } One}

The abstraction of the function.

10. Animating with JavaScript

By combining the settimeout functions of css-dom and JavaScript, it is easy to implement a simple animation.

The overflow property of CSS is used to handle the case that an element is larger than its container size. When an element contains more than its own size, a content overflow occurs, in which case you can "crop" the content so that only a subset of the content is visible. You can also tell the browser whether the scroll bar needs to be displayed by using the overflow property so that the user can see the rest of the content.

There are 4 values for overflow properties, Visible,hidden,scroll,auto.

12. Comprehensive examples

Reading JavaScript DOM programming art