JavaScript Programming - Application Tips for the DOM

DOM properties:

1、firstChild firstElementChild

1.1, firstChild: In IE9+ and other standard browsers, the white space between div and p is considered to be the first child node as a blank node (i.e. a text node), and the div displays the number 3

1.2, firstElementChild can empty the blank part and read the correct node position value

2、nodeName、nodeValue、nodeType

2.1 In the Document Object Model (DOM), each node is an object. DOM nodes have three important properties:

nodeName : The name of the node

nodeValue : The value of the node

nodeType : The type of node

NodeName attribute: The name of the node, which is read-only.

1. The nodeName of the element node is the same as the tag name

2. The nodeName of the property node is the name of the property

3. The nodeName of a text node is always #text

4. The nodeName of a document node is always #document

NodeValue attribute: The value of the node

1. The nodeValue of the element node is undefined or null

2. The nodeValue of a text node is the text itself

3. The nodeValue of the property node is the value of the property

NodeType attribute: The type of node, which is read-only. The following commonly used node types:

Element type Node type

Element 1

Property 2

Text 3

Note 8

Document 9

3. GetAttribute() method and getAttributeNode() method

Definition: Gets the value of a property by the property name of the element node. Such as: title, id, class and other values;

3.1 Is there any difference between var text=con[i].getAttribute("title") and var text=con[i].title?

A: There is no difference between the title point operator and the property value obtained by getAttribute. Point operators Can only get operations on the tags that are inherent in the html, getAttribute can get the same operation as the point operator, and can also operate on custom tag nodes. For example< div title = "1" abcd="5" ></div> both titles in this tab can get operations. Abcd can only get TheAttribute gets the operation, and the point operator cannot get it.

4. SetAttribute() method

Definition: Add a new property with a specified name and value, or set an existing property to the specified value, elementNode.setAttribute(name, value)

For example: var Lists=document.getElementsByTagName("li"); There may be multiple tag names, returning an array;

Lists[i].setAttribute ("title", "Web front-end technology");

Note 1: When adding the "event response" of the genus, you must use the setAttribute method, and directly use elementNode.type="XXX" to create a transaction response that is invalid;

Note 2: Create a style by setAttribute:

Firefox, etc. can be used

var dom=document.getElementById("name");

dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ;

In IE, you must use style.cssText

dom1.style.cssText = "width:10px;height:10px;border:solid 1px red;";

To add, style.cssText is now similar to innerHTML and has become a de facto standard for web development. So the test shows that the firefox browser also supports this way.

5, innerHTML and innerText applications and differences

innerHTML returns the html content within the tag, including the html tag.

InnerText returns the text value within the tag, not the html tag.

6, the difference between innerHTML and createTextNode:

You can add a piece of content to a node, the difference is that if there is an html tag in the content (such as <strong></strong > in the example), it will behave differently, and it will be treated as text in createTextNode and will not be parsed by the browser, but it will be treated as HTML code with innerHTML (as in your example Hello will be bolded).

7. The difference between innerHTML and createTextNode

var body =document.body;

var pment=document.createElement("p");

pment.className="message";

pment.innerHTML="I Love you!";

body.appendChild(pment);

或 var textNode =document.createTextNode("I Love you!");

pment.appendChild(textNode);

Note: createTextNode requires appendChild to be inserted with it;

And innerHTML is assigned directly;

8. Position of window and scroll bar:

scrollLeft: Sets or gets the distance between the left boundary of a given object and the leftmost part of the currently visible content in the window, that is, the content grayed out on the left. (e.g. div1 horizontal scroll bar scrolling distance)

scrollTop: Sets or gets the distance between the topmost of the object and the topmost of the visible content in the window, that is, the grayed-out content on top. (e.g. div1 the distance the scroll bar scrolls vertically)

offsetLeft: Gets the computed left position of the specified object relative to the layout or the parent coordinate specified by the offsetParent property. (e.g. the distance of the div from the left part of the screen).

offsetTop: Gets the calculated top position of the specified object relative to the layout or the parent coordinates specified by the offsetParent property (for example, the distance of the div from the top of the screen).

9. Why XX[i] and this in for cannot be mixed:

Mainly from the order of execution:

The for loop executes first, binding events to each element object; // each element binds the event and does not execute

After the for loop ends, the value of i becomes leangth;// so this cannot be replaced with trs[i], where trs[i] is trs[length], does not exist, and is undefined

Trigger the event, execute the method body.// Because the element objects at this time are bound to the event, they can be executed.

Note: If this is in a function under windows, it is actually pointing to windows rather than to the object at that time; such as setTimerout, which is the time inside the function under windows.

10. The difference between setTimeout and setInterval timer:

10.1, setTimeout: This is a timeout call, that is, the function method inside is called after the time is up;

Format: XX=setTimeout(function(){}, time milliseconds);

or setTimeout(function(){});

10.2 The setInterval() method will keep calling the function until clearInterval() is called or the window is closed;

The ID value returned by setInterval(), which can be used as a parameter to the clearInterval() method;