古詩詞大全網 - 個性簽名 - 如何提取並顯示壹個html文檔的所有標簽、id值和類值?

如何提取並顯示壹個html文檔的所有標簽、id值和類值?

使用jquery的解決方案:示例如下:

Test.html:(註意,這裏可以使用任何html頁面。我只是在裏面加了壹個div。

& ltdiv id = ' gettag ' & gt& lt/div & gt;用於顯示信息。Jquery.js可以從Jquery下載,只需更改名稱,地址:/p/jqueryjs/downloads/detail?name=jquery-1.2.min.js)

& lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD " & gt;

& lthtml xmlns = " http://www . w3 . org/1999/XHTML " & gt;

& lthead & gt

& ltmeta http-equiv = " Content-Type " Content = " text/html;charset=ISO-8859-1" />

& lttitle id='kkk'>。jQuery Starterkit & lt/title & gt;

& ltscript src = " jquery . js " type = " text/JavaScript " & gt;& lt/script & gt;

& ltscript src = " custom . js " type = " text/JavaScript " & gt;& lt/script & gt;

& lt/head & gt;

& ltbody & gt

& lth 1 & gt;jQuery Starterkit & lt/h 1 & gt;

& lth2 & gt該頁面包含測試示例的代碼。大部分內容僅與壹個示例相關。& lt/H2 & gt;

& ltdiv id = ' gettag ' & gt& lt/div & gt;

& lta id = " first " href = " # " & gt壹些鏈接& lt/a & gt;

& ltdiv class = " stuff " & gt

& lta name="top" href="#bottom " >轉到底部& lt/a & gt;

& ltdiv class = " buttons " & gt

& ltbutton & gt第壹個按鈕& lt/button & gt;

& ltbutton & gt第二個按鈕& lt/button & gt;

& lt/div & gt;

& ltol id="orderedlist " >

& lt李& gt第壹個元素& lt/李& gt

& lt李& gt二次元& lt/李& gt

& lt李& gt第三元素& lt/李& gt

& lt/ol & gt;

& ltol id="orderedlist2 " >

& lt李& gt第壹個元素,第二個列表& lt/李& gt

& lt李& gt第二個元素,第二個列表& lt/李& gt

& lt李& gt第三元素,第二個列表& lt/李& gt

& lt李& gt李帶著孩子ul

& ltul & gt

& lt李& gt子壹& lt/李& gt

& lt李& gt兩個孩子& lt/李& gt

& lt/ul & gt;

& lt/李& gt

& lt/ol & gt;

& lt='text1 ' >的標簽。測試& lt/label & gt;& ltinput type = " text " name = ' text 1 ' & gt;

& ltdiv id="rating " >容器& lt/div & gt;

& lta id = " reset " href = " # " & gt重置!& lt/a & gt;

& ltform id = " form " & gt

表格1

& lt輸入值= " XXX "/& gt;

& ltinput/>;

& lt/form & gt;

& lt表單& gt

表格2

& lt輸入值= " YYY "/& gt;

& ltinput/>;

& lt/form & gt;

& lt表單& gt

表格3

& ltinput type = " checkbox "/& gt;

& ltinput type = " checkbox " checked = " checked "/& gt;

& lt/form & gt;

& lt/tbody & gt;

& lt/table & gt;

& lta name="bottom" href="#top " >轉到頂部& lt/a & gt;

& lt/div & gt;

& lt/body & gt;

& lt/html & gt;

自定義. js

//獲取html的標簽

$(文檔)。ready(function() {

var arr _ tag = Array();

var arr _ id = Array();

var arr _ class = Array();

var str =“”;

$('*').每個(功能(i){

arr_tag[i]=$(this)。獲取(0)。標記名;

arr_id[i]=($(this)。attr('id ')?$(這個)。attr(' id '):' non ');

arr_class[i]=($(this)。attr('class ')?$(這個)。attr(' class '):' non ');

str+= " & lt;/br >;+arr _ tag[I]+" id = ' "+arr _ id[I]+" ' class = ' "+arr _ class[I]+" ' ";

});

$('#gettag ')。html(str);

});