Home > Developer > Web Develop
JS DOM node:
The relationship of a node in the JS DOM is defined as the attribute of the node:
There are usually the following types of relationships between nodes:
(The relationship here is supported by all browsers)
Firefox and Google support the IE8 unsupported node relationships are:
Previouselementsibling
Nextelementsibling
Firstelementchild
Lastelementchild
In actual work, we can not support these IE8, but Google and Firefox are supported by the node attributes are encapsulated, so that they can be compatible in each browser.
4 Examples of packages:
/** * Gets the previous label element of the current object * @param obj * @returns {*} */function getprevioussibling (obj) {if (obj.previouselementsibling) {//previouselementsibling can directly get the previous sibling tag node return obj.previouselementsibling; }else {var node = obj.previoussibling;//is supported by all browsers, but to determine the node type, previoussibling cannot directly get the element of type tag, so it needs to determine its node type. while (node&&node. Nodetype!=1) {//To determine if a node on a node exists with the type of the node is a label type, if not, use the while loop to continue looping through the nodes until it is obtained node = node.previoussibling; } return node; The found Label node returns}}/** * The function that gets the sibling label node of the current element * @param obj * @returns {*} */function getnextsibling (obj) {if (obj.nextelement Sibling) {//Firefox Google all support, will only get the label sibling node, IE8 does not support return obj.nextelementsibling; }else {var node = obj.nextsibling;//NextSibling is supported by all browsers, but gets text nodes, IE8 and previous browsers ignore blank text nodes while (node&< /c2>&node. Nodetype!=1) {node = node.nextsibling; } return node; }}/** * The first child label node of the current object that gets compatibility * @param obj * @returns {*} */function getfirstchild (obj) {if (obj.firstelementchild) { Return obj.firstelementchild;//will get to the first child node element returned}else {var node = obj.firstchild;//Gets the first child node of the current object, but this node may be a text section Point while (node&&node. Nodetype!=1) {node = node.nextsibling; } return node; }}/** * Gets the last child label node of the current object * @param obj * @returns {*} */function getlastchild (obj) {if (obj.lastelementchild) {RET Urn Obj.lastelementchild; }else {var node = Obj.lastchild; while (node&&node. Nodetype!=1) {node = node.previoussibling;//the previous sibling node of the current object} return node; }}
Clone node:
CloneNode (True) This is a representation of all the contents of a cloned node (the contents of a tag + tag);
CloneNode (false) This situation is simply a representation of the node's tag being cloned;
Cases:
<Body><ulID= "List"> <Li>111111</Li> <Li>222222</Li> <LiID= "Li3">333333</Li> <Li>444444</Li></ul><Script> varul=document.getElementById ("List"); varLi=document.getElementById ("Li3"); Console.log (Li.clonenode (false)); //if it is false, it is just the equivalent of copying (cloning) a tagConsole.log (Li.clonenode (true));//clone the Li tag as it is, containing all the information inside it, including the child nodesConsole.log (Ul.clonenode (false)); Console.log (Ul.clonenode (true)); //when the argument is true, it is a deep clone that clones all the child nodes of the current object //when the argument is false, it is a shallow clone that only clones the label and does not contain text information</Script>
Some of the properties commonly used in the DOM are:
Display (None/block): Control element is displayed, does not occupy the original position in the standard flow;
Visibility (Visible/hidden): Controls the display of elements that occupy the original position in the standard flow
BackgroundColor: Controlling the background color of an element
BackgroundImage: Controlling the path of an element's background picture
Color: Control foreground color
Width: control elements ' widths
Height: Controls how high the element is
Border: Controlling the properties of a border
Position: What positioning the control element uses
Left/top: The offset after the positioning of the control element (note at the end do not forget to bring the unit px)
box.style.position= "Absolute"; box.style.left= "200px";
ZIndex: The hierarchy of Control elements (case: Which card on the wishing wall is clicked which shows on top)
Filter: Controls the transparency of elements (IE8 support)
Box.style.filter= "Alpha (opacity=30)";
And Firefox and Google support are:
Box.style.backgroundcolor= "Rgba (120,120,120,.3)";
Add: The selected property of <option></option> in the drop-down list
The selected property can set or return the value of the option's Selected property.
This property sets the current state of the option, and if true, the option is selected. The initial value of this property comes from the selected property of <option>.
Lottery Case:<Body><Selectname=""ID= "SEL"> <optionvalue="">First prize</option> <optionvalue="">Prize</option> <optionvalue="">Third</option> <optionvalue="">Four-level award</option> <optionvalue="">Five-Equal prize</option> <optionvalue="">Six prize</option> <optionvalue="">Seven-Equal prize</option> <optionvalue="">Eight prize</option> <optionvalue="">Ninth Prize</option></Select><inputtype= "button"value= "Lottery"ID= "BTN"/><Script> varsel=document.getElementById ("sel"); varOptions=Sel.children; varbtn=document.getElementById ("btn"); Btn.onclick=function(){ varIndex=Math.floor (Math.random ()*options.length); Options[index].selected=true; }</Script>
In the DOM, attributes are also nodes. Unlike element nodes, attribute nodes have text values.
The way to get the value of a property is to get its text value.
The GetAttribute () method returns the value of the property.
The GetAttributeNode () method returns the attribute node.
The SetAttribute () method is used to change the value of a property or create a new property.
The RemoveAttribute () method deletes the specified property.
The CreateElement () method creates a new element node;
The AppendChild () method adds a new child node to the end of the node's child nodes list.
The RemoveChild () method deletes the specified node. When a node is deleted, all its child nodes are also deleted.
The InsertBefore () method is used to insert a node before the specified child node. This method is useful when the location of the node being added is important.
The ReplaceChild () method replaces a child node with another node. If successful, the method returns the replaced node, or null if it fails.
A summary of the relationship attribute encapsulation, clone node, and some properties commonly used in Dom of JS learning DOM node
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
