Javascript-dom Summary

Dom Summary

Meaning of the 1.DOM

the DOM is the abbreviation for the Document Object model. According to the web-based Dom specification , Dom is a browser, platform, language -independent interface , Allows you to access other standard components of the page.

Nodes in the DOM :

* The entire document is a document node.

   *  and every HMTL tag is a element Node (divelement) .

* The text in the tag is text node (div) .

* The properties of the tag are attribute node (divattribute) .

*  everything is a node

2. Find elements

1. Get a tag by ID,

document.getElementById (' ID name ');

2. Get multiple labels by type name

var AllA = document.getelementsbyclassname (' a ');

3. Get multiple labels from the label's name (A or form) property

Document.getelementsbyname (' corresponding name ');

4. Get multiple tags by tag name

var alldiv = document.getelementsbytagname (' DIV ')

5, get a tag through the selector (if there are multiple labels, it will return the first one found)

var adiv = document.queryselector (' div ');

6. Get multiple labels via selector

Document.queryselectorall (' selector name ');

3.DOM node-element

1. Get all the text to the label

Alert (tag name. outerhtml) such as Li

2. All properties information about the node can be seen through Dir

Console.dir (tag name) such as Li

3.for in to see all the properties and methods of the node

4. Get the previous or next element node of a node

alert (Li1.previousElementSibling.innerText);

alert (Li1.nextElementSibling.innerText);

5: Gets the previous or next element node of a node (possibly a blank text node)

alert (li1.previousSibling.nodeName);

alert (li1.nextSibling.nodeName);

6. Get the first child node in UL

alert (ul.firstchild);

Get the first child element in UL!!!! Node

alert (ul.firstelementchild);

alert (Ul.lastElementChild.innerText);

7. Create a new Li node

var newli = document.createelement (' li ');

Newli.innertext = ' JQuery ';

NewLi.style.color = ' red ';

8. Append a sub-node to the last UL

Ul.appendchild (NEWLI);

9. Replace one of the previous child nodes with a new node

Ul.replacechild (NEWLI,LI1);

10. Remove a child node (the node to be removed must be a sub-node of UL)

Ul.removechild (newli.previouselementsibling);

11. Insert a new node to a child node

Ul.insertbefore (NEWLI,LI1);

12. Insert a new Node object location into UL + Node object

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

Ul.insertadjacentelement (' Afterend ', newli);

13. Inserting HTML code

ul.insertadjacenthtml (' Beforebegin ', ' <p>ppppp</p> ');

14. Inserting text

Ul.insertadjacenttext (' Afterbegin ', ' after start ')

4.DOM node-text

1.for traversal

for (var i = 0; i < ulchild.length; i++) {

Use the Hump naming method to name a variable or function Goshoppingtomall

var anode = Ulchild[i];

To determine the current traversal to the remember point is not a node type element of a certain system elements attribute attribute literal text

if (Anode.nodetype = = Node.element_node) {

A macro defines a number that represents a node type 1, an element 2, an attribute node 3, a text node

alert (Anode.nodetype);

alert (anode.nodename);

}

}

2.children get inside the Sub!!! Elements!!! Node

Childnode Gets the Inner child node (contains the text node)

var csstext = ul.children[1].childnodes[0];

Get text in a text node

alert (Csstext.nodevalue);

alert (csstext.textcontent);

3. Append Data

Csstext.appenddata (' CSS ');

A: Starting from the first few characters starting from 0

B: How long to delete data

Csstext.deletedata (3,1);

4. Replace a range of characters with a different paragraph

Csstext.replacedata (, ' CCCCC ');

5. Insert a paragraph of characters into a position (considering where to insert after insertion)

Csstext.insertdata (2, ' A ');

5. Remove text from a textual node

Csstext.remove ();

5.DOM Node-Properties

1. All the properties

alert (a.attributes.length);

2. Call the Get method directly on the element node to get

Alert (A.getattribute (' title '));

3. You can also modify the value of a property by using the Set method

A.setattribute (' title ', ' at the point I'm a bit ');

4. You can also quickly get the value of a property by hitting the.

alert (a.title);

A.title = ' Don't point anymore ';

5. Set shortcut keys

ALT + SHIFT + A Browser test

A.accesskey = ' A ';

6. Set whether the label can be edited

a.contenteditable = ' true ';

7. Determine if an element contains a property

Alert (A.hasattribute (' title '))

8. Get the type of the element

Alert (A.classname)

9. Modifying the type of the element directly may cause the previous type to be lost

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 a property

A.classlist.remove (' bigsize ');

10. Switch whether a type is used

If it would have been removed, it would have been added.

A.classlist.toggle (' bigsize ');

11. The style you have just set by JS can get

The style that is written directly in the property can get

The style written in the style sheet (style label) JS can't get

a.style.padding = ' 20px ';

alert (a.style.padding);

12. Get the style after the calculation (including the property, the style sheet, the modified in JS)

var astyle = window.getComputedStyle (A, ': after ');

alert (Astyle.border);

Javascript-dom Summary