以innerHTML值來查找元素
老師好！
? ? ? 有多個相同的P元素，內容都不一樣，我想用一個innerHTML內容來找到它對應的P元素，怎樣實現？
? ? ? ?就是說，在頁面上有一個輸入框，和多個P元素，然后在輸入框里輸入字符串，從下面的P元素里找到相同的內容，來操作。
? ? ? 這個作用和瀏覽器本身的查找功能一樣。
1 回答
舉報
0/150
提交
取消
老師好！
? ? ? 有多個相同的P元素，內容都不一樣，我想用一個innerHTML內容來找到它對應的P元素，怎樣實現？
? ? ? ?就是說，在頁面上有一個輸入框，和多個P元素，然后在輸入框里輸入字符串，從下面的P元素里找到相同的內容，來操作。
? ? ? 這個作用和瀏覽器本身的查找功能一樣。
2016-04-06
舉報
2016-04-06
<!DOCTYPE?html> <html> ?<head> ????<meta?charset="UTF-8"> ????<title> ???? 頁面查找不同標簽的內容 ????</title> ????<style?type="text/css"> ????body{ ???? margin:20px; ????} ????.body{ ???? width:?300px; ???? height:?200px; ???? background-color:?#ddd; ????} ????p{ ???? font-size:?20px; ???? line-height:?25px; ???? height:?25px; ????} ????.p_serchar{?/*定義被搜索到時的顯示樣式*/ ???? background-color:?blue; ???? color:?#fff; ????} ????</style> ????<script?type="text/javascript"> ???? function?search(){ ???? //獲取input標簽對象（注意是對象不是內容） ???? var?search_str?=?document.getElementById("search_str"); ???? var?is_search;?//用于判斷是否出現相同內容 ???? alert("你將要搜索："+search_str.value); ???? ???? //循環遍歷p標簽的HTML內容 ???? for?(var?i?=?0;?i?<?4;?i++)?{ ???? //獲取第i個p標簽對象 ???? var?p?=?document.getElementsByTagName("p")[i]; ???? p.className="";//初始化，清除每次遍歷后p標簽的class值 ???? if?(p.innerHTML==search_str.value)?{ ???? p.className="p_serchar"; ???? is_search?=?1;?//如果存在相同則記錄為1 ???? } ???? } ???? //在p標簽遍歷完后如果is_search=1，則證明存在有相同內容，否則輸出警告 ???? if(is_search!=1){ ???? alert("你輸入的內容并不在任何p標簽中存在！"); ???? } ???? is_search?=?0;//對判斷元素初始化 ???? } ????</script> </head> <body> <div> 請輸入關鍵內容:<br> <input?type="text"?id="search_str"?placeholder="請輸入已有內容"> <input?type="button"?onClick="search()"?value="搜索"> </div> <div?class="body"> <p>你好</p> <p>他好</p> <p>我好</p> <p>大家好</p> </div> </body> </html>如上代碼，你可以復制到外部編輯器運行，代碼相關位置有詳細解說，還不懂可以先看3-6控制類名那節。