JS DOM (7.21)

Dom:dom defines the interface for JavaScript to manipulate HTML documents, providing access to HTML documents such as body, form, div, textarea, etc., and how to do so.

• • Get child node: var childarr=ele.children| | Ele.childnodes,
  • Get first child node: Nodeobject.firstchild
  • Get Last child node: nodeobjectlastchild
  • Get a node on a sibling node nodeobject.previoussibling
  • Get sibling node next node nodeobject.nextsibling
  • Get parent node: Nodeobject.parentnode
  • Get node Type: Nodeobject.nodetype
  • Get node Name: Nodeobject.nodename
  • Get node Value: Nodeobject.nodevalue

Get DOM node:

• document.getElementById ("")
• Document.getelementsbytagname ("")

1.JS modifying CSS styles via DOM: Nodeobject.style.cssproperty=newstyle

Get CSS style: NodeObject.style.cssProperty

Eg:document.getElementById ("sore"). color= "#000";

Note: For CSS properties separated by "-", remove "-" and capitalize the first letter after "-".

document.getElementById ("sore"). textalign= "center";

2. Delete node: Parent.removechild (Thisnode)

eg

<div id= "Demo" >    <div id= "Thisnode" > Click Delete I </div></div><script type= "Text/javascript" >document.getElementById ("Thisnode"). onclick=function() {    this. Parentnode.removechild (this);} </script>

3. Clone node: Nodeobject.clonenode (Boolean)

True indicates full cloning, false indicates that only the current node is cloned, not the child nodes and child nodes contain the text and other information

4.innerHEML

(1) innerHTML can insert HTML code directly into the specified node

(2) You can also use InnerHTML to get the HTML code inside the specified node.

Adding nodes

Method 1:insertbefore () Inserts Parentnode.insertbefore (NewNode, Thisnode) before the specified node

Method 2:appendchild () Inserts parentnode.appendchild (NewNode) after the specified node

JS DOM (7.21)