1. DOM evolution

XML namespaces

  • You can mix different XML languages in a well-formed document without worrying about element naming conflicts

1. Node changes

  • localNameThe node name without the namespace prefix
  • namespaceURI, the namespace URL of the node, null if not specified
  • prefix, the namespace prefix, null if no
  • isDefaultNamespace(namespaceURI), returns a Boolean value indicating whether namespaceURI is the default namespace for a node
  • lookupNamespaceURI(prefix)Returns the namespace URI given to the specified prefix
  • lookupPrefix(namespaceURI)Returns the given namespaceURI prefix

2. Document changes

  • createElementNS(namespaceURI, tagName)Creates a new element in the specified namespace namespaceURI with the given tagName tagName
  • createAttributeNS(namespaceURI, attributeName)Creates a new attribute of the namespace namespceURI with the given attributeName
  • getElementsByTagNameNS(namespaceURI, tagName)Returns the NodeList of all elements with tagName in the specified namespace namespaceURI

3. Element changes

  • getAttributeNS(namespaceURI, localName)
    • Gets an attribute named localName in the specified namespace namespaceURI
  • getAttributeNodeNS(namespaceURI, localName)
    • Gets the attribute node named localName in the specified namespace namespaceURI
  • getElementsByTagNameNS(namespaceURI, tagName)
    • Gets the NodeList of the element signed tagName in the specified namespace namespaceURI
  • hasAttributeNS(namespaceURI, localName)
    • Returns a Boolean value indicating whether the element has an attribute named localName under the naming parenthesis namespaceURI
  • removeAttributeNS(namespaceURI, localName)
    • Delete the attribute named localName in the specified namespace namespaceURI
  • setAttributeNS(namespaceURI, qualifiedName, value)
    • Set the property named qualifiedName in the specified namespace namespaceURI to value
  • setAttributeNodeNS(attNode)
    • Sets the attribute node attNode containing namespace information for the element

4. NamedNodeMap changes

  • getNamedItemNS(namespaceURI, localName)Gets the item named localName in the specified namespace namespaceURI
  • removeNamedItemNS(namespaceURI, localName)To delete the item named localName in the specified namespace namespaceURI
  • setNamedItemNS(node)Sets (adds) a node containing namespace information for the element.

2. Other changes

1. Changes of DocumentType

2, Document changes

  • importNode()Get a node from another document and import it into the new document so that it can be inserted into the new document
    • withcloneNode()Similarly, it takes two parameters: the node to copy and a Boolean value indicating whether to copy the subtree at the same time, and returns the new node suitable for use in the current document.
  • defaultViewIs a pointer to the window for the current document.
  • document.implementation.createDocumentType()
  • document.implementation.createDocument()

3. Node changes

  • isSameNode().isEqualNode()Accepts a node argument and returns true if the node is the same or equal to the reference node
    • Nodes are the same, which means referring to the same object
    • Nodes are equal, meaning that the nodes are of the same type, have equal attributes, and attributes and childNode are equal.
  • setUserData()Used to append parameters to a node: key, value, handler

4. Changes to the inline pane

2, style,

  • There are three ways to define styles: external style sheets, document style sheets, and element-specific styles

1. Access element styles

  • The corresponding style property in JavaScript is an instance of the CSSStyleDeclaration type.
  • Contains all style information set for the element through the HTML style attribute, but does not include styles inherited from document styles or external styles through cascading mechanisms.
  • CSS property names are hyphenated, which corresponds to the small hump in JavaScript
  • Most can be converted directly, except for float, which is reserved, so cssFloat is used
  • The values set by the style property can be obtained from the Style object

DOM style properties and methods

  • Properties and methods on the Style object
    • cssTextContains the CSS code in the style property
      • When read, the CSS code in the style property is returned
      • When written, override the value of the entire style property
    • length, the number of CSS attributes applied to the element
    • parentRuleRepresents the CSSRule object for CSS information
    • getPropertyPriority(propertyName)If CSS property propertyName is used! Important, returns “important”, otherwise returns an empty string
    • getPropertyValue(propertyName)Returns the string value of the property propertyName
    • item(index), returns the name of the CSS property whose index is index
    • removeProperty(propertyName)To remove the CSS property propertyName from the style
      • Apply the default style of the property after deletion
    • setProperty(propertyName, value, priority), set the CSS property propertyName to value and priority to “important” or an empty string

2. Computing styles

  • document.defaultView.getComputedStyle(element, null)
    • Two arguments: the element to get the computed style and the pseudo-element string
    • If you do not need to query for pseudo-elements, you can pass NULL
    • Returns a CSSStyleDeclaration object containing the element’s computed style.
    • Read-only and cannot be modified.
    • The default values may not be the same for different browsers.

2. Manipulate style sheets

  • The CSSStyleSheet type represents a CSSStyleSheet, and the CSSStyleSheet type inherits StyleSheet, which can be used as a non-CSS StyleSheet base class.
  • Inherit the properties of StyleSheet:
    • Disabled: Indicates whether Boolean styles are disabled
    • Herf, use<link>Contains the stylesheet, returns the stylesheet URL, otherwise returns NULL
    • Media, a collection of media types supported by the stylesheet
    • OwnerNode, pointing to the node that owns the current stylesheet (<link>or<style>Elements)
    • ParentStyleSheet, the current stylesheet passes@importIs contained in another stylesheet, this property points to the stylesheet it was dumped into.
    • Title, the title property of the ownerNode
    • Type, a string that represents the type of the stylesheet. For CSS style sheets, yestext/css
  • Additional methods
    • CssRules, the collection of style rules contained in the current style sheet
    • OwnerRule,@importThe rules of
    • DeleteRule (index), which deletes a rule in cssRules at the specified location
    • InsertRule (rule, index), specify the position to insert a rule in cssRules

1. CSS rules

  • CssText, the entire rule text
  • ParentRule, which points to the rule that this rule contains
  • ParentStyleSheet, which contains the stylesheet for the current rule
  • SelectorText, which returns the selectorText of the rule.
  • Style, returns the CSSStyleDeclaration object
  • Type, a numeric constant, returns 1 for style rules

2. Create a rule

  • InsertRule () adds a new rule

3. Delete the rule

  • DeleteRule () Deletes a rule

3. Element size

1. Offset size

  • All the visual space that an element takes up on the screen. The visual space of an element on the page is determined by its height and width, including inside margins, scrollbars, and borders (excluding margins)

    • OffsetHeight, the vertical pixel size of the element, including its height, horizontal scroll bar height (visible), and top and bottom border height

    • OffsetLeft, the distance outside the left border of the element contains the number of pixels inside the left border of the element

    • OffsetTop, the distance outside the upper border of the element contains the number of pixels inside the upper border of the element

    • OffsetWidth, the horizontal pixel size of the element, including its width, the vertical scroll width (visible), and the width of the left and right borders.

    • Where offsetLeft and offsetTop are relative contain elements, which are stored in the offsetParent property. OffsetParent is not necessarily a parentNode, as in < TD > offsetParent is an ancestor of the

      element.

  • To determine the offset of the element on the page, add the offsetLeft and offsetTop attributes to the same offsetParent attributes, respectively, up to the root element.

    function getElementLeft(element) {
  let actualLeft = element.offsetLeft;
  let current = element.offsetParent;
  while(current ! = =null) {
    actualLeft += current.offsetLeft
    current = current.offsetParent
  }
  return actualLeft
}
Copy the code

  • GetElementTop () and getElementLeft() return the same value as offsetLeft and offsetTop

  • Read-only, recalculated on each access

2. Client size

  • Contains the space occupied by element content and its inner margins.

    • clientWidthIs the width of the content area plus the width of the left and right margins
    • clientHeightIs the height of the content area plus the height of the lower inner margin

  • The client dimension is actually the internal space of the element, excluding the space occupied by the scroll bar, and is most commonly used to determine the browser viewport size (these two attributes of document.documentElement).

  • Read-only, recalculated on each access

3, rolling size

  • Provides information about how far the element content can be scrolled.

  • Some elements, such as < HTML >, scroll freely without any code, while others require the OVERFLOW property of CSS to scroll.

    • ScrollHeight, the total height of the element’s contents without the scrollbar

    • ScrollLeft, the number of pixels hidden to the left of the content area. Setting this property changes the scrolling position of an element.

    • ScrollLeft, the number of pixels hidden at the top of the content area. Setting this property changes the scrolling position of an element.

    • ScrollWidth, the total width of the element’s content when no scroll bar appears.

  • ScrollWidth and scrollHeight can be used to determine the actual size of a given element’s content.
  • On documents that do not require scrolling, scrollWidth and scrollHeight are indistinguishable from clientWidth and clientHeight. If the document size exceeds the viewport size
    • ScrollWidth and scrollHeight are equal to the width and height of the document content
    • ClientWidth and clientHeight are equal to the viewport size
  • ScrollLeft and scrollTop are used to determine where the current elements should scroll, or to set their scrolling position.

4. Determine the element size

  • getBoundingClientRect(), returns a DOMRect object containing left, top, right, bottom, height, and width

3, traverse

  • NodeIterator, TreeWalker
  • Depth-first traversal

1, the NodeIterator

  • throughdocument.createNodeIterator() Method to create instance
    • root, as the node traversing the root node
    • whatToshow, numeric code that indicates which nodes should be accessed
    • filter, NodeFilter object or function that indicates whether a particular node is received or skipped
    • entityReferenceExpansion, Boolean value indicating whether to extend the entity reference.
  • acceptNode()methods
    • NodeFilter.FILTER_ACCEPT
    • NodeFilter.FILTER_SKIP
  • nextNode()andpreviousNode()Maintaining internal Pointers

2, TreeWalker

  • An advanced version of NodeIterator
  • containsnextNode()andpreviousNode()methods
    • parentNode(), traverses to the parent of the current node
    • firstChild(), traverses to the first child of the current node
    • lastChild()Traversal to the last child of the current node
    • nextSibling(), traverses to the next sibling of the current node
    • previousSibling(), traverses to the previous sibling of the current node.
  • By calling thedocument.createTreeWalker()Method to create
  • Parameter with the document. CreateNodeIterator the same.
  • Difference:
    • Added nodefilter_reject to skip this node and its children.
    • You can move around in the DOM structure.
  • CurrentNode property, which represents the last node returned during the traversal. You can modify this property to influence the starting point of the subsequent traversal.

4, scope,

  • Used to select content in a document without regard to boundaries between nodes.

1. DOM scope

  • CreateRange () creates a DOM scope object

    let range = document.createRange()

  • With the document management that created it, it cannot be used in other documents.

  • Each scope is an instance of type Range with corresponding properties and methods.

    • startContainer, the node where the range starts
    • startOffset, the offset of the starting point of the range in startContainer. If startContainer is a text node, comment node, or CData block node, startOffset refers to the number of characters skipped before the start of the range.
    • endContainer, scope specifies the node where the key is located
    • endOffset, the offset of the end of the range in endContainer
    • commonAncestorContainer, in the documentstartOffsetandendContainerIs the deepest node of the offspring.

2. Simple choices

  • selectNode()
    • Receives a node as an argument to add node information to the scope in which it is invoked
    • Select the entire node, including its descendants
  • selectNodeContents()
    • Receives a node as an argument to add node information to the scope in which it is invoked
    • Select only descendants of nodes.
  • After a node or node descendant is selected
    • setStartBefore(refNode), set the starting point of the range before the refNode, making the refNode the first child of the selection
    • setStartAfter(refNode)Set the starting point of the range after the refNode to exclude the refNode from the selection
    • setEndBefore(refNode) ‘to exclude the refNode from the selection by setting the end of the range before the refNode
    • setEndAfter(refNode), set the end of the range after the refNode, making the refNode the last child of the selection

3. Complex choices

  • setStart()
    • Receives two parameters, referring to node and offset
    • Reference node (startContainer)
    • Offset (startOffset)
  • setEnd()
    • Receives two parameters, referring to node and offset
    • Reference node (endContainer)
    • endOffset

4. Scope of operation

  • After the scope is created, the browser internally creates a document fragment node to contain the nodes in the scope selection.
  • Scopes can identify missing start and end tags, allowing you to reconstruct a valid DOM structure.
  • deleteContents()To remove the nodes contained in the scope from the document
  • extractContents()To remove the scope selection from the document and return the document fragment corresponding to the scope. You can insert the scoped content elsewhere in the document.
  • cloneContents()Create a copy and insert it elsewhere in the document

5. Range insertion

  • insertNode()Insert the node at the beginning of the range selection
  • surroundContentsInsert the content that contains the range

6. Range folding

  • If the scope does not select any part of the document, it is called folding
  • collapse(), the parameter Is Boolean and the target is which end to fold to
  • collapsedTests to see if it has collapsed

7. Comparison of scope

  • compareBoundaryPoints()Determine whether there is a common boundary (starting or ending point) between scopes. Accepts two parameters, the range to be compared, and a constant value that indicates how the comparison is performed.
    • Range.start_to_start (0), which compares the start of two ranges
    • Range.start_to_end (1), comparing the start of the first Range with the end of the second
    • Range.end_to_end (2), which compares the end points of two ranges
    • Range.end_to_start (3), which compares the end of the first Range with the start of the second
  • The first range edge returns -1 before the second range edge, 0 for equality, and 1 after that

8. Replication scope

  • cloneRange()Create a copy of the scope that calls it

9, clear

  • The detach() method cleans up and dereferences so that the garbage collector can free up the memory it occupies

    range.detch()
range = null
Copy the code