Javascript-DOM summary

DOM summary

1. The meaning of DOM

DOM is the abbreviation of Document Object Model. According to the W3C DOM specification, DOM is a browser-, platform-, and language-independent interface that allows you to access other standard components of the page. Nodes in

DOM:

* The entire document is a document node.

* And each HMTL tag is an element node (divElement).

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

* The attribute of the label is the attribute node (divAttribute).

 * Everything is a node

2. Find an element

1. Get a tag by id,

document.getElementById('id name');

2. Get it by type name Multiple tags

var allA = document.getElementsByClassName('a');

3. Get multiple tags through the name (a or form) attribute of the tag

document.getElementsByName('corresponding name') ;

4. Get multiple tags through the tag name

var allDiv = document.getElementsByTagName('DIV')

5. Get a certain tag through the selector (if there are multiple tags, it will be found The first one)

var aDiv = document.querySelector('div');

6, get multiple tags through the selector

document.querySelectorAll('selector name');

3.DOM Node-element

1. Get all the text including the label

alert (label name.outerHTML) such as li

2. You can see all attribute information about the node through dir

console.dir (label name) such as li

3.for in you can see all the properties and methods about the node

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

alert(li1.previousElementSibling.innerText );

alert(li1.nextElementSibling.innerText);

5.. Get the previous or next element node of a node (maybe 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 child node to the end of ul

ul.appendChild(newLi);

9.Use a new Node replaces a previous child node

ul.replaceChild(newLi,li1);

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

ul.removeChild (newLi.previousElementSibling);

11. Insert a new node to a certain child node

ul.insertBefore(newLi,li1);

12. Insert a new node object position into ul +Node object

'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'

ul.insertAdjacentElement('afterEnd',newLi);

13. Insert html code

ul.insertAdjacentHTML('beforeBegin ','

ppppp

14. Insert text

ul.insertAdjacentText('afterBegin','afterbegin')

4.DOM node-text

1.for traversal

for (var i = 0; i

Use camel case naming method to name variables or functions goShoppingToMall

var aNode = ulChild[i];

Determine whether the remembered point currently traversed is a certain Node type of a system Element ELEMENT Attribute ATTRIBUTE Text TEXT

if (aNode.nodeType == Node.ELEMENT_NODE) ​​{

Macro definition Use numbers to represent node types 1, element 2, attribute node 3, text node

alert (aNode.nodeType);

alert(aNode.nodeName);

}

}

2.children Get the internal children! ! ! element! ! ! Node

childNode gets the internal child nodes (including text nodes)

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

gets the text in the text node

alert(cssText.nodeValue);

alert(cssText.textContent);

3. Append data

cssText.appendData('CSS');

a: Starting from which character and starting from 0

b: How long to delete the data

cssText.deleteData(3,1);

4. Replace a certain range of characters with another range of characters

cssText.replaceData(1,2,'CCCCC');

5. Insert a certain range of characters into A certain position (consider the position after insertion)

cssText.insertData(2,'A');

5. Remove the text in the text node

cssText.remove();

5.DOM Node-Attributes

1. All attributes

alert(a.attributes.length);

2. Directly call the get method on the element node to obtain

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

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

a.setAttribute( 'title', 'Click me');

4. You can also quickly get the value of a certain attribute by typing

alert(a.title);

a.title = 'No more Clicked ';

5. Set the shortcut key

alt + shift + A Test in the browser

a.accessKey = 'A';

6. Set whether the label can be edited

a. contentEditable = 'true';

7. Determine whether the element contains an attribute

alert(a.hasAttribute('title'))

8. Get the type of element

alert(a.className)

9. Directly modifying the type of an element may cause the previous type to be lost

a.className = 'bigSize yellowText';

Directly adding a new type to the type list of a will 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 it doesn’t exist originally, add

a.classList.toggle('bigSize');

11. The style just set through js can be obtained

The style written directly in the attribute can be obtained

written in the style The style js in the table (Style tag) cannot be obtained

a.style.padding = '20px';

alert(a.style.padding);

12. After obtaining the calculation (including the attributes in the , the style in the style sheet, modified in js)

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

alert(aStyle.border);