js鏂囨湰瀵硅薄妯″瀷[DOM]銆愮画銆?Node鑺傜偣绫诲瀷)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js鏂囨湰瀵硅薄妯″瀷[DOM]銆愮画銆?Node鑺傜偣绫诲瀷)相关的知识，希望对你有一定的参考价值。
鏍囩锛?a href='http://www.mamicode.com/so/1/color' title='color'>color 鍑芥暟 pre 鏈嶅姟 杩炴帴 item classname aced tno
涓€銆丏ocument绫诲瀷 document瀹炰緥
1銆佸父鐢ㄧ殑涓€浜涘睘鎬?/span>
documentElement銆€銆€ 濮嬬粓鎸囧悜HTML椤甸潰涓殑<html>鍏冪礌銆?br />body 銆€銆€鐩存帴鎸囧悜<body>鍏冪礌
title銆€銆€ 鑾峰彇鏂囨。鐨勬爣棰?br />images銆€銆€ 鑾峰彇鎵€鏈夌殑img瀵硅薄 銆?span style="color: #ff6600;">杩斿洖绫绘暟缁勫璞?/span>銆?br />forms銆€銆€ 鑾峰彇鎵€鏈夌殑form瀵硅薄 銆?span style="color: #ff6600;">杩斿洖绫绘暟缁勫璞?/span>銆?br />links銆€銆€ 鑾峰彇鏂囨。涓墍鏈夊甫href灞炴€х殑<area>鍜?lt;a>鍏冪礌
referrer 銆€銆€鍙栧緱閾炬帴鍒板綋鍓嶉〉闈㈢殑閭ｄ釜椤甸潰鐨刄RL 銆?span style="color: #ff6600;">鍗虫潵婧愰〉闈㈢殑URL銆?br />URL 銆€銆€鍙栧緱瀹屾暣鐨勬枃妗RL
domain銆€銆€ 鍙栧緱鍩熷悕锛屽苟涓斿彲浠ヨ繘琛岃缃紝鍦ㄨ法鍩熻闂腑缁忓父浼氱敤鍒般€傘€?span style="color: #ff6600;">杩斿洖鏂囨。鏈嶅姟鍣ㄧ殑鍩熷悕銆?br />
2銆佹煡鎵綡TML涓殑鍏冪礌
getElementById(鈥榠d鈥? 閫氳繃鍏冪礌id鏌ユ壘
浣跨敤涓嬮潰涓夌鏂瑰紡鑾峰彇鍏冪礌銆愯繑鍥炵殑涓虹被鏁扮粍瀵硅薄锛岄渶瑕佷娇鐢ㄦ暟缁勪笅鏍囬€夋嫨鍗曚釜鐩稿簲鐨勫厓绱犮€?br />document.getElementsByTagName(鈥樻爣绛惧悕鈥? 閫氳繃鏍囩鍚?/span>鏌ユ壘
document.getElementsByClassName(鈥樼被鍚嶁€? 閫氳繃绫诲悕鏌ユ壘
document.getElementsByName(鈥榥ame灞炴€у€尖€? 閫氳繃鍏冪礌灞炴€ame鏌ユ壘
document.querySelectorAll(鈥榗ss閫夋嫨鍣ㄢ€? 閫氳繃css閫夋嫨鍣?/span>鏉ユ煡鎵?br />
3銆佹坊鍔犲拰鍒犻櫎鍏冪礌
document.createElement(element) 鍒涘缓鍏冪礌
document.removeChild(element) 鍒犻櫎鍏冪礌
document.appendChild(element) 娣诲姞鍏冪礌
document.replaceChild(element) 鏇挎崲鍏冪礌
document.write(text) 鍐欏叆杈撳嚭娴侊紝鍦ㄦ祻瑙堝櫒涓婃樉绀烘枃鏈?text)鍐呭
浜屻€丒lement绫诲瀷 鍏冪礌鑺傜偣绫诲瀷銆?span style="color: #ff6600;">涓嬮潰浣跨敤鐨別lement琛ㄧず鎴戜滑鎵€閫夊彇鐨勫厓绱犺妭鐐?/span>銆?/span>
1銆佽幏鍙栧睘鎬у€?/span>
element.灞炴€у悕 銆?span style="color: #ff6600;">杩斿洖鐨勬槸js瀵硅薄(style)鎴栫浉搴旂殑js鍑芥暟(浜嬩欢鍑芥暟)銆?/span>
element.getAttribute("灞炴€у悕")銆?span style="color: #ff6600;">杩斿洖鐨勬槸css涓寘鍚殑鏂囨湰(style)鎴栫浉搴斿嚱鏁板悕瀛楃涓?浜嬩欢鍑芥暟鍚?銆?/span>
eg:
//鎸囧畾div鐨剆tyle灞炴€? 鍒濆style = 鈥榗olor:coral;鈥? console.log(div.getAttribute(鈥榮tyle鈥?); //瀛楃涓诧細color: coral console.log(div.style); //js瀵硅薄锛欳SS2Properties color → "coral" //鎸囧畾div鐨勪簨浠剁偣鍑诲嚱鏁皁nclick() console.log(div.onclick); //js鍑芥暟锛歠unction onclick() console.log(div.getAttribute(鈥榦nclick鈥?); //鐩稿簲浜嬩欢鍑芥暟鍚嶏細test()
2銆佽缃睘鎬у€?/span>
element.灞炴€у悕 = "灞炴€у€?;
element.setAttribute("灞炴€у悕","灞炴€у€?);
3銆佸垹闄ゅ睘鎬?/span>
element.removeAttribute("灞炴€у悕");
4銆佽缃甤ss鏍峰紡锛氥€愯缃?span style="color: #ff6600;">style涓睘鎬у€兼椂,甯︽湁-杩炴帴鐨勫睘鎬у悕鍏朵笉鑳借瘑鍒竴鑸娇鐢?span style="color: #ff6600;">鐩稿簲鐨勯┘宄板懡鍚?/span>鏉ヨ幏鍙栥€?/span>
element.style.color = "coral"; //璁剧疆鍏冪礌鐨勫瓧浣撻鑹蹭负鐝婄憵鑹?br />element.style.backgroundColor = 鈥榬ed鈥?nbsp; //璁剧疆鍏冪礌鐨勮儗鏅鑹蹭负绾㈣壊 background-color浣跨敤backgroundColor浠ｆ浛
5銆乤ttributes灞炴€?nbsp; 銆愯繑鍥炵殑涓哄厓绱犺妭鐐圭殑鎵€鏈夊睘鎬ц妭鐐?/span>缁勬垚鐨?span style="color: #ff6600;">绫绘暟缁勫璞?/span>銆?/span>
getNamedItem(name) 銆€銆€杩斿洖nodeName灞炴€х瓑浜巒ame鐨勮妭鐐?br />removeNamedItem(name)銆€銆€ 浠庡垪琛ㄤ腑鍒犻櫎nodeName灞炴€х瓑浜巒ame鐨勫€?br />setNamedItem(node) 銆€銆€鍚戝垪琛ㄤ腑娣诲姞涓€涓妭鐐?br />item(pos) 銆€銆€杩斿洖浣嶄簬鏁板瓧pos浣嶇疆澶勭殑鑺傜偣
6銆佽幏鍙栫浉搴旂殑鍏冪礌鑺傜偣銆愬拷瑙嗗叾浠栬妭鐐癸紝鍙€冭檻鍏冪礌鑺傜偣锛屽浜庢湁瀛╁瓙鐨勫厓绱犺妭鐐逛娇鐢ㄣ€?/span>
element.firstElementChild銆€銆€绗竴涓瀛愬厓绱犺妭鐐?br />element.lastElementChild銆€銆€鏈€鍚庝竴涓瀛愬厓绱犺妭鐐?br />element.nextElementSibling銆€銆€涓嬩竴涓厔寮熷厓绱犺妭鐐?br />element.previousElementSibling銆€銆€涓婁竴涓厔寮熷厓绱犺妭鐐?br />element.childElementCount銆€銆€瀛愬厓绱犵殑鏁伴噺锛岃繑鍥炲€煎拰children.length鍊肩浉绛?br />
7銆佸厓绱犲唴瀹?/span>
a銆乮nnerhtml銆€銆€杩斿洖鍏冪礌鍐呭
eg:
div.innerText = 鈥?lt;span>span</span>鈥? //鏃犳硶瑙ｆ瀽鐩稿簲鐨勬枃鏈唴瀹?/span> console.log(div.innerText); //鑾峰彇浜嗗幓鎺夊洖杞︽崲琛岀殑鏂囨湰鍐呭 銆愬彧杈撳嚭鏂囨湰鍐呭銆?<span>span</span>
b銆乮nnerText銆€銆€鍏冪礌鍐呴儴鐨勬枃鏈紝鍘婚櫎鍥炶溅鍜屾崲琛?/span>
eg:
div.innerHTML = 鈥?lt;span>span</span>鈥? //鍙互瑙ｆ瀽鍐呭閲岄潰鐨凥TML鏍囩浠ｇ爜 console.log(div.innerHTML); //鑾峰彇鍐呴儴鍐呭 銆愬瓧绗︿覆杈撳嚭銆? span
c銆乼extContent銆€銆€鍏冪礌鍐呴儴鐨勬枃鏈紝涓嶅幓闄ょ┖鏍煎拰鍥炶溅
eg:
console.log(div.textContent); //鑾峰彇甯︽湁鍥炶溅鎹㈣鐨勬枃鏈唴瀹?/span>
娣诲姞鍏冪礌鍐呭涓ょ鏂瑰紡锛氥€恑nnerHTML娣诲姞鍏冪礌鍐呭鏃?span style="color: #ff6600;">鏃犳硶璇嗗埆鎹㈣銆?/span>
a銆佷娇鐢ㄥ瓧绗︿覆鎷兼帴
eg:
div.innerHTML = 鈥?lt;div>鈥?
鈥?lt;span>hello world</span>鈥?
鈥?lt;/div>鈥?
b銆佷娇鐢ㄤ竴瀵瑰弽寮曞彿銆恅銆戝寘瑁?/span>
eg:
div.innerHTML = `<div>
<span>hello world</span>
</div>
`;
涓夈€乀ext绫诲瀷 鏂囨湰鑺傜偣 銆?span style="color: #ff6600;">涓嬮潰浣跨敤鐨則ext琛ㄧず鎴戜滑鎵€閫夊彇鐨勫厓绱犺妭鐐?/span>銆?/span>
1銆佹枃鏈被鍨嬬殑鐩稿叧灞炴€у強鏂规硶
a銆佸睘鎬?/span>
text.length銆€銆€//鏂囨湰闀垮害
b銆佹柟娉?/span>
text.appendData(瑕佽拷鍔犵殑鏂囨湰鍐呭) 銆€銆€//杩藉姞鏂囨湰
text.deleteData(寮€濮嬪垹闄ょ殑绱㈠紩,瑕佸垹闄ょ殑鏁伴噺)銆€銆€ //鍒犻櫎鏂囨湰
text.insertData(寮€濮嬫彃鍏ョ殑绱㈠紩,瑕佹彃鍏ョ殑鏂囨湰) 銆€銆€//鎻掑叆鏂囨湰
text.replaceData(寮€濮嬫浛鎹㈢殑绱㈠紩,鏇挎崲鐨勬暟閲?瑕佹彃鍏ョ殑鏂囨湰)銆€銆€ //鏇挎崲鏂囨湰
text.splitText(鍒嗗壊鏂囨湰鐨勭储寮? 銆€銆€//灏嗗綋鍓嶆枃鏈妭鐐瑰垎鎴愪袱涓枃鏈妭鐐?br />text.document.createTextNode(瑕佹彃鍏ヨ妭鐐逛腑鐨勬枃鏈?銆€銆€ //鍒涘缓鏂囨湰鑺傜偣
text.substringData(寮€濮嬫埅鍙栫殑绱㈠紩,瀛愪覆鐨勯暱搴?銆€銆€ //鎴彇鏂囨湰鐨勬寚瀹氬瓙涓?br />
鍥涖€丆omment绫诲瀷 娉ㄩ噴鑺傜偣
以上是关于js鏂囨湰瀵硅薄妯″瀷[DOM]銆愮画銆?Node鑺傜偣绫诲瀷)的主要内容，如果未能解决你的问题，请参考以下文章
鐩存挱 | Microsoft Cloud&AI 鏉庣惓濠? 澶氭ā鎬侀璁粌妯″瀷UNITER, 閫氱敤鐨勫浘鍍?鏂囨湰璇█琛ㄥ緛瀛︿範
绾夸笂Talk | Microsoft Cloud&AI 鏉庣惓濠? 澶氭ā鎬侀璁粌妯″瀷UNITER, 閫氱敤鐨勫浘鍍?鏂囨湰璇█琛ㄥ緛瀛︿範