DOM Study Notes 3. dom Study Notes

DOM Study Notes 3. dom Study Notes

Get nodes through node hierarchy: (important)

When a node has no id or name, the link in the node is another way to get the node.

<! --
Get nodes through node relationship
Link:
1. parent node: parentNode, a parent node
2. subnode: childNodes, which is a set of directly descendant nodes
3. sibling nodes: relatively less useful, because there is no browser resolution method, the order is different
Previous sibling node: previussibing
Next sibling node: nextSibing
-->

<Script type = "text/javascript"> function getNodeByLevel () {// obtain the table node var tableNode = document on the page. getElementById ("tableId"); // obtain the parent node // var node = tableNode. parentNode; // alert (node. nodeName); // obtain the subnode var chnodes = tableNode. childNodes; // for some reason, the first child node of the table is # text (text node). The reason for the browser // press enter after the table label is complete, google Chrome considers it a blank text node // alert (chnodes [1]. childNodes [0]. nodeName); // obtain the sibling node var preBrotherNode = tableNode. previussibling; alert (preBrotherNode. nodeName); // use as few sibling nodes as possible, because different browser Parsing is inconsistent, it is easy to parse the text node} </script> <input type = "button" value = "Get the tag through the node relationship" onclick = "getNodeByLevel () "/> <div> div area </div> <table id =" tableId "> <tr> <td> cell 1 </td> <td> Cell 2 </td> </tr> </table> <dl> <dt> upper project </dt> <dd> lower project </dd> </dl> <a href = "http://www.baidu.com "> Baidu </a>

DOM node operation: Create and add

<! DOCTYPE html> 


Example-DOM news Font:



Demonstrate news font styles



Steps:

1. Use tags to encapsulate news Fonts

2. Define a style

3. Determine the event source and the node to be processed in the Processing Method

Event Source: <a> event: onclick

Processed node: div-newstext



To add custom event processing to a hyperlink, you must first determine the default click effect of the hyperlink.

Href = "javascript: void (0)". This method is used to cancel the hyperlink effect.





<! DOCTYPE html> 

If the effect required by the user click is not unique, the parameter is passed only. Although the effect is achieved, too many parameters are passed, the reading is poor, and the coupling between js Code and css code is high, do not use extensions



Solution: encapsulate multiple required styles into selectors. You only need to attach different selectors to the specified tag.



Pre-defined style (generally, class selector is used. Pay attention to the priority of the defined style)


<! DOCTYPE html>