Elements

Html Elements

Class name: "___Element" (eg. ImageElement)
  • Anchor
  • Area
  • BR
  • Base
  • Body
  • Button
  • Canvas
  • Content
  • DList
  • DataList
  • Details
  • Dialog
  • Div
  • Embed
  • FieldSet
  • Form
  • HR
  • Head
  • Heading
  • HtmlHtml
  • IFrame
  • Image
  • Input
  • Keygen
  • LI
  • Label
  • Legend
  • Link
  • Map
  • Media
  • Menu
  • Meta
  • Meter
  • Mod
  • OList
  • Object
  • OptGroup
  • Option
  • Output
  • Paragraph
  • Param
  • Pre
  • Progress
  • Quote
  • Script
  • Select
  • Shadow
  • Source
  • Span
  • Style
  • TableCaption
  • TableCell
  • TableCol
  • Table
  • TableRow
  • TableSection
  • Template
  • TextArea
  • Title
  • Track
  • UList
  • Unknown

Input Elements

Class name: "___InputElement" (eg. TextInputElement)
  • Checkbox
  • FileUpload
  • Hidden
  • Button
  • ImageButton
  • RadioButton
  • ResetButton
  • SubmitButton
  • Date
  • LocalDateTime
  • Month
  • Number
  • Range
  • Time
  • Week
  • Email
  • Password
  • Search
  • Telephone
  • Text
  • Url

Query the DOM

Methods

  • querySelector(cssSelector);
  • querySelectorAll(cssSelector);

Examples

  • querySelector('#foo');
  • querySelectorAll('div');
  • querySelectorAll('[name="foo"]');
  • querySelectorAll('.foo');
  • querySelector('.foo .bar');
  • querySelectorAll('.foo .bar');

Events

Events stream property: "on___" (eg. onClick)

Element events

  • Abort
  • BeforeCopy
  • BeforeCut
  • BeforePaste
  • Blur
  • Change
  • Copy
  • Cut
  • Error
  • Focus
  • FullscreenChange
  • FullscreenError
  • Input
  • Invalid
  • Load
  • Paste
  • Reset
  • Scroll
  • Search
  • Select
  • SelectStart
  • Submit

Mouse events

  • DoubleClick
  • Click
  • ContextMenu
  • Drag
  • DragEnd
  • DragEnter
  • DragLeave
  • DragOver
  • DragStart
  • Drop
  • MouseDown
  • MouseEnter
  • MouseLeave
  • MouseMove
  • MouseOut
  • MouseOver
  • MouseUp
  • MouseWheel

Keyboard events

  • KeyDown
  • KeyPress
  • KeyUp

Touch events

  • TouchCancel
  • TouchEnd
  • TouchEnter
  • TouchLeave
  • TouchMove
  • TouchStart

Other events

  • TransitionEnd

Examples

buttonElem.onClick.listen((MouseEvent event) {
  print(event);
});

Element

Creation

  • new Element.div()
  • new Element.tag('div')
  • new DivElement()

Properties

  • Map attributes
  • classes
  • className
  • document
  • id
  • innerHtml
  • nodeName
  • nodes
  • Events on
  • outerHtml
  • style
  • tabIndex
  • tagName
  • text
  • title
  • Elements Navigation
  • children
  • nextElementSibling
  • offsetParent
  • parent
  • previousElementSibling
  • Nodes Navigation
  • childNodes
  • firstChild
  • lastChild
  • nextNode
  • parentNode
  • previousNode
  • Dimensions & positions
  • client
  • documentOffset
  • offset
  • borderEdge
  • contentEdge
  • marginEdge
  • paddingEdge
  • scrollHeight
  • scrollLeft
  • scrollTop
  • scrollWidth

Methods

  • Node append(Node newChild)
  • appendHtml(String text)
  • appendText(String text)
  • blur()
  • click()
  • bool contains(Node other)
  • bool dispatchEvent(Event event)
  • focus()
  • Point offsetTo(Element parent)
  • Element querySelector(String selectors)
  • ElementList querySelectorAll(String selectors)
  • remove()
  • Node replaceWith(Node otherNode)
  • scrollByLines(int lines)
  • scrollByPages(int pages)
  • scrollIntoView([ScrollAlignment alignment])

Examples

  • element.attributes.containsKey('name');
  • element.attributes['name'];
  • element.attributes['name'] = 'value';
  • element.attributes.remove('name');

CSS (CssStyleDeclaration)

Main Properties

  • animation
  • appearance
  • background
  • border
  • bottom
  • clear
  • color
  • content
  • cursor
  • direction
  • display
  • float
  • font
  • fontFamily
  • fontSize
  • fontStyle
  • fontWeight
  • height
  • hyphens
  • left
  • margin
  • marquee
  • mask
  • maxHeight
  • maxWidth
  • maxZoom
  • minHeight
  • minWidth
  • minZoom
  • opacity
  • order
  • orientation
  • orphans
  • outline
  • overflow
  • overflowX
  • overflowY
  • padding
  • page
  • perspective
  • position
  • quotes
  • resize
  • right
  • size
  • textAlign
  • textDecoration
  • textIndent
  • textOrientation
  • textOverflow
  • textOverline
  • textShadow
  • textStroke
  • textTransform
  • textUnderline
  • top
  • transform
  • transition
  • verticalAlign
  • visibility
  • whiteSpace
  • width
  • wordBreak
  • wordSpacing
  • wordWrap
  • wrap
  • zIndex
  • zoom

Methods

  • getPropertyPriority(propertyName)
  • getPropertyValue(propertyName)
  • item(index)
  • removeProperty(propertyName)
  • setProperty(propertyName, value, [priority])

HTTP Request

Static Methods

  • getString(String url)
  • postFormData(String url, Map data)

Methods

  • String getResponseHeader(String header)
  • open(String method, String url)
  • setRequestHeader(String header, String value)
  • abort()

Example

HttpRequest.getString('http://theUrl')
           .then((response) {
  doSomethingWith(response);
});

Web Socket

Example

var ws = new WebSocket('ws://localhost:3000/ws');
ws.onOpen.listen((e) {
  ws.send('Hello from Dart!');
});
ws.onMessage.listen((MessageEvent e) {
  print('WebSocket message received: ${e.data}');
});

Event Source

Example

var source = new EventSource('/events')
  ..onError.listen((Event e) => print('Error: $e'))
  ..onOpen.listen((Event e) => print('Open'))
  ..onMessage.listen((MessageEvent me) =>
          print('Message: ${me.data}')
    );

Web RTC

Example

window.navigator
  .getUserMedia(audio: true, video: true)
  .then(_onStream);

_onStream(stream) {
  var video = new VideoElement()
   ..autoplay = true
   ..src = Url.createObjectUrlFromStream(stream)
   ..onLoadedMetadata.listen((e) {
     // Ready
   });
  document.body.append(video);
}

Local Storage

Storage is implemented as a Map<String, String>

Examples

  • var foo = window.localStorage['bar'];
  • window.localStorage['bar'] = "foo";

Index DB

Example

Future open() {
  return window.indexedDB.open('myIndexedDB',
      version: 1,
      onUpgradeNeeded: _initializeDatabase)
    .then(_loadFromDB);
}
_initializeDatabase(VersionChangeEvent e) {
  // Initialize your database
}
Future _loadFromDB(Database db) {
  // Load request
}

Canvas Api

Example

CanvasElement canvas =
   new CanvasElement(width: 600, height: 600);
CanvasRenderingContext2D ctx = canvas.context2D;
ImageElement img = document.querySelector('img');

ctx.drawImage(img, 100, 100);

History

Properties

  • bool supportsState
  • int length
  • dynamic state

Methods

  • back()
  • forward()
  • go(int distance)
  • pushState(Object data, String title)
  • replaceState(Object data, String title)

File Api

File

  • DateTime lastModifiedDate
  • String name
  • String relativePath
  • int size
  • String type

File Reader

  • int readyState
  • Object result
  • void abort()
  • readAs___(Blob blob)
  • ArrayBuffer
  • BinaryString
  • DataUrl
  • Text
  • EventStreamProvider
  • errorEvent
  • abortEvent
  • loadEndEvent
  • loadEvent
  • loadStartEvent
  • progressEvent
  • Stream on___
  • Abort
  • Error
  • Load
  • LoadEnd
  • LoadStart
  • Progress

Example

var reader = new FileReader();
var fileInput = querySelector('#fileInput')
     ..onChange.listen(_onFileChange);

_onFileChange(e){
  reader..readAsText(fileInput.files[0])
        ..onLoad.listen((e2) {
           print(reader.result);      
        });
}

File Writer

  • int position
  • int readyStage
  • abort()
  • seek(int position)
  • truncate(int size)
  • write(Blob data)
  • EventStreamProvider
  • errorEvent
  • abortEvent
  • progressEvent
  • writeEndEvent
  • writeEvent
  • writeStartEvent
  • Stream on___
  • Error
  • Abort
  • Progress
  • Write
  • WriteEnd
  • WriteStart