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

Dom html and xml

Содержание
  1. Руководство по DOM
  2. DOM интерфейсы
  3. Устаревшие интерфейсы
  4. HTML интерфейсы
  5. Интерфейсы HTML-элементов
  6. Другие интерфейсы
  7. Устаревшие HTML интерфейсы
  8. SVG интерфейсы
  9. Интерфейсы SVG элементов
  10. Интерфейсы SVG данных
  11. Статический тип
  12. Анимированный тип
  13. Относящиеся к SMIL
  14. Другие SVG интерфейсы
  15. Смотрите также
  16. Found a content problem with this page?
  17. MDN
  18. Support
  19. Our communities
  20. Developers
  21. XML DOM Tutorial
  22. The HTML DOM
  23. Example
  24. Example
  25. This is a Heading
  26. This is a Heading
  27. The XML DOM
  28. Get the Value of an XML Element
  29. Example
  30. Loading an XML File
  31. Example
  32. Example Explained
  33. Loading an XML String
  34. Example
  35. Programming Interface
  36. XML DOM Properties
  37. XML DOM Methods

Руководство по DOM

Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.

DOM интерфейсы

  • Attr
  • CharacterData
  • ChildNode Экспериментальная возможность
  • Comment
  • CustomEvent (en-US)
  • Document
  • DocumentFragment
  • DocumentType (en-US)
  • DOMError (en-US)
  • DOMException (en-US)
  • DOMImplementation
  • DOMString
  • DOMTimeStamp (en-US)
  • DOMSettableTokenList
  • DOMStringList
  • DOMTokenList
  • Element
  • Event
  • EventTarget
  • HTMLCollection
  • MutationObserver
  • MutationRecord (en-US)
  • Node
  • NodeFilter (en-US)
  • NodeIterator (en-US)
  • NodeList
  • ParentNode Экспериментальная возможность
  • ProcessingInstruction (en-US)
  • Promise (en-US) Экспериментальная возможность
  • PromiseResolver (en-US) Экспериментальная возможность
  • Range
  • Text
  • TreeWalker (en-US)
  • URL
  • Window
  • Worker
  • XMLDocument Экспериментальная возможность

Устаревшие интерфейсы

Объектная модель документа находится в процессе значительного упрощения. Для того, чтобы достигнуть этого следующие интерфейсы, присутствующие на различных DOM level 3 или более ранних спецификациях были удалены. До сих пор неясно, будут ли некоторые из них возвращены, но на данный момент они должны быть рассмотрены как устаревшие, и их использования следует избегать:

  • CDATASection
  • DOMConfiguration
  • DOMErrorHandler
  • DOMImplementationList
  • DOMImplementationRegistry
  • DOMImplementationSource
  • DOMLocator
  • DOMObject
  • DOMUserData
  • Entity
  • EntityReference
  • NamedNodeMap
  • NameList
  • Notation
  • TypeInfo
  • UserDataHandler
Читайте также:  Оптимальный размер страницы html

HTML интерфейсы

Документ, содержащий HTML описывается с помощью HTMLDocument интерфейса. Обратите внимание, что HTML спецификация также расширяет Document интерфейс.

Объект HTMLDocument также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс Window , ассоциированный с ним Style (обычно CSS), история браузера, относящаяся к контексту, History , в конце концов, Selection в документе.

Интерфейсы HTML-элементов

  • HTMLAnchorElement
  • HTMLAppletElement
  • HTMLAreaElement
  • HTMLAudioElement
  • HTMLBaseElement
  • HTMLBodyElement
  • HTMLBRElement
  • HTMLButtonElement
  • HTMLCanvasElement
  • HTMLDataElement
  • HTMLDataListElement (en-US)
  • HTMLDirectoryElement
  • HTMLDivElement
  • HTMLDListElement (en-US)
  • HTMLElement
  • HTMLEmbedElement (en-US)
  • HTMLFieldSetElement (en-US)
  • HTMLFontElement (en-US)
  • HTMLFormElement
  • HTMLFrameElement
  • HTMLFrameSetElement (en-US)
  • HTMLHeadElement
  • HTMLHeadingElement
  • HTMLHtmlElement (en-US)
  • HTMLHRElement (en-US)
  • HTMLIFrameElement (en-US)
  • HTMLImageElement
  • HTMLInputElement
  • HTMLKeygenElement
  • HTMLLabelElement (en-US)
  • HTMLLegendElement (en-US)
  • HTMLLIElement (en-US)
  • HTMLLinkElement
  • HTMLMapElement (en-US)
  • HTMLMediaElement
  • HTMLMenuElement (en-US)
  • HTMLMetaElement (en-US)
  • HTMLMeterElement (en-US)
  • HTMLModElement (en-US)
  • HTMLObjectElement (en-US)
  • HTMLOListElement (en-US)
  • HTMLOptGroupElement (en-US)
  • HTMLOptionElement (en-US)
  • HTMLOutputElement (en-US)
  • HTMLParagraphElement (en-US)
  • HTMLParamElement (en-US)
  • HTMLPreElement (en-US)
  • HTMLProgressElement (en-US)
  • HTMLQuoteElement (en-US)
  • HTMLScriptElement
  • HTMLSelectElement
  • HTMLSourceElement (en-US)
  • HTMLSpanElement (en-US)
  • HTMLStyleElement (en-US)
  • HTMLTableElement
  • HTMLTableCaptionElement (en-US)
  • HTMLTableCellElement
  • HTMLTableDataCellElement (en-US)
  • HTMLTableHeaderCellElement (en-US)
  • HTMLTableColElement (en-US)
  • HTMLTableRowElement (en-US)
  • HTMLTableSectionElement (en-US)
  • HTMLTextAreaElement (en-US)
  • HTMLTimeElement
  • HTMLTitleElement (en-US)
  • HTMLTrackElement
  • HTMLUListElement (en-US)
  • HTMLUnknownElement
  • HTMLVideoElement

Другие интерфейсы

  • CanvasRenderingContext2D
  • CanvasGradient
  • CanvasPattern
  • TextMetrics (en-US)
  • ImageData
  • CanvasPixelArray (en-US)
  • NotifyAudioAvailableEvent (en-US)
  • HTMLAllCollection
  • HTMLFormControlsCollection (en-US)
  • HTMLOptionsCollection (en-US)
  • HTMLPropertiesCollection
  • DOMStringMap
  • RadioNodeList (en-US)
  • MediaError

Устаревшие HTML интерфейсы

SVG интерфейсы

Интерфейсы SVG элементов

  • SVGAElement
  • SVGAltGlyphElement
  • SVGAltGlyphDefElement
  • SVGAltGlyphItemElement
  • SVGAnimationElement (en-US)
  • SVGAnimateElement (en-US)
  • SVGAnimateColorElement (en-US)
  • SVGAnimateMotionElement (en-US)
  • SVGAnimateTransformElement (en-US)
  • SVGCircleElement (en-US)
  • SVGClipPathElement (en-US)
  • SVGColorProfileElement
  • SVGComponentTransferFunctionElement (en-US)
  • SVGCursorElement (en-US)
  • SVGDefsElement (en-US)
  • SVGDescElement (en-US)
  • SVGElement (en-US)
  • SVGEllipseElement (en-US)
  • SVGFEBlendElement (en-US)
  • SVGFEColorMatrixElement (en-US)
  • SVGFEComponentTransferElement (en-US)
  • SVGFECompositeElement (en-US)
  • SVGFEConvolveMatrixElement (en-US)
  • SVGFEDiffuseLightingElement (en-US)
  • SVGFEDisplacementMapElement (en-US)
  • SVGFEDistantLightElement (en-US)
  • SVGFEFloodElement (en-US)
  • SVGFEGaussianBlurElement (en-US)
  • SVGFEImageElement (en-US)
  • SVGFEMergeElement (en-US)
  • SVGFEMergeNodeElement (en-US)
  • SVGFEMorphologyElement (en-US)
  • SVGFEOffsetElement (en-US)
  • SVGFEPointLightElement (en-US)
  • SVGFESpecularLightingElement (en-US)
  • SVGFESpotLightElement (en-US)
  • SVGFETileElement (en-US)
  • SVGFETurbulenceElement (en-US)
  • SVGFEFuncRElement (en-US)
  • SVGFEFuncGElement (en-US)
  • SVGFEFuncBElement (en-US)
  • SVGFEFuncAElement (en-US)
  • SVGFilterElement (en-US)
  • SVGFilterPrimitiveStandardAttributes
  • SVGFontElement (en-US)
  • SVGFontFaceElement (en-US)
  • SVGFontFaceFormatElement (en-US)
  • SVGFontFaceNameElement (en-US)
  • SVGFontFaceSrcElement (en-US)
  • SVGFontFaceUriElement (en-US)
  • SVGForeignObjectElement (en-US)
  • SVGGElement (en-US)
  • SVGGlyphElement (en-US)
  • SVGGlyphRefElement (en-US)
  • SVGGradientElement (en-US)
  • SVGHKernElement (en-US)
  • SVGImageElement (en-US)
  • SVGLinearGradientElement (en-US)
  • SVGLineElement (en-US)
  • SVGMarkerElement (en-US)
  • SVGMaskElement (en-US)
  • SVGMetadataElement (en-US)
  • SVGMissingGlyphElement (en-US)
  • SVGMPathElement (en-US)
  • SVGPathElement (en-US)
  • SVGPatternElement (en-US)
  • SVGPolylineElement (en-US)
  • SVGPolygonElement (en-US)
  • SVGRadialGradientElement (en-US)
  • SVGRectElement (en-US)
  • SVGScriptElement (en-US)
  • SVGSetElement (en-US)
  • SVGStopElement (en-US)
  • SVGStyleElement (en-US)
  • SVGSVGElement (en-US)
  • SVGSwitchElement (en-US)
  • SVGSymbolElement (en-US)
  • SVGTextElement
  • SVGTextPathElement (en-US)
  • SVGTitleElement (en-US)
  • SVGTRefElement (en-US)
  • SVGTSpanElement (en-US)
  • SVGUseElement (en-US)
  • SVGViewElement (en-US)
  • SVGVKernElement (en-US)
Читайте также:  Вставить переменные в css

Интерфейсы SVG данных

DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.

Примечание: Начиная с Gecko 5.0, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: SVGLengthList (en-US), SVGNumberList (en-US), SVGPathSegList и SVGPointList (en-US).

Статический тип

Анимированный тип

  • SVGAnimatedAngle (en-US)
  • SVGAnimatedBoolean (en-US)
  • SVGAnimatedEnumeration (en-US)
  • SVGAnimatedInteger (en-US)
  • SVGAnimatedLength (en-US)
  • SVGAnimatedLengthList (en-US)
  • SVGAnimatedNumber (en-US)
  • SVGAnimatedNumberList (en-US)
  • SVGAnimatedPreserveAspectRatio (en-US)
  • SVGAnimatedRect (en-US)
  • SVGAnimatedString (en-US)
  • SVGAnimatedTransformList (en-US)

Относящиеся к SMIL

Другие SVG интерфейсы

  • SVGAnimatedPathData
  • SVGAnimatedPoints (en-US)
  • SVGColorProfileRule
  • SVGCSSRule
  • SVGExternalResourcesRequired
  • SVGFitToViewBox
  • SVGLangSpace
  • SVGLocatable
  • SVGRenderingIntent (en-US)
  • SVGStylable (en-US)
  • SVGTests
  • SVGTextContentElement
  • SVGTextPositioningElement (en-US)
  • SVGTransformable
  • SVGUnitTypes (en-US)
  • SVGURIReference (en-US)
  • SVGViewSpec
  • SVGZoomAndPan

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 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.

Источник

XML DOM Tutorial

The DOM defines a standard for accessing and manipulating documents:

«The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.»

The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree-structure.

The XML DOM defines a standard way for accessing and manipulating XML documents. It presents an XML document as a tree-structure.

Understanding the DOM is a must for anyone working with HTML or XML.

The HTML DOM

All HTML elements can be accessed through the HTML DOM.

This example changes the value of an HTML element with >

Example

This example changes the value of the first element in an HTML document:

Example

This is a Heading

This is a Heading

Note: Even if the HTML document contains only ONE element you still have to specify the array index [0], because the getElementsByTagName() method always returns an array.

You can learn a lot more about the HTML DOM in our JavaScript tutorial.

The XML DOM

All XML elements can be accessed through the XML DOM.

  • A standard object model for XML
  • A standard programming interface for XML
  • Platform- and language-independent
  • A W3C standard

In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.

Get the Value of an XML Element

This code retrieves the text value of the first element in an XML document:

Example

Loading an XML File

The XML file used in the examples below is books.xml.

This example reads «books.xml» into xmlDoc and retrieves the text value of the first element in books.xml:

Example

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() if (this.readyState == 4 && this.status == 200) myFunction(this);
>
>;
xhttp.open(«GET», «books.xml», true);
xhttp.send();

function myFunction(xml) var xmlDoc = xml.responseXML;
document.getElementById(«demo»).innerHTML =
xmlDoc.getElementsByTagName(«title»)[0].childNodes[0].nodeValue;
>

Example Explained

  • xmlDoc — the XML DOM object created by the parser.
  • getElementsByTagName(«title»)[0] — get the first element
  • childNodes[0] — the first child of the element (the text node)
  • nodeValue — the value of the node (the text itself)

Loading an XML String

This example loads a text string into an XML DOM object, and extracts the info from it with JavaScript:

Example

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,»text/xml»);

document.getElementById(«demo»).innerHTML =
xmlDoc.getElementsByTagName(«title»)[0].childNodes[0].nodeValue;

Programming Interface

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. In this tutorial we use JavaScript.

The programming interface to the DOM is defined by a set standard properties and methods.

Properties are often referred to as something that is (i.e. nodename is «book»).

Methods are often referred to as something that is done (i.e. delete «book»).

XML DOM Properties

These are some typical DOM properties:

  • x.nodeName — the name of x
  • x.nodeValue — the value of x
  • x.parentNode — the parent node of x
  • x.childNodes — the child nodes of x
  • x.attributes — the attributes nodes of x

Note: In the list above, x is a node object.

XML DOM Methods

  • x.getElementsByTagName(name) — get all elements with a specified tag name
  • x.appendChild(node) — insert a child node to x
  • x.removeChild(node) — remove a child node from x

Note: In the list above, x is a node object.

Источник

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