DOM-Text绫诲瀷銆丆omment绫诲瀷銆丆DATASection绫诲瀷銆丏ocumentType绫诲瀷銆丏ocumentFragment绫诲瀷銆丄ttr绫诲瀷

Posted 2020-08-07

鏍囩锛?/p>

Text绫诲瀷

鏂囨湰鑺傜偣鐢盩ext绫诲瀷琛ㄧず锛屽寘鍚殑鏄彲浠ョ収瀛楅潰瑙ｉ噴鐨勭函鏂囨湰鍐呭銆俆ext鑺傜偣鍏锋湁浠ヤ笅鐗瑰緛锛?/span>

nodeType鐨勫€间负3
nodeName鐨勫€间负"text"
nodeValue鐨勫€间负鑺傜偣鎵€鍖呭惈鐨勬枃鏈?/span>
parentNode鐨勫€间负涓€涓狤lement
娌℃湁瀛愯妭鐐?/span>

鍙互閫氳繃nodeValue灞炴€ф垨鑰卍ata灞炴€ц闂甌ext鑺傜偣涓墍鍖呭惈鐨勬枃鏈€備娇鐢ㄤ笅鍒楁柟娉曞彲浠ユ搷浣滆妭鐐?/span>涓殑鏂囨湰锛?/span>

appendData(text):灏唗ext娣诲姞鍒拌妭鐐圭殑鏈熬銆?/span>
deleteData(offset,count):浠巓ffset鎸囧畾鐨勪綅缃紑濮嬪垹闄ount涓瓧绗︺€?/span>
insertData(offset,text):鍦╫ffset鎸囧畾鐨勪綅缃彃鍏ext銆?/span>
replaceData(offset,count,text):鐢╰ext鏇挎崲浠巓ffset寮€濮嬪埌count鐨勬墍鏈夋枃鏈€?/span>
splitText(offset):浠巓ffset鎸囧畾鐨勪綅缃皢褰撳墠鏂囨湰鍒嗘垚涓や釜鏂囨湰鑺傜偣銆?/span>
substringData(offset,count):鎻愬彇浠巓ffset鎸囧畾鐨勪綅缃紑濮嬪埌offset+count涓烘鐨勫瓧绗︿覆

闄や簡杩欎簺鏂规硶杩樻湁涓€涓猯ength灞炴€э紝淇濆瓨鐫€鑺傜偣涓瓧绗︾殑鏁扮洰銆傝€屼笖nodeValue.length鍜宒ata.length涓篃淇濆瓨鐫€鍚屾牱鐨勫€?/span>

鍦ㄩ粯璁ゆ儏鍐典笅锛屾瘡涓彲浠ュ寘鍚唴瀹圭殑鍏冪礌鏈€澶氬彧鑳芥湁涓€涓枃鏈妭鐐癸紝鑰屼笖蹇呴』纭疄鏈夊唴瀹瑰瓨鍦ㄣ€?/span>

1銆佸垱寤烘枃鏈妭鐐?/span>

document.createTextNode()鍒涘缓鏂版枃鏈妭鐐癸紝杩欎釜鏂规硶鎺ュ彈涓€涓弬鏁板嵆瑕佹彃鍏ヨ妭鐐逛腑鐨勬枃鏈€?/span>涓庤缃凡鏈夋枃鏈妭鐐圭殑鍊间竴鏍凤紝浣滀负鍙傛暟鐨勬枃鏈篃灏嗘寜鐓TML鎴朮ML鐨勬牸寮忚繘琛岀紪鐮併€傚湪鍒涘缓
鏂版枃鏈妭鐐圭殑鍚屾椂锛屼篃浼氫负鍏惰缃畂wnerDocuemnt灞炴€с€?/span>

1         var textNode = document.createTextNode("<strong>Hello</strong> world!");

涓€鑸儏鍐典笅锛屾瘡涓厓绱犲彧鏈変竴涓枃鏈瓙鑺傜偣銆備笉杩囷紝鍦ㄦ煇浜涙儏鍐典笅涔熷彲鑳藉寘鍚涓枃鏈瓙鑺傜偣锛屽涓嬶細

 1         var element = document.createElement(鈥榙iv鈥?span style="color: #000000;">);
 2         element.className = "message";
 3 
 4         var textNode = docuemnt.createTextNode(鈥楬ello world!鈥?span style="color: #000000;">);
 5         element.appendChild(textNode);
 6 
 7         var anotherTextNode = document.createTextNode(鈥榊ippee!鈥?span style="color: #000000;">);
 8         element.appendChild(anotherTextNode);
 9 
10         document.body.appendChild(element);

濡傛灉涓や釜鏂囨湰鑺傜偣鏄浉閭荤殑鍚岃優鑺傜偣锛岄偅涔堣繖涓や釜鑺傜偣涓殑鏂囨湰灏变細杩炶捣鏉ユ樉绀猴紝涓棿涓嶄細鏈夌┖鏍?/span>

2銆佽鑼冨寲鏂囨湰鑺傜偣

DOM鏂囨。涓瓨鍦ㄧ浉閭荤殑鍚岃優鏂囨湰鑺傜偣寰堝鏄撳鑷存贩涔憋紝鍥犱负鍒嗕笉娓呭摢涓枃鏈妭鐐硅〃绀哄摢涓瓧绗︿覆銆?/span>normalize()鑳藉灏嗙浉閭绘枃鏈妭鐐瑰悎骞剁殑鏂规硶锛屽湪涓€涓寘鍚袱涓垨鑰呭涓枃鏈妭鐐圭殑鐖跺厓绱犱笂璋冪敤
normalize()鏂规硶锛屽垯浼氬皢鎵€鏈夋枃鏈妭鐐瑰悎骞舵垚涓€涓妭鐐广€?/span>

 1         var element = document.createElement(鈥榙iv鈥?span style="color: #000000;">);
 2         element.className = "message";
 3 
 4         var textNode = document.createTextNode(鈥楬ello world!鈥?span style="color: #000000;">);
 5         element.appendChild(textNode);
 6 
 7         var anotherTextNode = document.createTextNode(鈥榊ippee!鈥?span style="color: #000000;">);
 8         element.appendChild(anotherTextNode);
 9 
10         document.body.appendChild(element);
11 
12         alert(element.childNodes.length); //2
13 
14         element.normalize();
15         alert(element.childNodes.length); //1
16         alert(element.firstChild.nodeValue); //Hello world!Yippee!

3銆佸垎鍓叉枃鏈妭鐐?/span>

splitText(),浼氬皢涓€涓枃鏈妭鐐瑰垎鎴愪袱涓枃鏈妭鐐广€傝繖涓柟娉曚細杩斿洖涓€涓柊鏂囨湰鑺傜偣锛岃鑺傜偣涓庡師鑺傜偣鐨刾arentNode鐩稿悓

 1         var element = document.createElement(鈥榙iv鈥?span style="color: #000000;">);
 2         element.className = "message";
 3 
 4         var textNode = document.createTextNode(鈥楬ello world!鈥?span style="color: #000000;">);
 5         element.appendChild(textNode);
 6 
 7         document.body.appendChild(element);
 8 
 9         var newNode = element.firstChild.splitText(5);
10         alert(element.firstChild.nodeValue); //Hello
11         alert(newNode.nodeValue); // world!
12         alert(element.childNodes.length); //2

Comment绫诲瀷

娉ㄩ噴鍦―OM涓槸閫氳繃Comment绫诲瀷鏉ヨ〃绀虹殑锛孋omment鑺傜偣鍏锋湁涓嬪垪鐗瑰緛锛?/span>

nodeType鐨勫€间负8
nodeName鐨勫€间负"#comment"
nodeValue鐨勫€兼槸娉ㄩ噴鐨勫唴瀹?/span>
parentNode鐨勫€兼槸Document鎴栬€匛lement

Comment绫诲瀷涓嶵ext绫诲瀷缁ф壙鑷浉鍚岀殑鍩虹被锛屽洜姝ゅ畠鎷ユ湁闄plitText()涔嬪鐨勬墍鏈夊瓧绗︿覆鎿嶄綔鏂规硶銆?/span>
娉ㄩ噴鑺傜偣鍙互閫氳繃鍏剁埗鑺傜偣鏉ヨ闂細

1     <div id="myDiv"><!--A comment --></div>

鍦ㄦ锛屾敞閲婅妭鐐规槸<div>鍏冪礌鐨勪竴涓瓙鑺傜偣銆?/span>

CDATASection绫诲瀷

CDATASection绫诲瀷鍙拡瀵瑰熀浜嶺ML鐨勬枃妗ｏ紝琛ㄧず鐨勬槸CDATA鍖哄煙锛孋DATASection绫诲瀷涓嶵ext绫诲瀷缁ф壙鑷浉鍚岀殑鍩虹被锛屽洜姝ゅ畠鎷ユ湁闄plitText()涔嬪鐨勬墍鏈夊瓧绗︿覆鎿嶄綔鏂规硶

nodeType鐨勫€间负4
nodeName鐨勫€间负"#cdata-section"
nodeValue鐨勫€兼槸CDATA鍖哄煙涓殑鍐呭
parentNode鐨勫€兼槸Document鎴栬€匛lement

DocumentType绫诲瀷

DocumentType鍖呭惈鐫€涓庢枃妗ｇ殑doctype鏈夊叧鐨勬墍鏈変俊鎭紝瀹冨叿鏈変笅鍒楃壒寰侊細

nodeType鐨勫€间负10
nodeName鐨勫€兼槸doctype鐨勫悕绉?/span>
nodeValue鐨勫€兼槸null
parentNode鐨勫€兼槸Document鎴栬€匛lement

DocumentFragment绫诲瀷

DOM瑙勫畾鏂囨。鐗囨鏄竴绉?ldquo;杞婚噺绾?rdquo;鐨勬枃妗ｏ紝鍙互鍖呭惈鍜屾帶鍒惰妭鐐癸紝浣嗕笉浼氬儚瀹屾暣鐨勬枃妗ｉ偅鏍峰崰鐢ㄩ澶栫殑璧勬簮銆侱ocumentFragment绫诲瀷鍏锋湁涓嬪垪鐗瑰緛锛?/span>

nodeType鐨勫€间负11
nodeName鐨勫€兼槸"#document-fragment"
nodeValue鐨勫€兼槸null
parentNode鐨勫€兼槸null
瀛愯妭鐐瑰彲浠ユ槸Element銆丳rocessingInstruction銆丆omment銆乀ext銆丆DATASection鎴朎ntityReference銆?/span>

铏界劧涓嶈兘鎶婃枃妗ｇ墖娈电洿鎺ユ坊鍔犲埌鏂囨。涓紝浣嗗彲浠ュ皢瀹冧綔涓轰竴涓?ldquo;浠撳簱”鏉ヤ娇鐢紝鍗冲彲浠ュ湪閲岄潰淇濆瓨灏嗘潵鍙兘浼氭坊鍔犲埌鏂囨。涓殑鑺傜偣銆傝鍒涘缓鏂囨。鐗囨锛屽彲浠ヤ娇鐢╠ocument.createDocumentFragment()鏂规硶锛屽涓嬶細

1     var fragment = document.createDocumentFragment();

涓轰竴涓?lt;ul>鍏冪礌娣诲姞3涓垪琛ㄩ」

 1     <ul id="myList"></ul>
 2 
 3     var fragment = document.createDocumentFragment();
 4     var ul = document.getElementById(鈥榤yList鈥?span style="color: #000000;">);
 5     var li = null;
 6 
 7     for(var i=0;i<3;i++){
 8         li = document.createElement(鈥榣i鈥?span style="color: #000000;">);
 9         li.appendChild(document.createTextNode("Item " + (i+1)));
10         fragment.appendChild(li);
11     }
12 
13     ul.appendChild(fragment);

 Attr绫诲瀷

鍏冪礌鐨勭壒鎬у湪DOM涓互Attr绫诲瀷鏉ヨ〃绀猴紝鐗规€у氨鏄瓨鍦ㄤ簬鍏冪礌attributes灞炴€т腑鐨勮妭鐐广€傜壒鎬ц妭鐐瑰叿鏈変笅鍒楃壒寰侊細

nodeType鐨勫€间负2
nodeName鐨勫€兼槸鐗规€х殑鍚嶇О
nodeValue鐨勫€兼槸鐗规€х殑鍊?/span>
parentNode鐨勫€兼槸null

Attr瀵硅薄鏈?涓睘鎬э細name銆乿alue 鍜宻pecified銆傚叾涓璶ame鏄壒鎬у悕绉帮紝value鏄壒鎬х殑鍊硷紝鑰宻pecified鏄竴涓竷灏斿€硷紝鐢ㄤ互鍖哄埆鐗规€ф槸鍦ㄤ唬鐮佷腑鎸囧畾鐨勶紝杩樻槸榛樿鐨勩€?/span>