JavaScript DOM Programming Art-Learning Notes (chapter III, fourth)

Chapter III:

1.js objects are divided into three types: ① user-defined object ② built-in object (JS provided object) ③ host object (JS hosted environment-Browser, provided object)

2. A document is a collection of nodes, the DOM tree, an HTML element that is the root element, and the only element that is not contained by other elements.

3. Element nodes do not directly contain text nodes, such as:<ul><li> Hello </li><ul> ul elements do not directly contain text elements

4. Ways to get elements:

①getelementbyid ()

②getelementsbytagname () Unique usage: docuemnt.getelementsbytagname ("*") is used to get the number of all labels within an element. Size similar to jquery ()

Digression: When you wrap, you always want to ctrl+s. Hey, have become accustomed to it.

③getelementsbyclassname () (IE8 and the following versions are not supported )

A custom Getelementbyclassname method is given in the book:

1             functionGetelementsbyclassname (node,classname) {2                 if(node.getelementsbyclassname) {3                     returnnode.getelementsbyclassname (classname);4}Else{5                     varEle = Node.getelementsbytagname ("*");6                     vararr = [];7                      for(vari = 0; i < ele.length; i++) {8                         if(Ele[i].classname = =classname) {9 Arr.push (Ele[i]);Ten                         } One                     } A  -                     returnarr; -                 } the}

5. Small Knowledge Point : ① element. ClassName () Gets the name of the element ②if (SM! = null) equivalent to if (SM)

6. in the last part of this chapter, it is said that the value of setattribute changes will not appear in the source code. But your code doesn't have that kind of effect. And the analysis of this phenomenon, let me think that is Ajax ...???

The fourth chapter:

1. This chapter describes an example: similar to the effect of switching avatars, or a simple tab effect:

2. Cranky: ① 0 Level dom-original dom②1 level DOM-interactive DOM based on standard dom③2,3 level dom-standardization

3. Small Knowledge point : on-click= "return false;" Equal to: Button not clicked

4. Node Properties:

①childNodes gets all child nodes of an element ( contains element nodes, attribute nodes, text nodes )

②nodetype (1-element node, 2-Attribute node, 3-text node)

③nodevalue cannot get the text of an element directly. The text of an element = The NodeValue value of the first child node of the element (P.childnodes[0].nodevalue) is similar to the text () method of jquery

5.setAttribute is equivalent to the CSS () and attr () methods in jquery. The difference between the two is that the attr () method can get and modify any attribute in the HTML tag. CSS () can only get and modify the value of the property style

JavaScript DOM Programming Art-Learning Notes (chapter III, fourth)