This is the sixth day of my participation in Gwen Challenge

The first two systems learning DOM (I) and System Learning DOM (II) mainly introduce DOM1 level node types and common apis, while DOM2 and DOM3 introduce more interactive capabilities and support more advanced XML features on this basis. However, with the exception of events, most DOM2 and DOM3 apis are not commonly used, so this is just a brief overview.

1. DOM changes

DOM2 and DOM3 add new attributes and methods for existing types in order to provide better support for DOM addition, deletion, modification, and query. For example:

  • XMLNS: Namespace support (strictly XHTML namespace support), common scenario is to insert SVG into HTML
  • CreateElementNS: Creates a new element that belongs to the namespace
  • GetElementsByTagNameNS: Returns a list of elements belonging to the namespace and tagName (NodeList)
  • IsSupport: to determine whether the current node has some characteristics, and DOM1 document. The implementation. The hasFeature (), such as:
if (document.body.isSupported("HTML"."2.0")) {// Perform operations supported only by dom2-level HTML
}
Copy the code
  • ContentDocument: References document in iframe
  • Others are no longer listed

Second, the style

It provides an API for three CSS mechanisms: external, internal, and inline.

  • GetComputedStyle: Gets the computed style, that is, the final effect of multiple styles
  • OffsetXXX: element offset, as follows:

  • ClientXXX: the size of the element’s client area, as follows:

  • ScrollXXX: scroll size, as follows:

Third, traverse

  • NodeIterator/TreeWalker: AIDS DFS traversal of the DOM

Four, scope,

DOM2 also defines a “range” interface, which is easy to implement when normal DOM operations cannot effectively modify a document.

  • CreateRange: Creates a DOM range
  • Not commonly used, no longer detailed usage

DOM2, DOM3 on the basis of DOM1, add a lot of DOM manipulation methods, these methods in do low-level development (such as editor, etc.) will be very useful, but not in business development, we can roughly understand the overall picture.