DOMの勉強会

Embed Size (px)

Citation preview

DNA

DOM

2014/3/26()DMM.com

DOMDOM

DOM

MS-09MS-09R R

62.5t43.8t

1,269kw1,199kw

58,200kg53,000kg

13312

DOM

Object Model (DOM) W3CHTMLXMLAPI Level 1 Level 3

from wikipediahttp://ja.wikipedia.org/wiki/Document_Object_Model


HTML DOM

: : http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

Shady GroveAeolian

Over the River, Charlie Dorian

W3C document What is the Document Modelhttp://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/introduction.html

DOMDOM Inspectorhttp://ja.wikipedia.org/wiki/DOM_Inspector

chromeURL

Sample CodeGitHubhttps://github.com/sasakipochi/dom-study

Sample: basic.html

HTMLhtml.body.section.article.div

Sample: basic-cut.html

HTML5

HTML5

HTMLHTML 4

HTML5HTMLXML(XTHML)DOM2HTML

HTML5HTML

HTMLXML

DOMAPI

Application Programming Interface

JavaScript

chromeJavaScriptURL

document.body childNodes

document.bodydocument.body.childNodes

document.body.childNodes[4].childNodes[1].childNodes[7].innerText

document.body.childNodes[4].childNodes[1].childNodes[7].innerText = "!!"

getElementById

document.getElementById("sample")

document.getElementById("sample").innerText

document.getElementById("sample").innerText = "Change!!!!"

GetElementsByTagName

document.getElementsByTagName("article")[0].getElementsByTagName("div")[0].innerText

document.getElementsByTagName("article")[0].getElementsByTagName("div")[0].innerText = "hoge"

Style

document.getElementById("sample").style

document.getElementById("sample").style.color = "yellow"

DOM API

PHP+MySQLWebDB

WebDBMySQLSQLPHP

DOM
DOMDOMDOM APIJavaScript

DOMAPICSSDOMW3CJavaScriptMozilla