Javascript-DOM Summary

DOM is the abbreviation of the DocumentObjectModel Document Object Model. According to the W3CDOM specification, DOM is an interface unrelated to browsers, platforms, and languages, allowing you to access other standard components on the page. DOM Summary

1. DOM meaning

DOM is the abbreviation of Document Object Model. According to W3C DOM specifications, DOM is an interface unrelated to browsers, platforms, and languages, allowing you to access other standard components on the page.

Nodes in the DOM:

* The entire document is a document node.

* Each HMTL label is a pElement ).

* The text in the label is a text node (p ).

* The attribute of a tag is a pattri ).

* Everything is a node

2. Search for elements

1. Get a tag by id,

Document. getElementById ('Id name ');

2. Obtain multiple tags using the type name

Var allA = document. getElementsByClassName ('A ');

3. Obtain multiple tags using the name (a or form) attribute of the tag.

Document. getElementsByName ('corresponding name ');

4. Obtain multiple tags by Tag Name

Var allDiv = document. getElementsByTagName ('div ')

5. Obtain a tag using the selector (if there are multiple tags, the first one will be returned)

Var aDiv = document. querySelector ('P ');

6. Obtain multiple tags through Selector

Document. querySelectorAll ('selector name ');

3. DOM node-Element

1. Get all text including tags

Alert (Tag name. outerHTML) such as li

2. You can view all node attributes through dir.

Console. dir (Label name) such as li

3. for in, you can see all the attributes and methods of the node.

4. Obtain the first or last element node of a node.

Alert (li1.previuselementsibling. innerText );

Alert (li1.nextElementSibling. innerText );

5. Obtain the first or last element node of a node (may be a blank text node)

Alert (li1.previussibling. nodeName );

Alert (li1.nextSibling. nodeName );

6. Obtain the first subnode In ul

Alert (ul. firstChild );

Obtain the first child element in ul !!!! Node

Alert (ul. firstElementChild );

Alert (ul. lastElementChild. innerText );

7. Create a New li Node

Var newLi = document. createElement ('lil ');

NewLi. innerText = 'jquery ';

NewLi. style. color = 'red ';

8. append a subnode to the end of ul.

Ul. appendChild (newLi );

9. replace a subnode with a new node

Ul. replaceChild (newLi, li1 );

10. Remove a subnode (the node to be removed must be a subnode of ul)

Ul. removeChild (newLi. previuselementsibling );

11. Insert a new node before a subnode

Ul. insertBefore (newLi, li1 );

12. Insert a new Node object location + Node object to ul

'Beforebegin', 'afterbegin', 'beforeend', 'afterend'

Ul. insertAdjacentElement ('afterend', newLi );

13. insert html code

Ul. insertAdjacentHTML ('beforebegin ','

Ppppp

');

14. Insert text

Ul. insertAdjacentText ('afterbegin', 'after start ')

4. DOM node-Text

1. for Traversal

For (var I = 0; I <ulChild. length; I ++ ){

Use the hump name method to name a variable or function goShoppingToMall

Var aNode = ulChild [I];

Judge whether the retrieved record is a node type ELEMENT of a system. ELEMENT ATTRIBUTE TEXT

If (aNode. nodeType = Node. ELEMENT_NODE ){

Macro definition uses numbers to represent Node Type 1, element 2, attribute node 3, and text node

Alert (aNode. nodeType );

Alert (aNode. nodeName );

}

}

2. children get the internal child !!! Element !!! Node

ChildNode obtains internal subnodes (including text nodes)

Var cssText = ul. children [1]. childNodes [0];

Retrieve text from a text node

Alert (cssText. nodeValue );

Alert (cssText. textContent );

3. append data

CssText. appendData ('css ');

A: The number of characters starting from 0

B: How long data is deleted?

CssText. deleteData (3, 1 );

4. Replace the characters in a specific range with other characters.

CssText. replaceData (1, 2, 'ccccccc ');

5. Insert a certain character segment to a certain position (considering the position after insertion)

CssText. insertData (2, 'A ');

5. Remove text from the text node

CssText. remove ();

5. DOM node-attributes

1. All attributes

Alert (a. attributes. length );

2. directly call the get method to obtain the Element Node

Alert (a. getAttribute ('title '));

3. You can also use the set method to modify the value of an attribute.

A. setAttribute ('title', 'click here ');

4. You can also quickly obtain the value of an attribute by typing.

Alert (a. title );

A. title = 'do not click any more ';

5. Set shortcuts

Test in alt + shift + A browser

A. accessKey = 'a ';

6. Set whether tags can be edited.

A. contentEditable = 'true ';

7. determine whether an element contains an attribute.

Alert (a. hasAttribute ('title '))

8. Obtain the element type.

Alert (a. className)

9. Modifying the element type directly may cause loss of the previous type.

A. className = 'bigsize yellowtext ';

Adding a new type directly to the type list of a does not affect the previous type.

A. classList. add ('border ');

Delete an attribute

A. classList. remove ('bigsize ');

10. Switch whether to use a certain type

If there is one, remove it. If not, add it.

A. classList. toggle ('bigsize ');

11. We can get it by setting the js style just now.

You can get the style directly written in the attribute.

Style js written in Style sheet (Style label) cannot be obtained

A. style. padding = '20px ';

Alert (a. style. padding );

12. Obtain the calculated style (including the modified style in attributes, style sheet, and js ).

Var aStyle = window. getComputedStyle (a, ': after ');

Alert (aStyle. border );