Cwicz2_JavaScript_DOM

Transkrypt

Ćwiczenie laboratoryjne
„Obiektowy model dokumentu (DOM, Document Object Model)”
Tematy ćwiczenia
−
Sterowanie wyświetleniem elementów pliku HTML (XHTML) przez obiekty i interfejsy modelu DOM
Wyniki opracowania zadań pokazywać za pomocą obydwóch przeglądarek:
• Firefox Mozilla,
• Internet Explorer.
W przypadku stosowania Firefox Mozilla używać konsoli błędów (Narzędzia/Konsola
błędów).
Korzystając z Notatnika opracowywać:
plik HTML (XHTML),
zewnętrzny plik JS zawierający program w języku JavaScript,
zewnętrzny plik CSS.
Plik HTML opracować na bazie pliku z bajką Ignacego Krasickiego. Plik wybrać według swojego numeru na liście grupy.
a) Węzeł i potomkowie
Zadanie
Opracować aplikacje, która pokazuje nagłówek i tekst baśni Ignacego Krasickiego
(według numeru swojego wariantu).
Wiersze baśni opisać jako elementy listy (elementy "li" listy "ul") bez oznaczeń linijek
(styl "list-style-type : none;").
Dodać css - plik, aby tekst baśni wyglądał ładnie.
Do znacznika "ul" w tekście HTML dodać atrybut-identyfikator "id="lista"".
Dodać do formularza przycisk "Węzły”.
Dodać instrukcje, aby po naciśnięciu przycisku „Węzły” wyświetlić dane na wszystkie
węzły - potomkowie węzła "ul".
Fragment programu, w którym są wyświetlane węzły - potomkowie umieścić w funkcji
"wezly".
Wywołanie funkcji "wezly" powiązać w funkcji "zdarz" z naciśnięciem przycisku „Węzły”, a wywołanie funkcji "zdarz" powiązać ze zdarzeniem "onload" okna.
Opracowanie zadań
<skrypt>
<pliki JS, CSS>
Testowanie
<zrzut z przeglądarki>
b) Przesuwanie wierszy
Zadanie
Wprowadzić do formularza przycisk „Następny”. Zmodyfikować aplikację tak, aby pokazywać tylko jeden wiersz bajki. Po naciśnięciu przycisku „Następny” musi być pokazywany następny wiersz bajki. Realizować pokaz cykliczny.
Opracowanie zadań
<skrypt>
<pliki JS, CSS>
Testowanie
c) Animacja
Zadanie
Dodać do formularza przycisk "Animacja”.
Zmodyfikować aplikację, żeby po naciśnięciu przycisku „Animacja” aplikacja pokazywała trzy wierszy bajki, które będą przesuwać się do góry w tempie jeden wiersz na trzy
sekundy.
Opracowanie zadań
<skrypt>
<pliki JS, CSS>
Testowanie
Pokazać prowadzącemu wyniki pracy.
Sprawozdanie
Na każdym zajęciu laboratoryjnym sporządza się za pomocą edytora Word sprawozdanie na bazie materiałów ćwiczenia.
Bazowa zawartość sprawozdania musi być przygotowana w domu przed ćwiczeniem
(sprawozdanie do ćwiczenia pierwszego jest przygotowywane w czasie ćwiczenia). W czasie ćwiczenia do sprawozdania są dodawane wyniki testowania.
Treść sprawozdania:
strona tytułowa,
spis treści sporządzony za pomocą Word'a,
dla każdego punktu rozdziały "Zadanie ", "Opracowanie zadania" (rozdział ze skryptem i komentarzami), "Testowanie" (rozdział z opisem danych wejściowych i wynikami testowania, w tym zrzuty okna przeglądarki).
Wzorzec strony tytułowej znajduje się w pliku
Strona_tytulowa_stac_Interpr_jezyki_progr_PWSBAiTK.doc.
Nazwa pliku ze sprawozdaniem musi zawierać skrót
"InterprJP_52_", numer ćwiczenia i nazwisko studenta (bez polskich liter, żeby można było archiwizować).
Pliki ze sprawozdaniem są przekazywane do archiwum grupy.
Wskazówki
Węzeł i potomkowie
Informację o węzłach - potomkach można wydostać następująco:
var obLista=document.getElementById("lista");
var ilo=obLista.childNodes.length;
var s=""+ilo;
for (var i=0;i<ilo;i++)
{
var ob=obLista.childNodes[i];
s+="\n"+ob.nodeName+": ["+ob.nodeValue+"] ("+ob.nodeType+") ";
if (ob.nodeName=="LI")
{
s+=ob.firstChild.nodeValue;
}
}
window.alert(s);
Jeśli ten fragment umieścić w funkcji "wezly", to wywołanie funkcji można powiązać z
naciśnięciem przycisku „Węzły” następująco:
klaw1=document.getElementById("butt1"); /*butt1 - identyfikator
przycisku */
klaw1.onclick=wezly; /*wezly - nazwa funkcji*/
Aby ten fragment mógł być wykonany po załadowaniu okna, należy zdefiniować funkcję "zdarz", a wywołanie tej funkcji powiązać ze zdarzeniem "onload" okna:
function zdarz()
{
klaw1=document.getElementById("butt1") //butt1 - identyfikator
przycisku
klaw1.onclick=wezly; //wezly - nazwa funkcji
// ... tutaj dodawać inne przyciski
}
window.onload=zdarz;
Przesuwanie wierszy
Cykliczne przesuwanie można realizować za pomocą metod "removeChild" i "appendChild" interfejsu "NodeList".
Wymagana jest metoda klonowania "cloneNode" interfejsu "Node":
var obListaN=document.getElementById("lista");
var iloN=obListaN.childNodes.length;
var iGran=0; //indeks graniczny
var i1=0;
while (i1<iloN)
{
var obN=obListaN.childNodes[i1];
if (obN.nodeName=="LI")
{
var newLI=obN.cloneNode(true);
obListaN.appendChild(newLI);
obListaN.removeChild(obN);
obN=obListaN.childNodes[i1];
if (obN.nodeName=="#text")
{
var newT=obN.cloneNode(true);
obListaN.appendChild(newT);
obListaN.removeChild(obN);
}
iGran=i1+1;
break; //cykl i1
}
i1++;
}
Część tekstu można ukryć stosując właściwość "style.visibility" elementów HTML:
obListaN=document.getElementById("lista");
iloN=obListaN.childNodes.length;
i1=0;
while (i1<iloN)
{
var ob2=obListaN.childNodes[i1];
if (ob2.nodeName=="LI")
{
if (i1<iGran) ob2.style.visibility="visible"; /*iGran - granica widoczności elementów HTML*/
else ob2.style.visibility="hidden";
}
i1++;
}
Animacja
W celu "automatycznego" wywołania funkcji wyświetlającej zmiany w tekście należy
stosować funkcję czasową "setInterval":
setInterval(nastepny,3000); /*3000 - odstęp czasowy w milisekundach*/
Obiektowy model dokumentu (Document Object Model, DOM)
Model DOM (Document Object Model) porządkuje komponenty przeglądarki, które
operują tekstem pliku XML lub HTML.
Model DOM jest opisywany przez zbiór obiektów i interfejsów programowych.
Obiekty implementują główny interfejs Node oraz inne interfejsy.
Implementacje interfejsów DOM są realizowane w języku programowania samej
przeglądarki, a nie w języku JavaScript.
Obiekty modelu DOM tworzą drzewiastą strukturę.
Węzły drzewa DOM z reguły odpowiadają elementom pliku XML (element to fragment od znacznika otwierającego do znacznika zamykającego).
Liście drzewa to komentarze, fragmenty tekstu zwykłego (nie tekstu sterującego),
atrybuty itp.
Dla wygody operowania z elementami drzewa, liście są rozpatrywane, jako węzły,
które nie mają potomków.
Model DOM 1 nie uwzględnia specjalnych znaków HTML (ang. entities), np. "&".
Na najwyższym poziomie (w korzeniu drzewa) znajduje się węzeł „Document”.
Poziomy modelu DOM
Model DOM został wprowadzony przez grupę W3C w celu uporządkowania funkcjonalności różnych przeglądarek.
W standardach grupy W3C model DOM jest wprowadzany stopniowo.
Opis niestandardowych funkcjonalności przeglądarek jest nazywane poziomem 0.
Pierwszy opis standardowy ma nazwę poziomu 1, następny opis standardowy to poziom 2.
Mają miejsce pracy nad poziomem 3.
Poziom 1 modelu DOM zawiera standard „Document Object Model (DOM) Level 1
Specification (Second Edition), Version 1.0, W3C Working Draft 29 September, 2000”.
W tym standardzie model DOM jest podzielony na dwie części:
DOM Core – zbór bazowych interfejsów najniższego poziomu,
DOM HTML – zbiór dodatkowych interfejsów związanych z dokumentami HTML.
Model DOM Core jest skierowany na implementację języka XML, a DOM HTML - języka HTML.
Na poziomie 2 model DOM jest rozszerzony o nowe typy obiektów i interfejsów, które są włączone w standardy:
DOM Level 2 Core – zbór bazowych interfejsów rozszerzających obiekty i interfejsy
DOM Level 1 Core,
DOM Level 2 Events – obiekty i interfejsy operujące zdarzeniami,
DOM Level 2 HTML – obiekty i interfejsy operujące dokumentami HTML, XHTML i
XML na bazie obiektów i interfejsów DOM Level 2 Core,
DOM Level 2 Style – obiekty i interfejsy operujące arkuszami stylów,
DOM Level 2 Traversal And Range – obiekty i interfejsy operujące drzewem dokumentu,
DOM Level 2 Views – obiekty i interfejsy operujące widokami dokumentu.
Są też propozycje grupy W3C dotyczące poziomu 3, który obejmuje pełną obsługę
języka XML.
Na poziomie 3 model DOM jest rozszerzony o nowe typy obiektów i interfejsów, które
są objęte standardami:
DOM Level 3 Core – zbór bazowych obiektów i interfejsów rozszerzających interfejsy
DOM Level 2 Core do pełnej obsługi XML 1.0,
DOM Level 3 Load and Save – obiekty i interfejsy do zapisywania i ładowania obiektów DOM Level 2 Core,
DOM Level 3 Validation – obiekty i interfejsy do sprawdzania poprawności dokumentu XML po operacjach dodawania i niszczenia obiektów (elementów).
Model DOM poziomu 1
Interfejsy DOM a implementacje DOM
Należy rozróżniać interfejsy DOM opisywane w standardzie i implementacje DOM w
różnych językach programowania.
Szczegóły implementacji:
1. Atrybuty interfejsów modelu DOM powinny być przekształcone w pary metod "get()" i
"set()".
2. Aplikacje mają prawo stosować dodatkowe obiekty, metody i interfejsy.
3. Standard nie nawiązuje konstruktorów obiektów. Do kreacji można stosować metody
createElement() i analogiczne z interfejsu Document.
Atrybuty interfejsów modelu DOM mają typy, które są stosowane w języku IDL (Interface Definition Language):
void (to znaczy, że typ nie jest zdefiniowany),
typy liczbowe, np. unsigned int,
typ znakowy – typ DOMString jako ciąg znaków Unicode UTF-16 (standard
ISO/IEC-10646).
Typ DOMString dotyczy implementacji modelu DOM, a nie plików HTML, XHTML
lub XML, które mogą być napisane w kodzie ASCII lub innym.
Bazowy interfejs modelu – to interfejs Node.
Typy węzłów modelu DOM
Węzły drzewa DOM są obiektami implementującymi interfejs Node oraz inne interfejsy. W drzewie DOM są następujące typy węzłów:
Węzel
Document
DocumentType
DocumentFragment
Element
Attr
Text
CDataSection
Entity
EntityReference
ProcessingInstruction
Comment
Notation
Przeznaczenie
Korzeń drzewa
Element <!DOCTYPE ... >, który opisuje definicję typów zastosowanych w dokumencie (DTD, Document Type Definition)
Węzeł używany do przechowywania innych węzłów
Element XML (HTML)
Atrybut
Węzeł reprezentujący zwykły tekst
Element <![CDATA[...]]>, który opisuje tekst nie podlegający analizę ze strony przeglądarki HTML
Element <!ENTITY ... >,
który opisuje definicję skrótów zastępujących znaki (encji)
Skrót zastępujący znak (encji)
Instrukcje przetwarzania (w języku JavaScript)
Komentarz
Zapis o systemie znaków w definicję typów dokumentu (DTD)
Kolejność węzłów modelu DOM
Standard opisuje możliwe łańcuchy węzłów:
Document -->Element, ProcessingInstruction, Comment lub DocumentType;
DocumentFragment --> Element, ProcessingInstruction, Comment,
Text, CDATASection lub EntityReference;
DocumentType --> brak potomków;
EntityReference --> Element, ProcessingInstruction, Comment,
Text, CDATASection lub EntityReference;
Element --> Element Text, Comment, ProcessingInstruction, CDATASection lub EntityReference;
Attr --> Text lub EntityReference;
ProcessingInstruction --> brak potomków;
Comment --> brak potomków;
Text --> brak potomków;
CDATASection --> brak potomków;
Entity --> Element, ProcessingInstruction, Comment, Text, CDATASection lub EntityReference;
Notation --> brak potomków.
Model DOM Core
Wszystkie interfejsy modelu 1 DOM Core powinny być zaimplementowane w przeglądarce.
Interfejs Node
Interfejs Node jest interfejsem bazowym. Implementacja tego interfejsu jest węzłem
drzewa DOM.
Definicja interfejsu w języku IDL:
interface Node {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
//--------readonly attribute DOMString nodeName;
attribute DOMString nodeValue;
// raises(DOMException) on setting
// raises(DOMException) on retrieval
readonly attribute unsigned short nodeType;
readonly attribute NamedNodeMap attributes;
readonly attribute Node parentNode;
readonly attribute NodeList childNodes;
readonly attribute Node firstChild;
readonly attribute Node lastChild;
readonly attribute Node previousSibling;
readonly attribute Node nextSibling;
readonly attribute Document ownerDocument;
Node insertBefore(in Node newChild,in Node refChild)
raises(DOMException);
Node replaceChild(in Node newChild,in Node oldChild)
Node removeChild(in Node oldChild) raises(DOMException);
Node appendChild(in Node newChild) raises(DOMException);
boolean hasChildNodes();
Node cloneNode(in boolean deep) raises(DOMException);
};
Wartości pól nodeName, nodeValue, i attributes muszą pasować jeden do drugiego, tak jak jest przedstawione w tabeli:
Rodzaj węzła
Attr
CDATASection
nodeName
Nazwa atrybuta
#cdata-section
Comment
#comment
Document
#document
DocumentFragment #document-fragment
DocumentType
Nazwa typu dokumentu
Element
Nazwa znacznika
Entity
Nazwa właściwości
EntityReference Nazwa referencji do
właściwości
Notation
Nazwa zapisu o systemie znaków
ProcessingInMiejsce
struction
przeznaczenia
Text
#text
Pole (atrybut)
nodeValue
Wartość atrybuta
Zawartość
sekcji CDATA
Zawartość
komentarza
null
null
attributes
null
null
null
null
null
null
null
null
null
null
NamedNodeMap
null
null
null
null
Zawartość
(instrukcje)
Zawartość (tekst)
null
null
Wartość NamedNodeMap pola attributes zawiera atrybuty węzła w przypadku
węzła typu Element, a w innych przypadkach jest równa null. Innymi słowy pole attributes jest zapełnione tylko w węzłach typu Element.
Grupa atrybutów parentNode, childNodes, firstChild, lastChild,
previousSibling, nextSibling opisuje rodzica, potomków i braci (krewnych) węzła.
Metody appendChild, cloneNode, hasChildNodes, insertBefore, removeNode, replaceChild interfejsu Node umożliwiają strukturalne zmiany w drzewie
DOM
Interfejs NodeList
Interfejs NodeList jest używany do wygenerowania kolekcji węzłów drzewa DOM.
interface NodeList {
readonly attribute unsigned long length;
Node item(in unsigned long index);
};
Interfejs NamedNodeMap
Obiekt implementujący interfejs NamedNodeMap jest kolekcją węzłów. Dostęp do
węzłów w tej kolekcji ma miejsce według nazwy węzła.
interface NamedNodeMap {
Node getNamedItem(in DOMString name);
Node setNamedItem(in Node arg) raises(DOMException);
Node removeNamedItem(in DOMString name) raises(DOMException);
};
Interfejs CharacterData
Interfejs CharakterData służy do rozszerzenia interfejsu Node na operacji ze znakami.
interface CharacterData : Node {
attribute DOMString data;
// raises(DOMException) on retrieval
DOMString substringData(in unsigned long offset,
in unsigned long count) raises(DOMException);
void appendData(in DOMString arg) raises(DOMException);
void insertData(in unsigned long offset,in DOMString arg) raises
(DOMException);
void deleteData(in unsigned long offset,in unsigned long count)
void replaceData(in unsigned long offset,in unsigned long count,
in DOMString arg) raises(DOMException);
};
Interfejs Attr
Interfejs Attr służy do rozszerzenia interfejsu Node w celu prezentacji atrybutów
węzła.
interface Attr : Node {
readonly attribute DOMString name;
readonly attribute boolean specified;
// Modified in DOM Level 1:
attribute DOMString value;
};
Interfejs Element
Interfejs Element reprezentuje element dokumentu HTML lub XML.
interface Element : Node {
readonly attribute DOMString tagName;
DOMString getAttribute(in DOMString name);
void setAttribute(in DOMString name,in DOMString value) raises(DOMException);
void removeAttribute(in DOMString name)
Attr getAttributeNode(in DOMString name);
Attr setAttributeNode(in Attr newAttr)
Attr removeAttributeNode(in Attr oldAttr)
NodeList getElementsByTagName(in DOMString name);
void normalize();
};
Interfejs Text
Interfejs Text reprezentuje zawartość tekstową.
interface Text : CharacterData {
Text splitText(in unsigned long offset)
};
Metoda splitText dzieli tekst – zawartość obiektu na pozycji offset, pierwszą
część tekstu zostawia w obiekcie, a pozostała część umieszcza w nowym obiekcie też
typu Text.
Interfejs Comment
Interfejs Comment reprezentuje zawartość komentarza między znakami
„" dokumentu HTML lub XML.
interface Comment : CharacterData {
};
Interfejs DOMImplementation
Definicja interfejsu DOMImplementation w języku IDL:
interface DOMImplementation {
boolean hasFeature(in DOMString feature,
in DOMString version);
};
Metoda hasFeature interfejsu DOMImplementation testuje implementację DOM na
obecność właściwości. Nazwa właściwości w pierwszym argumencie musi mieć prefiks –
przestrzeń, np. „org.w3c.dom.smil”. Drugi argument dla poziomu 1 jest równy „1.0”.
Interfejs DocumentFragment
Definicja interfejsu DocumentFragment w języku IDL:
interface DocumentFragment : Node {
};
Interfejs DocumentFragment dziedziczy właściwości interfejsu Node. Obiekt implementujący ten interfejs występuje jako rodzic węzłów – potomków.
Interfejs Document
Definicja interfejsu Document w języku IDL:
interface Document : Node {
readonly attribute DocumentType doctype;
readonly attribute DOMImplementation implementation;
readonly attribute Element documentElement;
Element createElement(in DOMString tagName)
DocumentFragment createDocumentFragment();
Text createTextNode(in DOMString data);
Comment createComment(in DOMString data);
CDATASection createCDATASection(in DOMString data)
ProcessingInstruction createProcessingInstruction(in DOMString
target, in DOMString data) raises(DOMException);
Attr createAttribute(in DOMString name)
EntityReference createEntityReference(in DOMString name)
raises (DOMException);
NodeList getElementsByTagName(in DOMString tagname);
};
Obiekt implementujący interfejs Document reprezentuje zawartość dokumentu
HTML lub XML.
Metody interfejsu Document umożliwiają kreację obiektów – komponentów modelu
DOM.
Interfejs DOMException
Interfejs DOMException zawiera numer komunikatów o sytuacji wyjątkowej.
exception DOMException {
unsigned short code;
};
Część sytuacji wyjątkowych ma zarezerwowane numery:
const
const
const
const
const
const
const
const
const
const
unsigned
unsigned
unsigned
unsigned
unsigned
unsigned
unsigned
unsigned
unsigned
unsigned
short
short
short
short
short
short
short
short
short
short
INDEX_SIZE_ERR = 1;
DOMSTRING_SIZE_ERR = 2;
HIERARCHY_REQUEST_ERR = 3;
WRONG_DOCUMENT_ERR = 4;
INVALID_CHARACTER_ERR = 5;
NO_DATA_ALLOWED_ERR = 6;
NO_MODIFICATION_ALLOWED_ERR = 7;
NOT_FOUND_ERR = 8;
NOT_SUPPORTED_ERR = 9;
INUSE_ATTRIBUTE_ERR = 10;
Rozszerzające interfejsy modelu DOM
Rozszerzające interfejsy modelu DOM nie są potrzebne plikom HTML.
Interfejs CDATASection
Interfejs CDATASection reprezentuje znaczniki języka XML.
interface CDATASection : Text {
};
Interfejs DocumentType
Interfejs DocumentType reprezentuje główne cechy dokumentu XML zadeklarowane
w pliku DTD. Definicja interfejsu w języku IDL:
interface DocumentType : Node {
readonly attribute DOMString name;
readonly attribute NamedNodeMap entities;
readonly attribute NamedNodeMap notations;
};
Interfejs Notation
Interfejs Notation reprezentuje zapis o systemie znaków dokumentu XML zadeklarowany w pliku DTD.
interface Notation : Node {
readonly attribute DOMString publicId;
readonly attribute DOMString systemId;
};
Interfejs Entity
Interfejs Entity reprezentuje jednostki (encje) dokumentu XML.
interface Entity : Node {
readonly attribute DOMString publicId;
readonly attribute DOMString systemId;
readonly attribute DOMString notationName;
};
Atrybut notationName to zapis znakowy jednostki przed rozbiorem, atrybut publicId to identyfikator publiczny jednostki lub null, a atrybut systemId to identyfikator systemowy jednostki lub null.
Interfejs EntityReference
Interfejs EntityReference reprezentuje referencję do jednostki dokumentu XML.
interface EntityReference : Node {
};
Interfejs ProcessingInstruction
Interfejs ProcessingInstruction reprezentuje instrukcje przekształcenia dokumentu XML. Definicja interfejsu w języku IDL:
interface ProcessingInstruction : Node {
readonly attribute DOMString target;
};
Model DOM HTML
Model DOM HTML zawiera dodatkowe w porównaniu z modelem DOM Core interfejsy używane dla dokumentów HTML.
Interfejs HTMLCollection
Obiekt implementujący interfejs HTMLCollection jest listą węzłów. Dostęp do węzła na tej liście jest możliwy przez indeks lub przez identyfikator w atrybucie id oraz przez
nazwę w atrybucie name, jeśli węzeł nie został znaleziony przez atrybut id.
interface HTMLCollection {
Node namedItem(in DOMString name);
};
Interfejs HTMLDocument
Interfejs HTMLDocument dziedziczy od interfejsu Document.
Definicja interfejsu HTMLDocument w języku IDL:
interface HTMLDocument : Document {
attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
attribute HTMLElement body;
readonly attribute HTMLCollection images;
readonly attribute HTMLCollection applets;
readonly attribute HTMLCollection links;
readonly attribute HTMLCollection forms;
readonly attribute HTMLCollection anchors;
attribute DOMString cookie;
void open();
void close();
void write(in DOMString text);
void writeln(in DOMString text);
Element getElementById(in DOMString elementId);
NodeList getElementsByName(in DOMString elementName);
};
Interfejs HTMLElement
Interfejs HTMLElement dziedziczy od interfejsu Element.
Definicja interfejsu HTMLElement w języku IDL:
interface HTMLElement : Element {
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};
Interfejs HTMLHtmlElement
Interfejs HTMLHtmlElement dziedziczy od interfejsu HTMLElement.
Definicja interfejsu HTMLHtmlElement w języku IDL:
interface HTMLHtmlElement : HTMLElement {
attribute DOMString version;
};
Interfejs HTMLHeadElement
Interfejs HTMLHeadElement dziedziczy od interfejsu HTMLElement i reprezentuje
część HEAD dokumentu HTML.
Definicja interfejsu HTMLHeadElement w języku IDL:
interface HTMLHeadElement : HTMLElement {
attribute DOMString profile;
};
Interfejs HTMLLinkElement
Interfejs HTMLLinkElement dziedziczy od interfejsu HTMLElement i reprezentuje
element LINK dokumentu HTML.
Definicja interfejsu HTMLLinkElement w języku IDL:
interface HTMLLinkElement : HTMLElement {
attribute boolean disabled;
attribute DOMString charset;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString media;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString target;
attribute DOMString type;
};
Interfejs HTMLTitleElement
Interfejs HTMLTitleElement dziedziczy od interfejsu HTMLElement i reprezentuje
element TITLE dokumentu HTML.
Definicja interfejsu HTMLTitleElement w języku IDL:
interface HTMLTitleElement : HTMLElement {
attribute DOMString text;
};
Interfejs HTMLMetaElement
Interfejs HTMLMetaElement dziedziczy od interfejsu HTMLElement i reprezentuje
element META dokumentu HTML.
Definicja interfejsu HTMLMetaElement w języku IDL:
interface HTMLMetaElement : HTMLElement {
attribute DOMString content;
attribute DOMString httpEquiv;
attribute DOMString name;
attribute DOMString scheme;
};
Interfejs HTMLBaseElement
Interfejs HTMLBaseElement dziedziczy od interfejsu HTMLElement i reprezentuje
element URL dokumentu HTML.
Definicja interfejsu HTMLBaseElement w języku IDL:
interface HTMLBaseElement : HTMLElement {
};
Interfejs HTMLIsIndexElement
Interfejs HTMLIsIndexElement dziedziczy od interfejsu HTMLElement i reprezentuje element do wprowadzenia wiersza tekstu. Taki element jest co prawda opisany, ale
wycofany z użycia w HTML 4.0.
Definicja interfejsu HTMLIsIndexElement w języku IDL:
interface HTMLIsIndexElement : HTMLElement {
readonly attribute HTMLFormElement form;
attribute DOMString prompt;
};
Interfejs HTMLStyleElement
Interfejs HTMLStyleElement dziedziczy od interfejsu HTMLElement i reprezentuje
element STYLE dokumentu HTML.
Definicja interfejsu HTMLStyleElement w języku IDL:
interface HTMLStyleElement : HTMLElement {
attribute DOMString media;
};
Interfejs HTMLBodyElement
Interfejs HTMLBodyElement dziedziczy od interfejsu HTMLElement i reprezentuje
element BODY dokumentu HTML.
Definicja interfejsu HTMLBodyElement w języku IDL:
interface HTMLBodyElement : HTMLElement {
attribute DOMString aLink;
attribute DOMString background;
attribute DOMString bgColor;
attribute DOMString link;
attribute DOMString vLink;
};
Interfejs HTMLFormElement
Interfejs HTMLFormElement dziedziczy od interfejsu HTMLElement i reprezentuje
element FORM dokumentu HTML.
Definicja interfejsu HTMLFormElement w języku IDL:
interface HTMLFormElement : HTMLElement {
readonly attribute HTMLCollection elements;
readonly attribute long length;
attribute DOMString
attribute DOMString
attribute DOMString
attribute DOMString
attribute DOMString
attribute DOMString
void submit();
void reset();
};
name;
acceptCharset;
action;
enctype;
method;
target;
Interfejs HTMLStyleElement
Interfejs HTMLStyleElement dziedziczy od interfejsu HTMLElement i reprezentuje
element STYLE dokumentu HTML. Definicja interfejsu HTMLStyleElement w języku IDL:
interface HTMLFormElement : HTMLElement {
readonly attribute HTMLCollection elements;
attribute DOMString acceptCharset;
attribute DOMString action;
attribute DOMString enctype;
attribute DOMString method;
void submit();
void reset();
};
Interfejs HTMLSelectElement
Interfejs HTMLSelectElement dziedziczy od interfejsu HTMLElement i reprezentuje element SELECT dokumentu HTML.
Definicja interfejsu HTMLSelectElement w języku IDL:
interface HTMLSelectElement : HTMLElement {
readonly attribute DOMString type;
attribute long selectedIndex;
readonly attribute HTMLCollection options;
attribute boolean multiple;
attribute long size;
attribute long tabIndex;
void add(in HTMLElement element,
in HTMLElement before)
void remove(in long index);
void blur();
void focus();
};
Interfejs HTMLOptGroupElement
Interfejs HTMLOptGroupElement dziedziczy od interfejsu HTMLElement i reprezentuje element OPTGROUP dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLOptGroupElement : HTMLElement {
attribute DOMString label;
};
Interfejs HTMLOptionElement
Interfejs HTMLOptionElement dziedziczy od interfejsu HTMLElement i reprezentuje element OPTION dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLOptionElement : HTMLElement {
attribute boolean defaultSelected;
readonly attribute DOMString text;
readonly attribute long index;
attribute DOMString label;
attribute boolean selected;
};
Interfejs HTMLInputElement
Interfejs HTMLInputElement dziedziczy od interfejsu HTMLElement i reprezentuje
element INPUT dokumentu HTML.
Definicja interfejsu HTMLInputElement w języku IDL:
interface HTMLInputElement : HTMLElement {
attribute DOMString defaultValue;
attribute boolean defaultChecked;
attribute DOMString accept;
attribute DOMString accessKey;
attribute DOMString align;
attribute DOMString alt;
attribute boolean checked;
attribute long maxLength;
attribute boolean readonly;
attribute DOMString size;
attribute DOMString src;
attribute DOMString useMap;
void blur();
void focus();
void select();
void click();
};
Interfejs HTMLTextareaElement
Interfejs HTMLTextAreaElement dziedziczy od interfejsu HTMLElement i reprezentuje element TEXTAREA dokumentu HTML.
Definicja interfejsu HTMLTextAreaElement w języku IDL:
interface HTMLTextAreaElement : HTMLElement {
attribute DOMString defaultValue;
attribute long cols;
attribute boolean readonly;
attribute long rows;
void blur();
void focus();
void select();
};
Interfejs HTMLButtonElement
Interfejs HTMLButtonElement dziedziczy od interfejsu HTMLElement i reprezentuje element BUTTON dokumentu HTML.
Definicja interfejsu HTMLButtonElement w języku IDL:
interface HTMLButtonElement : HTMLElement {
};
Interfejs HTMLLabelElement
Interfejs HTMLLabelElement dziedziczy od interfejsu HTMLElement i reprezentuje
element LABEL dokumentu HTML.
Definicja interfejsu HTMLLabelElement w języku IDL:
interface HTMLLabelElement : HTMLElement {
attribute DOMString htmlFor;
};
Interfejs HTMLFieldSetElement
Interfejs HTMLFieldSetElement dziedziczy od interfejsu HTMLElement i reprezentuje element FIELDSET dokumentu HTML.
Definicja interfejsu HTMLFieldSetElement w języku IDL:
interface HTMLFieldSetElement : HTMLElement {
};
Interfejs HTMLLegendElement
Interfejs HTMLLegendElement dziedziczy od interfejsu HTMLElement i reprezentuje element LEGEND dokumentu HTML.
Definicja interfejsu HTMLLegendElement w języku IDL:
interface HTMLLegendElement : HTMLElement {
};
Interfejs HTMLUListElement
Interfejs HTMLUListElement dziedziczy od interfejsu HTMLElement i reprezentuje
element UL dokumentu HTML.
Definicja interfejsu HTMLUListElement w języku IDL:
interface HTMLUListElement : HTMLElement {
attribute boolean compact;
};
Interfejs HTMLOListElement
Interfejs HTMLOListElement dziedziczy od interfejsu HTMLElement i reprezentuje
element OL dokumentu HTML.
Definicja interfejsu HTMLOListElement w języku IDL:
interface HTMLOListElement : HTMLElement {
attribute long start;
};
Interfejs HTMLDListElement
Interfejs HTMLDListElement dziedziczy od interfejsu HTMLElement i reprezentuje
element DL dokumentu HTML.
Definicja interfejsu HTMLDListElement w języku IDL:
interface HTMLDListElement : HTMLElement {
};
Interfejs HTMLDirectoryElement
Interfejs HTMLDirectoryElement dziedziczy od interfejsu HTMLElement i reprezentuje element DIR dokumentu HTML.
Definicja interfejsu HTMLDirectoryElement w języku IDL:
interface HTMLDirectoryElement : HTMLElement {
};
Interfejs HTMLMenuElement
Interfejs HTMLMenuElement dziedziczy od interfejsu HTMLElement i reprezentuje
element Menu dokumentu HTML. Definicja interfejsu HTMLMenuElement w języku IDL:
interface HTMLMenuElement : HTMLElement {
};
Interfejs HTMLLIElement
Interfejs HTMLLIElement dziedziczy od interfejsu HTMLElement i reprezentuje element LI dokumentu HTML. Definicja interfejsu HTMLLIElement w języku IDL:
interface HTMLLIElement : HTMLElement {
attribute long value;
};
Interfejs HTMLDivElement
Interfejs HTMLDivElement dziedziczy od interfejsu HTMLElement i reprezentuje
element DIV dokumentu HTML.
Definicja interfejsu HTMLDivElement w języku IDL:
interface HTMLDivElement : HTMLElement {
};
Interfejs HTMLParagrafElement
Interfejs HTMLParagrafElement dziedziczy od interfejsu HTMLElement i reprezentuje element P dokumentu HTML.
Definicja interfejsu HTMLParagrafElement w języku IDL:
interface HTMLParagraphElement : HTMLElement {
};
Interfejs HTMLHeadingElement
Interfejs HTMLHeadingElement dziedziczy od interfejsu HTMLElement i reprezentuje elementy H1 - H6 dokumentu HTML.
Definicja interfejsu HTMLHeadingElement w języku IDL:
interface HTMLHeadingElement : HTMLElement {
};
Interfejs HTMLQuoteElement
Interfejs HTMLQuoteElement dziedziczy od interfejsu HTMLElement i reprezentuje
elementy Q, BLOCKQUOTE dokumentu HTML.
Definicja interfejsu HTMLQuoteElement w języku IDL:
interface HTMLQuoteElement : HTMLElement {
attribute DOMString cite;
};
Interfejs HTMLPreElement
Interfejs HTMLPreElement dziedziczy od interfejsu HTMLElement i reprezentuje
element PRE dokumentu HTML.
Definicja interfejsu HTMLPreElement w języku IDL:
interface HTMLPreElement : HTMLElement {
attribute long width;
};
Interfejs HTMLBaseFontElement
Interfejs HTMLBaseFontElement dziedziczy od interfejsu HTMLElement i reprezentuje element BASEFONT dokumentu HTML.
Definicja interfejsu HTMLBaseFontElement w języku IDL:
interface HTMLBaseFontElement : HTMLElement {
attribute DOMString color;
attribute DOMString face;
};
Interfejs HTMLFontElement
Interfejs HTMLFontElement dziedziczy od interfejsu HTMLElement i reprezentuje
element FONT dokumentu HTML.
Definicja interfejsu HTMLFontElement w języku IDL:
interface HTMLFontElement : HTMLElement {
attribute DOMString color;
attribute DOMString face;
};
Interfejs HTMLBRElement
Interfejs HTMLBRElement dziedziczy od interfejsu HTMLElement i reprezentuje element BR dokumentu HTML.
Definicja interfejsu HTMLBRElement w języku IDL:
interface HTMLBRElement : HTMLElement {
attribute DOMString clear;
};
Interfejs HTMLHRElement
Interfejs HTMLHRElement dziedziczy od interfejsu HTMLElement i reprezentuje element HR dokumentu HTML.
Definicja interfejsu HTMLHRElement w języku IDL:
interface HTMLHRElement : HTMLElement {
attribute boolean noShade;
attribute DOMString width;
};
Interfejs HTMLModElement
Interfejs HTMLModElement dziedziczy od interfejsu HTMLElement i reprezentuje
elementy INS, DEL dokumentu HTML.
Definicja interfejsu HTMLModElement w języku IDL:
interface HTMLModElement : HTMLElement {
attribute DOMString cite;
attribute DOMString dateTime;
};
Interfejs HTMLAnchorElement
Interfejs HTMLAnchorElement dziedziczy od interfejsu HTMLElement i reprezentuje element A dokumentu HTML.
Definicja interfejsu HTMLAnchorElement w języku IDL:
interface HTMLAnchorElement : HTMLElement {
attribute DOMString coords;
attribute DOMString hreflang;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
void blur();
void focus();
};
Interfejs HTMLImageElement
Interfejs HTMLImageElement dziedziczy od interfejsu HTMLElement i reprezentuje
element IMG dokumentu HTML.
Definicja interfejsu HTMLImageElement w języku IDL:
interface HTMLImageElement : HTMLElement {
attribute DOMString lowSrc;
attribute DOMString border;
attribute DOMString height;
attribute DOMString hspace;
attribute boolean isMap;
attribute DOMString longDesc;
attribute DOMString vspace;
};
Interfejs HTMLObjectElement
Interfejs HTMLobjectElement dziedziczy od interfejsu HTMLElement i reprezentuje element OBJECT dokumentu HTML.
Definicja interfejsu HTMLObjectElement w języku IDL:
interface HTMLObjectElement : HTMLElement {
attribute DOMString code;
attribute DOMString archive;
attribute DOMString codeBase;
attribute DOMString codeType;
attribute boolean declare;
attribute DOMString standby;
};
Interfejs HTMLParamElement
Interfejs HTMLParamElement dziedziczy od interfejsu HTMLElement i reprezentuje
element PARAM dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLParamElement : HTMLElement {
attribute DOMString valueType;
};
Interfejs HTMLAppletElement
Interfejs HTMLAppletElement dziedziczy od interfejsu HTMLElement i reprezentuje element APPLET dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLAppletElement : HTMLElement {
attribute DOMString archive;
attribute DOMString code;
attribute DOMString codeBase;
attribute DOMString object;
};
Interfejs HTMLMapElement
Interfejs HTMLMapElement dziedziczy od interfejsu HTMLElement i reprezentuje
element MAP dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLMapElement : HTMLElement {
readonly attribute HTMLCollection areas;
};
Interfejs HTMLAreaElement
Interfejs HTMLAreaElement dziedziczy od interfejsu HTMLElement i reprezentuje
element AREA dokumentu HTML.
Definicja interfejsu HTMLAreaElement w języku IDL:
interface HTMLAreaElement : HTMLElement {
attribute DOMString coords;
attribute boolean noHref;
attribute DOMString shape;
};
Interfejs HTMLScriptElement
Interfejs HTMLScriptElement dziedziczy od interfejsu HTMLElement i reprezentuje element SCRIPT dokumentu HTML.
Definicja interfejsu HTMLScriptElement w języku IDL:
interface HTMLScriptElement : HTMLElement {
attribute DOMString htmlFor;
attribute DOMString event;
attribute boolean defer;
};
Interfejs HTMLTableElement
Interfejs HTMLTableElement dziedziczy od interfejsu HTMLElement i reprezentuje
element TABLE dokumentu HTML.
Definicja interfejsu HTMLTableElement w języku IDL:
interface HTMLTableElement : HTMLElement {
attribute HTMLTableCaptionElement caption;
attribute HTMLTableSectionElement tHead;
attribute HTMLTableSectionElement tFoot;
readonly attribute HTMLCollection rows;
readonly attribute HTMLCollection tBodies;
attribute DOMString cellPadding;
attribute DOMString cellSpacing;
attribute DOMString frame;
attribute DOMString rules;
attribute DOMString summary;
HTMLElement createTHead();
void deleteTHead();
HTMLElement createTFoot();
void deleteTFoot();
HTMLElement createCaption();
void deleteCaption();
HTMLElement insertRow(in long index) raises(DOMException);
void deleteRow(in long index) raises(DOMException);
};
Interfejs HTMLTableCaptionElement
Interfejs HTMLTableCaptionElement dziedziczy od interfejsu HTMLElement i reprezentuje element CAPTION dokumentu HTML.
Definicja interfejsu HTMLTableCaptionElement w języku IDL:
interface HTMLTableCaptionElement : HTMLElement {
};
Interfejs HTMLTableColElement
Interfejs HTMLTableColElement dziedziczy od interfejsu HTMLElement i reprezentuje elementy COL, COLGROUP dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLTableColElement : HTMLElement {
attribute DOMString ch;
attribute DOMString chOff;
attribute long span;
attribute DOMString vAlign;
};
Interfejs HTMLTableSectionElement
Interfejs HTMLTableSectionElement dziedziczy od interfejsu HTMLElement i reprezentuje elementy THEAD, TFOOT, TBODY dokumentu HTML.
Definicja interfejsu HTMLTableSectionElement w języku IDL:
interface HTMLTableSectionElement : HTMLElement {
attribute DOMString align; attribute DOMString ch;
attribute DOMString chOff; attribute DOMString vAlign;
readonly attribute HTMLCollection rows;
HTMLElement insertRow(in long index) raises(DOMException);
void deleteRow(in long index) raises(DOMException);
};
Interfejs HTMLTableRowElement
Interfejs HTMLTableRowElement dziedziczy od interfejsu HTMLElement i reprezentuje elementy TR dokumentu HTML. Definicja interfejsu w języku IDL:
interface HTMLTableRowElement : HTMLElement {
readonly attribute long rowIndex;
readonly attribute long sectionRowIndex;
readonly attribute HTMLCollection cells;
HTMLElement insertCell(in long index)
void deleteCell(in long index)
};
Interfejs HTMLTableCellElement
Interfejs HTMLTableCellElement dziedziczy od interfejsu HTMLElement i reprezentuje elementy TH, TD dokumentu HTML.
Definicja interfejsu HTMLTableCellElement w języku IDL:
interface HTMLTableCellElement : HTMLElement {
readonly attribute long cellIndex;
attribute DOMString abbr;
attribute DOMString axis;
attribute long colSpan;
attribute DOMString headers;
attribute boolean noWrap;
attribute long rowSpan;
attribute DOMString scope;
};
Interfejs HTMLFrameSetElement
Interfejs HTMLFrameSetElement dziedziczy od interfejsu HTMLElement i reprezentuje element FRAMESET dokumentu HTML.
Definicja interfejsu HTMLFrameSetElement w języku IDL:
interface HTMLFrameSetElement : HTMLElement {
attribute DOMString cols;
attribute DOMString rows;
};
Interfejs HTMLFrameElement
Interfejs HTMLFrameElement dziedziczy od interfejsu HTMLElement i reprezentuje
element FRAME dokumentu HTML.
Definicja interfejsu HTMLFrameElement w języku IDL:
interface HTMLFrameElement : HTMLElement {
attribute DOMString frameBorder;
attribute DOMString marginHeight;
attribute DOMString marginWidth;
attribute boolean noResize;
attribute DOMString scrolling;
};
Interfejs HTMLIFrameElement
Interfejs HTMLIFrameElement dziedziczy od interfejsu HTMLElement i reprezentuje element IFRAME dokumentu HTML.
Definicja interfejsu HTMLIFrameElement w języku IDL:
interface HTMLIFrameElement : HTMLElement {
attribute DOMString frameBorder;
attribute DOMString marginHeight;
attribute DOMString marginWidth;
attribute DOMString scrolling;
};

Cwicz2_JavaScript_DOM

Transkrypt

Podobne dokumenty

Instrukcja obslugi interfejs Subaru USB

Instrukcja interfejs Fiat ECU Scan

Specjalista UX - I

System operacyjny (ang. Operating System, skrót OS

Instrukcja obslugi Multi Interfejs 15w1 USB

Instrukcja BMW USB