1、DOM WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE。但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发了自己的私有DOM,只能在自己的浏览器上正确运行,document.all[]就是只能运行在 IE是的微软的私有DOM。为了正确理解DOM,给出IE4的DOM
2、理解document.all[]
从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description:
Array of all HTML tags in the document.Collection of all elements contained by the object.
也就是说document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素(见例1)。
IE's document.all collection exposes all document elements.This array provides access to every element in the document.
document.all[]这个数组可以访问文档中所有元素。
例1(这个可以让你理解文档中哪些是对象)
]
ããä¾2ï¼è®¿é®ä¸ä¸ªç¹å®å
ç´ ï¼
Â
å¦éå¼å
¥å¤é¨Jséå·æ°æè½æ§è¡
]
ããä¸é¢çè¿ä¸ªä¾åè®©ä½ äºè§£æä¹è®¿é®ææ¡£ä¸çä¸ä¸ªç¹å®å
ç´ ï¼æ¯å¦ææ¡£ä¸æä¸ä¸ªDIV
ï¼ä½ å¯ä»¥éè¿è¿ä¸ªDIVçIDï¼NAMEæINDEXå±æ§è®¿é®è¿ä¸ªDIVï¼
代ç å¦ä¸:
document.all["docid"]Â
document.all["docname"]Â
document.all.item("docid")Â
document.all.item("docname")Â
document.all[7] document.all.tags("div")åè¿åææ¡£ä¸ææDIVæ°ç»ï¼æ¬ä¾ä¸åªæä¸ä¸ªDIVï¼æ以ç¨document.all.tags("div")[0]å°±å¯ä»¥è®¿é®äºãÂ
ãã3ã使ç¨document.all[]
ä¾3
ãã
4ãæ åDOMä¸ç访é®æ¹æ³ ããå¼å¤´å°±è¯´è¿document.all[]ä¸ç¬¦åWEBæ åï¼é£ç¨ä»ä¹æ¥æ¿ä»£å®å¢ï¼document.getElementById
Most third-party browsers are âstrict standardsâ implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.
ããè¿æ®µè¯çæææ¯å¤§å¤æ°ç¬¬ä¸æ¹æµè§å¨åªæ¯æW3CçDOMï¼å¦æä½ çç½ç«ç¨æ·ä½¿ç¨å
¶ä»çæµè§å¨ï¼é£ä¹ä½ æ好é¿å
使ç¨IEçç§æå±æ§ãèä¸IE6ä¹å¼å§æ¯æW3CãDOMã
ããæ¯ç«å¤§å¤æ°äººè¿ä¸äºè§£æ åï¼å¨ä½¿ç¨æ ååï¼ä½ è¿å¯ä»¥å¨ä½ çç½é¡µä¸ç¨document.all[]访é®æ档对象åé¢åå°WEBæ åï¼ä»å¤©ç»§ç»WEBæ åä¸å¯ä»¥éè¿getElementById(), getElementsByName(), and getElementsByTagName()访é®DOCUMENTä¸çä»»ä¸ä¸ªæ ç¾ï¼
ãã1ãgetElementById()
ããgetElementById()å¯ä»¥è®¿é®DOCUMENTä¸çæä¸ç¹å®å
ç´ ï¼é¡¾åæä¹ï¼å°±æ¯éè¿IDæ¥åå¾å
ç´ ï¼æ以åªè½è®¿é®è®¾ç½®äºIDçå
ç´ ã
ããæ¯å¦è¯´æä¸ä¸ªDIVçID为docidï¼
ããé£ä¹å°±å¯ä»¥ç¨getElementById("docid")æ¥è·å¾è¿ä¸ªå
ç´ ã
ãã
2ãgetElementsByName()
ããè¿ä¸ªæ¯éè¿NAMEæ¥è·å¾å
ç´ ï¼ä½ä¸ç¥å¤§å®¶æ³¨æ没æï¼è¿ä¸ªæ¯GETãELEMENTSï¼å¤æ°ELEMENTS代表è·å¾çä¸æ¯ä¸ä¸ªå
ç´ ï¼ä¸ºä»ä¹å¢ï¼
ããå 为DOCUMENTä¸æ¯ä¸ä¸ªå
ç´ çIDæ¯å¯ä¸çï¼ä½NAMEå´å¯ä»¥éå¤ãæ个æ¯å»å°±å人ç身份è¯å·æ¯å¯ä¸çï¼ç论ä¸ï¼è½ç¶ç°å®ä¸æéå¤ï¼ï¼ä½ååéå¤çå´å¾å¤ãå¦æä¸ä¸ªææ¡£ä¸æ两个以ä¸çæ ç¾NAMEç¸åï¼é£ä¹getElementsByName()å°±å¯ä»¥åå¾è¿äºå
ç´ ç»æä¸ä¸ªæ°ç»ã
ããæ¯å¦æ两个DIVï¼
ããé£ä¹å¯ä»¥ç¨getElementsByName("docname")è·å¾è¿ä¸¤ä¸ªDIVï¼ç¨getElementsByName("docname")[0]访é®ç¬¬ä¸ä¸ªDIVï¼ç¨getElementsByName("docname")[1]访é®ç¬¬äºä¸ªDIVã
ããä¸é¢è¿æ®µè¯æéï¼è¯·çforforçåå¤ï¼ä½æ¯å¾å¯æï¼IE没ææ¯æè¿ä¸ªæ¹æ³ï¼å¤§å®¶æå
´è¶£å¯ä»¥å¨FIREFOXæNETSCAPEä¸è°è¯ä¸é¢è¿ä¸ªä¾åãï¼æå¨NETSCAPE7.2è±æçåFIREFOX1.0ä¸è°è¯æåãï¼
ããçæ¥ææ°çæµè§å¨ç解WEBæ åè¿æ¯æé®é¢ï¼æç¥éçåªæç模åãç©ºæ ¼BUGãæ¼æµ®BUGãFLASHæå
¥BUGï¼ä»document.getElementsByNameå¯ä»¥çåºFIREFOXï¼NETSCAPEç解æ åæåå·®ï¼ä½forfor说ç对ï¼è¦çµæ´»åºç¨æ åã
ãã3ãgetElementsByTagName() ããè¿ä¸ªå¢å°±æ¯éè¿TAGNAMEï¼æ ç¾å称ï¼æ¥è·å¾å
ç´ ï¼ä¸ä¸ªDOCUMENTä¸å½ç¶ä¼æç¸åçæ ç¾ï¼æ以è¿ä¸ªæ¹æ³ä¹æ¯åå¾ä¸ä¸ªæ°ç»ã
ããä¸é¢è¿ä¸ªä¾åæ两个DIVï¼å¯ä»¥ç¨getElementsByTagName("div")æ¥è®¿é®å®ä»¬ï¼ç¨getElementsByTagName("div")[0]访é®ç¬¬ä¸ä¸ªDIVï¼ç¨
getElementsByTagName("div")[1]访é®ç¬¬äºä¸ªDIVã
ããæ»ç»ä¸ä¸æ åDOMï¼è®¿é®æä¸ç¹å®å
ç´ å°½éç¨æ åçgetElementById()ï¼è®¿é®æ ç¾ç¨æ åçgetElementByTagName(),ä½IEä¸æ¯ægetElementsByName()ï¼æ以就è¦é¿å
使ç¨getElementsByName()ï¼ä½getElementsByName()åä¸ç¬¦åæ åçdocument.all[]ä¹ä¸æ¯å
¨æ æ¯å¤ï¼å®ä»¬æèªå·±çæ¹ä¾¿ä¹å¤ï¼ç¨ä¸ç¨é£å°±çç½ç«çç¨æ·ä½¿ç¨ä»ä¹æµè§å¨ï¼ç±ä½ èªå·±å³å®äºã
ããå
³äºdocument.getElementsByName
ããIEå½ç¶æ¯æ å¯ä»¥è¯´IEæ´å¿ äºhtml/xhtmlæ å(å¿å¿ åæ¥firefoxä¹ä¸åå° å¹¸ç¾ä¹ç¥¸ä¸ä¸^_^)
ããæç
§O'REILLYç<>ä¸çè¯´æ³ name并ä¸æ¯æ ¸å¿å±æ§ 并éæææ ç¾é½å¯ä»¥å nameå±æ§(大家å¯ä»¥æ¿æä¸é¢çä¾åå» validator.w3.org åéªè¯)
ããæä»¥ä½ ç»divå nameå±æ§ç论ä¸æ¯ä¸ä¼åºç»æç.è¿ä¸ç¹IEå¾å¥½ç符åäºæ å~!!
ãã(åæ¶ä¹çåºäºç¬¦åæ åä¹æç¦äººçå°æ¹~_~ æ以大家ä¸ç¨å¤ªææ åå½åäºå¿ è¿ä¸¤å¹´é½ç¨xmläº è¿ä¸ªä¹è¿æ¶äº!å¡å¯¼çµæ´»çwebstandardåºç¨ææ³ é¤äºç¬¦åxmlææ³çä¸è¥¿ å
¶ä»çææµè§å¨çç解å»åå°±è¡)
é:
ããç®åæ¥è¯´å°±æ¯DIVä¸æ¯æNAMEå±æ§ï¼æ以é£ä¸ªdocument.getElementsByNameçä¾åè°è¯ä¸è½éè¿.
ä¸é¢ç¨INPUTå个ä¾å