javascript DOM æä½åºç¡ç¥è¯å°ç»_javascriptæå·§
程序员文章站
2022-05-25 22:25:34
...
DOMæ·»å å
ç´ ,使ç????ç¹å??æ??
[Ctrl+A å ???? æ³??:å¦??å¼å ¥å??????Js??å·æ??æ??½æ?쨨¡]
ä¸ãDOMåºç¡
1.??ç¹(node)å??次
Documentï¼ï¼æ??¡¶å??ç??ç¹ï¼ææçå ¶ä»??ç¹??½æ¯??å??äºå®çã
DocumentTypeï¼ï¼DTDå¼ç??ï¼ä½¿ç????¯æ³ï¼ç对????¡??¡??ç??å½¢å¼ï¼å®ä¸??½å å«å??ç¹ã
DocumentFragmentï¼ï¼å¯ä»¥åDocumentä¸æ ·æ¥ä¿åå ¶ä»??ç¹ã
Elementï¼ï¼??¡??ç??º??µ·å??æ ç¾åç»ææ ç¾ä¹??´çå 容ï¼ä¾å¦æ??
ã??¿æ¯å¯ä¸å¯ä»¥åæ¶å
å«ç¹æ??åå??ç¹ç??ç¹ç??»åã
Attrï¼ï¼ä»£??¡??ä¸å¯¹ç¹æ??ååç¹æ??å¼ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
Textï¼ï¼ä»£??¡??XMLææ¡£ä¸çå????µ·å??æ ç¾åç»ææ ç¾ä¹??´ï¼æ?? CDataSectionå å å«çæ®??ææ¬ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
CDataSectionï¼ï¼ç对????¡??¡??ç??å½¢å¼ã??¿ä¸ª??ç¹ç??»åä» ??½å å«ææ¬??ç¹Textä½ä¸ºå??ç¹ã
Entityï¼ï¼??¡??ç??ºå??DTDä¸çä¸ä¸ªå®ä½å®ä¹ï¼ä¾å¦ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
EntityReferenceï¼ï¼ä»£??¡??ä¸ä¸ªå®ä½å¼ç??ï¼ä¾å¦"ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
ProcessingInstructionï¼ï¼ä»£??¡??ä¸ä¸ªPIã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
Commentï¼ï¼ä»£??¡??XMLæ³????ã??¿ä¸ª??ç¹ä¸??½å å«å??ç¹ã
Notationï¼ï¼ä»£??¡??å??DTDä¸å®ä¹ç??®??å·ã??¿ä¸ªå¾å??ç??å??ã
Nodeæ¥å£å®ä¹äºææ??ç¹ç??»å??½å å«çç¹æ??åæ¹æ³ã
???訨ç¹å??ï¼DOM??¿å®ä¹äºä¸äºå©æ对????¡ï¼å®ä»¬å¯ä»¥å??ç¹ä¸??µ·ä½¿ç??ï¼ä½ä¸æ¯DOMææ¡£å¿ æç????åã
NodeListï¼ï¼??ç¹æ??ç»ï¼æç ??æ??å¼??¿??¡ç´¢å¼;ç??æ¥??¡??ç??ºåä¸ä¸ªå ç´ çå??ç¹ã
NamedNodeMapï¼ï¼åæ¶ä½¿ç??æ??å¼ååå??¿??¡ç´¢å¼ç??ç¹??¡??;ç??äº??¡??ç??ºå ç´ ç¹æ??ã
2.??®¿??®ç¸å ³ç??ç¹
ä¸??¢çå ??ä¸????ä¸??¢çHTML??¡µ??¢
DOM Example
??¦??®¿??® å
ç´ ï¼ä½ åº??¯¥æç½??¿æ¯??¯¥æ件çdocumentå
ç´ ï¼ï¼ä½ å¯ä»¥ä½¿ç??documentçdocumentElementç¹æ??ï¼
var oHtml = document.documentElement;
ç??å??å??oHtmlå å«ä¸ä¸ª??¡??ç??º
[Ctrl+A å ???? æ³??:å¦??å¼å ¥å??????Js??å·æ??æ??½æ?쨨¡]
ä¸ãDOMåºç¡
1.??ç¹(node)å??次
Documentï¼ï¼æ??¡¶å??ç??ç¹ï¼ææçå ¶ä»??ç¹??½æ¯??å??äºå®çã
DocumentTypeï¼ï¼DTDå¼ç??ï¼ä½¿ç????¯æ³ï¼ç对????¡??¡??ç??å½¢å¼ï¼å®ä¸??½å å«å??ç¹ã
DocumentFragmentï¼ï¼å¯ä»¥åDocumentä¸æ ·æ¥ä¿åå ¶ä»??ç¹ã
Elementï¼ï¼??¡??ç??º??µ·å??æ ç¾åç»ææ ç¾ä¹??´çå 容ï¼ä¾å¦
Attrï¼ï¼ä»£??¡??ä¸å¯¹ç¹æ??ååç¹æ??å¼ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
Textï¼ï¼ä»£??¡??XMLææ¡£ä¸çå????µ·å??æ ç¾åç»ææ ç¾ä¹??´ï¼æ?? CDataSectionå å å«çæ®??ææ¬ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
CDataSectionï¼ï¼ç对????¡??¡??ç??å½¢å¼ã??¿ä¸ª??ç¹ç??»åä» ??½å å«ææ¬??ç¹Textä½ä¸ºå??ç¹ã
Entityï¼ï¼??¡??ç??ºå??DTDä¸çä¸ä¸ªå®ä½å®ä¹ï¼ä¾å¦ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
EntityReferenceï¼ï¼ä»£??¡??ä¸ä¸ªå®ä½å¼ç??ï¼ä¾å¦"ã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
ProcessingInstructionï¼ï¼ä»£??¡??ä¸ä¸ªPIã??¿ä¸ª??ç¹ç??»åä¸??½å å«å??ç¹ã
Commentï¼ï¼ä»£??¡??XMLæ³????ã??¿ä¸ª??ç¹ä¸??½å å«å??ç¹ã
Notationï¼ï¼ä»£??¡??å??DTDä¸å®ä¹ç??®??å·ã??¿ä¸ªå¾å??ç??å??ã
Nodeæ¥å£å®ä¹äºææ??ç¹ç??»å??½å å«çç¹æ??åæ¹æ³ã
ç¹æ??/æ¹æ³ | ç??»å/??¿åç??»å | ??¯´æ |
nodeName | String | ??ç¹çåå;æ ¹æ®??ç¹çç??»å??å®ä¹ |
nodeValue | String | ??ç¹çå¼;æ ¹æ®??ç¹çç??»å??å®ä¹ |
nodeType | Number | ??ç¹çç??»å常??å¼ä¹ä¸ |
ownerDocument | Document | æå??¿ä¸ª??ç¹æå??çææ¡£ |
firstChild | Node | æåå??childNodeså??¡??ä¸ç第ä¸ä¸ª??ç¹ |
lastChild | Node | æåå??childNodeså??¡??ä¸çæåä¸ä¸ª??ç¹ |
childNodes | NodeList | ææå??ç¹çå??¡?? |
previousSibling | Node | æååä¸ä¸ªå å¼??ç¹;å¦æ??¿ä¸ª??ç¹å????æ¯ç¬¬ä¸ä¸ªå å¼??ç¹ï¼??£ä¹??¯¥å¼ä¸ºnull |
nextSibling | Node | æååä¸ä¸ªå å¼??ç¹;å¦æ??¿ä¸ª??ç¹å????æ¯æåä¸ä¸ªå å¼??ç¹ï¼??£ä¹??¯¥å¼ä¸ºnull |
hasChildNodes() | Boolean | å½childNodeså å«ä¸ä¸ªæå??个??ç¹æ¶,??¿åç |
attributes | NamedNodeMap | å å«äºä»£??¡??ä¸ä¸ªå ç´ çç¹æ??çAttr对????¡;ä» ç??äºElement??ç¹ |
appendChild(node) | Node | å??nodeæ·»å å??childNodesçæ«å??¾ |
removeChild(node) | Node | ä»childNodesä¸å ????node |
replaceChild(newnode,oldnode) | Node | å??childNodesä¸çoldnodeæ¿æ¢ænewnode |
insertBefore(newnode,refnode) | Node | å??childNodesä¸çrefnodeä¹åæå ¥newnodd |
???訨ç¹å??ï¼DOM??¿å®ä¹äºä¸äºå©æ对????¡ï¼å®ä»¬å¯ä»¥å??ç¹ä¸??µ·ä½¿ç??ï¼ä½ä¸æ¯DOMææ¡£å¿ æç????åã
NodeListï¼ï¼??ç¹æ??ç»ï¼æç ??æ??å¼??¿??¡ç´¢å¼;ç??æ¥??¡??ç??ºåä¸ä¸ªå ç´ çå??ç¹ã
NamedNodeMapï¼ï¼åæ¶ä½¿ç??æ??å¼ååå??¿??¡ç´¢å¼ç??ç¹??¡??;ç??äº??¡??ç??ºå ç´ ç¹æ??ã
2.??®¿??®ç¸å ³ç??ç¹
ä¸??¢çå ??ä¸????ä¸??¢çHTML??¡µ??¢
å??å¶ä»£ç 代ç å¦ä¸:
Hello World!
Isn't this exciting?
You're learning to use the DOM!
??¦??®¿??®
var oHtml = document.documentElement;
ç??å??å??oHtmlå å«ä¸ä¸ª??¡??ç??º
推荐阅读
-
JS获取节点的兄弟,父级,子级元素的方法_javascript技巧
-
JavaScript更改class和id的方法_javascript技巧
-
无废话JavaScript教程(全集)_javascript技巧
-
基于JavaScript实现的希尔排序算法分析
-
Javascript 闭包引起的IE内存泄露分析_javascript技巧
-
图片连续不间断滚动像册_javascript技巧
-
详解JavaScript按概率随机生成事件
-
Javascript实现跨域后台设置拦截的方法详解
-
利用javascript的面向对象的特性实现限制试用期_javascript技巧
-
Javascript新手入门之字符串拼接与变量的应用