[MASOCON 2017] 추억의 자바스크립트 farewell, document.all - 양욱진/스마트스푼

추억의 자바스크립트 farewell, document.all 굴 림 계 획 인증마크 Comic
Sans Project c e r t i f i t e d

새천년 웹페이지 2000 년 11 월 Snapshot

새천년 DHTML 시대 • <table> • document.all || document.layers •
window.addFavorite(href, title) • .css-class {behavior:url(#_IE_)} Element. setHomePage(href) • behavior:url(custom.htc) • window.ActiveXObject • 보너스: setTimeout(funcString, ms) setInterval(funcString, ms) eval(evalString)

document.all 기능 • HTML 문서 내 모든 요소 접근 •
최상단 <html>부터 모두 접근 가능 document.all[0].nodeName == “HTML” • 순서번호, Id, Name 속성 모두 접근 document.all.someId.style.display = ‘none’; • Name 안의 하위 순서도 접근 document.all.item(‘someName’, 0) document.all.spanid.all[..] 식으로 요소에서도 all 속성으로 접근 가능.

document.all 병폐 • IE 전용 (타 브라우저는 호환성으로만) • all
속성만 호출해도 전체 요소 스캔 (속도가 느린 이유 1) • 컬렉션 접근 및 item 접근해도 또 스캔 (속도가 느린 이유 2) • 반환 값 관리의 어려움 (없으면 null, 하나 있음 요소, 여러 개면 NodeList) Chrome 64 canary build 쓰고 있는데 document.all 아직도 먹힘.

document.all 대체 • document.getElementById(id) 단일 ID 요소를 가져옴 • document.getElementsByName(name)
다수 Name이 포함된 모든 요소 취득 • document.getElementsByTagName() 지정 태그인 모든 요소 취득 • document.querySelector[All](query) CSS 셀렉터 질의 후 해당되는 요소 취득

document.all 대체 (XHTML 제외) • window.[ID] 단일 ID 요소를 가져옴
• document.[forms || images || links ..] 특정 요소 컬렉션 취득 • HTMLFormElement.[childName] 양식 요소 내 특정 Name 요소 접근

document.all 몰락 • Ajax ActiveXObject로 시작한 “팀킬“. • Firefox 화려한
부활과 Chrome 등장 호환성으로만 지원, 사용방지 캠페인. 그리고 IE 외 브라우저 사용자수 증가 • 모바일 웹 시대로 확인사살 이 사이트는 1024x768 Internet Explorer 6 이상에 최적화 되었습니다.

웹 기술의 Old n New • HTA(HyperText Application) 1999 IE
엔진 기반의 윈도우에서 웹을 앱으 로 실행하는 기술 (IE >= 5)  nw.js 및 Electron • JScript 엔진 1996 VBScript와 같이 자바스크립트로 간편 앱 개발 및 자동화 스크립트 목적 기술  V8, Charkra (node.js) … • javascript는 1995년 등장

굉장한 기술이군. 아아, 정말이야. • Dynamic HTML Overview – MSDN
https://msdn.microsoft.com/en-us/library/bb250397 • Dottoro Web Reference – document.all http://help.dottoro.com/ljqnmkxg.php 마치…… 양욱진 (Composite) • 프리랜서, 구직활동중. • 스마트스푼 • 웹 풀스택 개발자 HTML5, CSS3, ECMA6, Java…Script? • 前 nw.js 참여 • 병신같은 오픈소스 JS 라이브러리 경력 • W3C, 서울JS 구경꾼

겠습니다. Microsoft Engineer Installs Google Chrome During Presentation After Edge
Freezes

[MASOCON 2017] 추억의 자바스크립트 farewell, document.al...

[MASOCON 2017] 추억의 자바스크립트 farewell, document.all - 양욱진/스마트스푼

MICROSOFTWARE

More Decks by MICROSOFTWARE

Other Decks in Programming

Featured

Transcript

추억의 자바스크립트 farewell, document.all 굴 림 계 획 인증마크 Comic

새천년 웹페이지 2000 년 11 월 Snapshot

새천년 DHTML 시대 • <table> • document.all || document.layers •

document.all 기능 • HTML 문서 내 모든 요소 접근 •

document.all 병폐 • IE 전용 (타 브라우저는 호환성으로만) • all

document.all 대체 • document.getElementById(id) 단일 ID 요소를 가져옴 • document.getElementsByName(name)

document.all 대체 (XHTML 제외) • window.[ID] 단일 ID 요소를 가져옴

document.all 몰락 • Ajax ActiveXObject로 시작한 “팀킬“. • Firefox 화려한

웹 기술의 Old n New • HTA(HyperText Application) 1999 IE

굉장한 기술이군. 아아, 정말이야. • Dynamic HTML Overview – MSDN

겠습니다. Microsoft Engineer Installs Google Chrome During Presentation After Edge