javascript操作DOM元素，javascriptdom元素
1）HTMLElement的中繼資料屬性：
checked——擷取或設定checked屬性是否存在；
classList——擷取或設定元素所述的類列表（返回DOMTokenList）；
classList.add(<class>)——給元素添加指定的類；
classList.contains(<class>)——如果元素屬於指定的類就返回true；
classList.length——返回元素所屬類的數量；
classList.remove(<class>)——從元素上移除指定的類；
classList.toggle(<class>)——如果類不存就添加它，如果存在就移除它；
className——擷取或設定元素所屬的類列表；
dir——擷取或設定dir屬性的值；
disabled——擷取或設定disabled屬性是否存在；
hidden——擷取或設定hidden屬性是否存在；
id——擷取或設定id屬性的值；
lang——擷取或設定lang屬性的值；
spellcheck——擷取或設定spellcheck屬性是否存在；
tabIndex—擷取或設定tabindex屬性的值；
tagName——返回標籤名（標識元素類型）；
title——擷取或設定title屬性的值；
2）與HTML 屬性相關的屬性和方法
attributes——返回應用到元素上的屬性數組；
dataset——返回以data-開頭的屬性數組；
getAttribute(<name>)——返回指定屬性的值；
hasAttribute(<name>)——如果元素帶有指定的屬性則返回true；
removeAttribute(<name>)——從元素上移除指定屬性；
setAttribute(<name>,<value>)——應用一個指定名稱和值的屬性；
3）Text對象的成員
appendData(<string>)——把指定字串附加到文字區塊末尾；
data——擷取或設定文本；
deleteData(<offest>,<count>)——從文本中移除字串，第一個數字是位移量，第二個是要移除的字元數量；
insertData(<offset>,<string>)——在指定位移量出插入指定字串；
length——返回字元的數量；
replaceData(<offset>,<count>,<string>)——用指定字串替換一段文本；
replaceWholeText(<string>)——替換全部文本；
splitText(<number>)——將現有的Text元素在指定位移量出一分為二；
substringData(<offset>,<count>)——返迴文本的子串；
wholeText——擷取文本；
4）DOM操作成員
appendChild(HTMLElement)——將指定元素添加為當前元素的子項目；
removeChild(HTMLElement)——從當前元素上移除指定的子項目；
replaceChild(HTMLElement,HTMLElement)——替換當前元素的某個子項目；
cloneNode(boolean)——複製一個元素；
compareDocumentPosition(HTMLElement)——判斷一個元素的相對位置；
innerHTML——擷取或設定元素的內容；
outerHTML——擷取或設定某個元素的HTML和內容；
insertAdjacentHTML(<pos>,<text>)——相對於元素插入HTML;
其中pos(參數)：afterbegin——將片段作為當前元素的第一個子項目插入；
afterend——將片段插入當前元素之後；
beforebegin——將片段插入當前元素之前；
beforeend——將片段作為當前元素的最後一個子項目插入；
insertBefore(<newElem>,<childElem>)——在第二個（子）元素之前插入第一個元素；
isEqualNode(<HTMLElement>)——判斷指定元素是否與當前元素相同；
isSameNode（<HTMLElement>）——判斷指定元素是否就是當前元素；
用document對象建立元素：
createElement(<tag>)——建立一個屬於指定標籤類型的新HTMLElement對象；
createTextNode(<text>)——建立一個帶有指定內容的新Text對象；
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>上海遠地資產管理有限公司</title> <meta name="author" content="jason"/> <meta name="description" content="上海遠地資產管理有限公司（簡稱：遠地資產），是一家專業的互連網金融服務平台."/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <style> p{ border: medium double black; clear:left; } pre{ border:thin solid green; } p.newclass{ background-color: grey; color: white; } table{ border:thin solid black; border-collapse: collapse; margin: 10px; float: left; } td{ padding: 4px 5px; } </style></head><body> <p id="textblock" dir="ltr" lang="zh-CN" class="yuandi numbers" data-fruit="apple" data-sentiment="like"> 遠地本著“構築誠信，永續發展”的理念為客戶提供專業的理財服務、財富管理以及產品方案推薦。 遠地都進來看看撒將通過自身的專業優勢和有效資訊交流平台，<b>為資金富裕方和資金需求方打造一個專業</b>，誠信，共贏，睿智的服務平台， 協助客戶實現穩定、安全的財富增值，協助更多優秀的中小型企業融資成功。 </p> <pre id="results"></pre> <button id="pressme">點擊改變樣式</button> <pre id="results2"></pre> <button id="toggle">轉場樣式</button> <pre id="results3"></pre> <pre id="results4"></pre> <pre id="results5"></pre> <button id="pressme1">點擊擷取字元數量</button> <pre id="results6"></pre> <table border="1"> <thead> <tr> <th>Name</th><th>Color</th> </tr> </thead> <tbody id="fruitsBody"> <tr> <td>Banana</td><td>Yellow</td> </tr> <tr id="apple"> <td>Apple</td><td>Red</td> </tr> </tbody> </table> <table border="1"> <thead> <tr> <th>Fruit</th><th>Color</th> </tr> </thead> <tbody id="fruitsBody3"> <tr id="plumrow"> <td>Plum</td><td>Purple</td> </tr> </tbody> </table> <pre id="results7"></pre> <button id="add">添加元素</button> <button id="remove">移除元素</button> <button id="move">移動元素</button> <table border="1"> <thead> <tr> <th>Multiply</th><th>Results</th> </tr> </thead> <tbody id="fruitsBody2"> <tr> <td class="sum">1*1</td><td class="result">1</td> </tr> </tbody> </table> <button id="copy">複製元素</button> <table border="1"> <thead> <tr> <th>Fruit</th><th>Color</th> </tr> </thead> <tbody> <tr id="applerow"> <td>Plum</td><td>Purple</td> </tr> </tbody> </table> <textarea rows="3" id="results8"></textarea> <p> <button id="inner">Inner HTML</button> <button id="outer">Outer HTML</button> </p> <table border="1"> <thead> <tr> <th>Fruit</th><th>Color</th> </tr> </thead> <tbody id="fruitsBody4"> <tr id="targetrow"> <td>placeHolder</td> </tr> </tbody> </table> <p id="buttons"> <button id="ab">After Begin</button> <button id="ae">After End</button> <button id="bb">Before Begin</button> <button id="be">Before End</button> </p> <p> <button id="insert">插入元素</button> </p> <script> var results=document.getElementById("results"); var elem=document.getElementById("textblock"); //使用基本中繼資料屬性 results.innerHTML+="tag:"+elem.tagName+"\n"; results.innerHTML+="id:"+elem.id+"\n"; results.innerHTML+="dir:"+elem.dir+"\n"; results.innerHTML+="lang:"+elem.lang+"\n"; results.innerHTML+="hidden:"+elem.hidden+"\n"; results.innerHTML+="disabled:"+elem.disabled+"\n"; //使用className屬性 document.getElementById("pressme").onclick=function(e){ elem.className+=" newclass"; } //使用classList屬性 var results2=document.getElementById("results2"); document.getElementById("toggle").onclick=toggleClass; listClasses(); function listClasses(){ var classlist=elem.classList; results2.innerHTML="Current classes: " for(var i=0;i<classlist.length;i++){ results2.innerHTML+=classlist[i]+" "; } } function toggleClass(){ elem.classList.toggle("newclass"); listClasses(); } //使用屬性方法 var results3=document.getElementById("results3"); results3.innerHTML="元素是否有lang屬性："+elem.hasAttribute("lang")+"\n"; results3.innerHTML+="lang屬性值是："+elem.getAttribute("lang")+"\n"; results3.innerHTML+="設定lang屬性\n"; elem.setAttribute("lang","en-US"); results3.innerHTML+="lang屬性值是："+elem.getAttribute("lang")+"\n"; //使用dataset屬性 var results4=document.getElementById("results4"); for(var attr in elem.dataset){ results4.innerHTML+=attr+"\n"; } results4.innerHTML+="data-fruit的屬性值是："+elem.dataset["fruit"]; //使用所有屬性 var results5=document.getElementById("results5"); var attrs=elem.attributes; for(var i=0;i<attrs.length;i++){ results5.innerHTML+="Name:"+attrs[i].name+" value:"+attrs[i].value+"\n"; } attrs["data-fruit"].value="banana"; results5.innerHTML+="data-fruit的屬性值是："+attrs["data-fruit"].value; //處理文本 var results6=document.getElementById("results6"); document.getElementById("pressme1").onclick=function(){ var textElem=elem.firstChild; results6.innerHTML="這個p元素含有"+textElem.length+"chars\n"; textElem.replaceWholeText("這是一個新字串"); } //建立和刪除元素 var tableBody=document.getElementById("fruitsBody"); document.getElementById("add").onclick=function(){ var row=tableBody.appendChild(document.createElement("tr")); row.setAttribute("id","newrow"); row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Plum")); row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Purple")); } document.getElementById("remove").onclick=function(){ var row=document.getElementById("newrow"); row.parentNode.removeChild(row); } //複製元素 var tableBody2=document.getElementById("fruitsBody2"); document.getElementById("copy").onclick=function(){ var count=tableBody2.getElementsByTagName("tr").length+1; var newElem=tableBody2.getElementsByTagName("tr")[0].cloneNode(true); newElem.getElementsByClassName("sum")[0].firstChild.data=count+"*"+count; newElem.getElementsByClassName("result")[0].firstChild.data=count*count; tableBody2.appendChild(newElem); } //移動元素 document.getElementById("move").onclick=function(){ var appleElem=document.getElementById("apple"); document.getElementById("fruitsBody3").appendChild(appleElem); } //比較元素對象 var elemByID=document.getElementById("plumrow"); var elemByPos=document.getElementById("fruitsBody3").getElementsByTagName("tr")[0]; if(elemByID.isSameNode(elemByPos)){//firefox不支援 document.getElementById("results7").innerHTML="元素是同一個"; } //使用innerhtml和outerhtml var results8=document.getElementById("results8"); var applerow=document.getElementById("applerow"); document.getElementById("inner").onclick=function(){ results8.innerHTML=applerow.innerHTML; } document.getElementById("outer").onclick=function(){ results8.innerHTML=applerow.outerHTML; } //插入html片段 var target=document.getElementById("targetrow"); var buttons=document.getElementById("buttons").getElementsByTagName("button"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=handleButtonPress; } function handleButtonPress(e){ if(e.target.id=="ab"){//firefox不支援 target.insertAdjacentHTML("afterbegin","<td>After Begin</td>"); }else if(e.target.id=="be"){ target.insertAdjacentHTML("beforeend","<td>Before End</td>"); }else if(e.target.id="bb"){ target.insertAdjacentHTML("beforebegin","<tr><td colspan='2'>Before Begin</td>"); }else{ target.insertAdjacentHTML("afterend","<tr><td colspan='2'>After End</td>"); } } //將一個元素插入文字區塊 document.getElementById("insert").onclick=function(){ elem.firstChild.splitText(10); var newText=elem.childNodes[1].splitText(8).previousSibling; elem.insertBefore(document.createElement("b"),newText).appendChild(newText); } </script></body></html>
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
