DOM manipulation

  • Get node:

    • Children: Property returns an error collection of child elements (only element node “tag” is returned)
    • ChildNodes: Returns all data in child elements (text nodes)
    • PrentNode: obtains the parent node
    • OffsetPrent: Points to the most recently located parent element
    • FirstChild | lastChild: gets the end nodes of the element (lines will get discount)
    • FirstElementChild | lastElementChild: gets the end nodes of the elements (solve the problem of folding line) advanced browser USES
    • NextSibiling | nextElementSibiling: retrieve the next siblings
    • PreviousSibiling: Gets the previous sibling node

  • Create a node

    • CreateElement (‘p’) : Creates the label
    • CreateTextNode (‘ super ‘) : Creates a text node

  • Additional nodes

    • Ul.appendchild (‘li’ 🙂 appends elements to the end of the element
    • InsertBefore (‘div’, ‘p’) : Inserts the p tag before the div element

  • Remove nodes

    • Remove () : Removes elements
    • RemoveChild () : Takes an argument, the element node to remove

  • Replace the element

    • ReplaceChild () : The method takes two arguments, the node to be inserted && the node to be replaced

  • Copy the element

    • ChoneNode () : method copies the node and returns a copy of the node (takes an argument to decide whether to copy the content, default is false, do not copy the content)

  • Access to the node

    • Queryselect: Obtains a node
    • QuerySelectAll: Gets node groups

  • Gets and sets properties

    • GetAttribute () : Takes an argument, the attribute to get, and gets the value of the attribute
    • SteAttribute () : takes two parameters, the attribute to be set, and the value of the attribute to be set