Главная » Языки программирования

What is dom elements in html

Содержание
  1. Document Object Model (DOM)
  2. DOM interfaces
  3. Obsolete DOM interfaces
  4. HTML DOM
  5. SVG interfaces
  6. SVG element interfaces
  7. SVG data type interfaces
  8. Static type
  9. Animated type
  10. SMIL-related interfaces
  11. Other SVG interfaces
  12. Specifications
  13. See also
  14. Found a content problem with this page?
  15. MDN
  16. Support
  17. Our communities
  18. Developers
  19. What is the HTML DOM?
  20. The HTML DOM (Document Object Model)
  21. The HTML DOM Tree of Objects
  22. Finding HTML Elements
  23. Finding HTML Element by Id
  24. Example
  25. Finding HTML Elements by Tag Name
  26. Example
  27. Example
  28. Finding HTML Elements by Class Name
  29. Example
  30. Finding HTML Elements by CSS Selectors
  31. Example
  32. Finding HTML Elements by HTML Object Collections
  33. Full HTMLDOM Tutorial

Document Object Model (DOM)

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document’s structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

To learn more about what the DOM is and how it represents documents, see our article Introduction to the DOM.

DOM interfaces

Obsolete DOM interfaces

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:

  • DOMConfiguration
  • DOMErrorHandler
  • DOMImplementationList
  • DOMImplementationRegistry
  • DOMImplementationSource
  • DOMLocator
  • DOMObject
  • DOMSettableTokenList
  • DOMUserData
  • ElementTraversal
  • Entity
  • EntityReference
  • NameList
  • Notation
  • TypeInfo
  • UserDataHandler
Читайте также:  Python and big data pdf

HTML DOM

A document containing HTML is described using the Document interface, which is extended by the HTML specification to include various HTML-specific features. In particular, the Element interface is enhanced to become HTMLElement and various subclasses, each representing one of (or a family of closely related) elements.

The HTML DOM API provides access to various browser features such as tabs and windows, CSS styles and stylesheets, browser history, and so forth. These interfaces are discussed further in the HTML DOM API documentation.

SVG interfaces

SVG element interfaces

  • SVGAElement
  • SVGAnimationElement
  • SVGAnimateElement
  • SVGAnimateColorElement Deprecated
  • SVGAnimateMotionElement
  • SVGAnimateTransformElement
  • SVGCircleElement
  • SVGClipPathElement
  • SVGComponentTransferFunctionElement
  • SVGCursorElement
  • SVGDefsElement
  • SVGDescElement
  • SVGElement
  • SVGEllipseElement
  • SVGFEBlendElement
  • SVGFEColorMatrixElement
  • SVGFEComponentTransferElement
  • SVGFECompositeElement
  • SVGFEConvolveMatrixElement
  • SVGFEDiffuseLightingElement
  • SVGFEDisplacementMapElement
  • SVGFEDistantLightElement
  • SVGFEDropShadowElement
  • SVGFEFloodElement
  • SVGFEFuncAElement
  • SVGFEFuncBElement
  • SVGFEFuncGElement
  • SVGFEFuncRElement
  • SVGFEGaussianBlurElement
  • SVGFEImageElement
  • SVGFEMergeElement
  • SVGFEMergeNodeElement
  • SVGFEMorphologyElement
  • SVGFEOffsetElement
  • SVGFEPointLightElement
  • SVGFESpecularLightingElement
  • SVGFESpotLightElement
  • SVGFETileElement
  • SVGFETurbulenceElement
  • SVGFilterElement
  • SVGFilterPrimitiveStandardAttributes
  • SVGFontElement Deprecated
  • SVGFontFaceElement Deprecated
  • SVGFontFaceFormatElement Deprecated
  • SVGFontFaceNameElement Deprecated
  • SVGFontFaceSrcElement Deprecated
  • SVGFontFaceUriElement Deprecated
  • SVGForeignObjectElement
  • SVGGElement
  • SVGGeometryElement
  • SVGGlyphElement Deprecated
  • SVGGlyphRefElement Deprecated
  • SVGGradientElement
  • SVGGraphicsElement
  • SVGHatchElement Experimental
  • SVGHatchpathElement Experimental
  • SVGHKernElement Deprecated
  • SVGImageElement
  • SVGLinearGradientElement
  • SVGLineElement
  • SVGMarkerElement Experimental
  • SVGMaskElement
  • SVGMetadataElement
  • SVGMissingGlyphElement Deprecated
  • SVGMPathElement
  • SVGPathElement
  • SVGPatternElement
  • SVGPolylineElement
  • SVGPolygonElement
  • SVGRadialGradientElement
  • SVGRectElement
  • SVGScriptElement
  • SVGSetElement
  • SVGStopElement
  • SVGStyleElement
  • SVGSVGElement
  • SVGSwitchElement
  • SVGSymbolElement
  • SVGTextContentElement
  • SVGTextElement
  • SVGTextPathElement
  • SVGTextPositioningElement
  • SVGTitleElement
  • SVGTRefElement Deprecated
  • SVGTSpanElement
  • SVGUseElement
  • SVGViewElement
  • SVGVKernElement Deprecated

SVG data type interfaces

Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.

Static type

  • SVGAngle
  • SVGColor Deprecated
  • SVGICCColor Deprecated
  • SVGElementInstance
  • SVGElementInstanceList
  • SVGLength
  • SVGLengthList
  • SVGNameList
  • SVGNumber
  • SVGNumberList
  • SVGPaint
  • SVGPathSeg Deprecated
  • SVGPathSegClosePath Deprecated
  • SVGPathSegMovetoAbs Deprecated
  • SVGPathSegMovetoRel Deprecated
  • SVGPathSegLinetoAbs Deprecated
  • SVGPathSegLinetoRel Deprecated
  • SVGPathSegCurvetoCubicAbs Deprecated
  • SVGPathSegCurvetoCubicRel Deprecated
  • SVGPathSegCurvetoQuadraticAbs Deprecated
  • SVGPathSegCurvetoQuadraticRel Deprecated
  • SVGPathSegArcAbs Deprecated
  • SVGPathSegArcRel Deprecated
  • SVGPathSegLinetoHorizontalAbs Deprecated
  • SVGPathSegLinetoHorizontalRel Deprecated
  • SVGPathSegLinetoVerticalAbs Deprecated
  • SVGPathSegLinetoVerticalRel Deprecated
  • SVGPathSegCurvetoCubicSmoothAbs Deprecated
  • SVGPathSegCurvetoCubicSmoothRel Deprecated
  • SVGPathSegCurvetoQuadraticSmoothAbs Deprecated
  • SVGPathSegCurvetoQuadraticSmoothRel Deprecated
  • SVGPathSegList Deprecated
  • SVGPoint Deprecated
  • SVGPointList Deprecated
  • SVGPreserveAspectRatio
  • SVGRect Deprecated
  • SVGStringList
  • SVGTransform
  • SVGTransformList
Читайте также:  Python машинное обучение habr

Animated type

  • SVGAnimatedAngle
  • SVGAnimatedBoolean
  • SVGAnimatedEnumeration
  • SVGAnimatedInteger
  • SVGAnimatedLength
  • SVGAnimatedLengthList
  • SVGAnimatedNumber
  • SVGAnimatedNumberList
  • SVGAnimatedPathData Deprecated
  • SVGAnimatedPoints
  • SVGAnimatedPreserveAspectRatio
  • SVGAnimatedRect
  • SVGAnimatedString
  • SVGAnimatedTransformList

Other SVG interfaces

  • GetSVGDocument
  • ShadowAnimation
  • SVGColorProfileRule Deprecated
  • SVGCSSRule Deprecated
  • SVGDocument
  • SVGException Deprecated
  • SVGFitToViewBox
  • SVGLocatable Deprecated
  • SVGRenderingIntent Deprecated
  • SVGUnitTypes
  • SVGUseElementShadowRoot
  • SVGViewSpec Deprecated
  • SVGZoomEvent Deprecated

Specifications

See also

Found a content problem with this page?

This page was last modified on May 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

What is the HTML DOM?

HTML

The HTML DOM is an Object Model for HTML. It defines:

  • HTML elements as objects
  • Properties for all HTML elements
  • Methods for all HTML elements
  • Events for all HTML elements

HTML

The HTML DOM is an API (Programming Interface) for JavaScript:

  • JavaScript can add/change/remove HTML elements
  • JavaScript can add/change/remove HTML attributes
  • JavaScript can add/change/remove CSS styles
  • JavaScript can react to HTML events
  • JavaScript can add/change/remove HTML events

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

Finding HTML Elements

When you want to access HTML elements with JavaScript, you have to find the elements first.

There are a couple of ways to do this:

  • Finding HTML elements by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name
  • Finding HTML elements by CSS selectors
  • Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with >

Example

If the element is found, the method will return the element as an object (in myElement).

If the element is not found, myElement will contain null.

Finding HTML Elements by Tag Name

This example finds all

elements:

Example

This example finds the element with and then finds all

elements inside «main»:

Example

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use getElementsByClassName().

This example returns a list of all elements with >

Example

Finding elements by class name does not work in Internet Explorer 8 and earlier versions.

Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that matches a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.

This example returns a list of all

elements with >

Example

The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions.

Finding HTML Elements by HTML Object Collections

HTML object collections are also accessible:

Full HTMLDOM Tutorial

This has been a short introduction to HTMLDOM.

For a full HTMLDOM tutorial go to W3Schools HTMLDOM Tutorial.

Источник

Оцените статью
© 2024 Программирование