javascript DOM 操作基础知识小结_javascript技巧

DOM添加元素,使ç”????Š‚点å??žæ€??

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <title>DOM添加元素,使ç”????Š‚点å??žæ€??</title> <ul id="list"><li>Item 1</li></ul> <input type="button" onclick="addItem();" value="Add item">
[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!

??¦??®¿??—®å…ƒç´ ï¼ˆä½ åº”??¯¥æ˜Žç™½??¿™æ˜¯??¯¥æ–‡ä»¶çš„document元素），你可以使ç”??documentçš„documentElement特æ€??：
var oHtml = document.documentElement;
çŽ??åœ??变??‡oHtml包含一个??¡??ç??º