Day31 JS notes DOM 2021.09.26

Dom node ：

- Elements / Tag node :html All tags below the tag / Elements

- Attribute node : Attributes within the tag

- Text node : All text content in the label

Get child nodes and child element nodes ：（ When getting child nodes   If there is a label, the label will be output Output without label #text）

- childNodes Get all child nodes under the tag

- children Get all the child element nodes under the tag

- firstChild Get the first child node under the tag

- lastChild Get the last child node under the tag

- firstElementChild Get the first child element node under the tag

- lastElementChild Get the last child element node under the tag

Get brother nodes ：

- previousSibling Get the last sibling node

- previousElementSibling Get the previous sibling element node

- nextSibling Get the next sibling node

- nextElementSibling Get the next sibling element node

- parentNode Get the parent node

- parentElement Get the parent element node

- attributes Get the properties of the element

  Properties of a node ：

- nodeType The type of node

- nodeName Node name

- nodeValue The value of the node

  Operation node ：

- increase document.createElement(' Created tag name ')

- Delete Parent node .removeChild( Deleted child nodes )

- modify Parent node .replaceChild( New nodes , Replaced nodes )

- Insert Parent node .appendChild( Child node )

- In front of a node Parent node .insertBefore( New node , Old node )

- Replication node The node being copied .cloneNode( Parameters )

        - Parameter write : true Not only copy the structure You can also copy text content

        - Parameters are not written :: Just copy the structure

Get inline style ： dom Elements .style. attribute = ' Property value '

Get non inline styles ： window.getComputedStyle( Tag element )   - compatible : dom Elements .currentStyle. attribute

Get the offset of the element : The distance between the box element and the upper left of the browser

- offsetLeft Left offset

- offsetTOp The offset at the top

Be careful ：

- The distance from the outside of the box to the browser

- margin、 location The size of the will affect ( Floating affects but does not use )

- Displacement does not affect

Get the size of the element itself ：

- offsetWidth/offsetHeight contain content、padding contain border

- clientWidth/clientHeight contain content、padding It doesn't contain border