快捷導(dǎo)航

使用JS的DOM文檔對象模型獲取前端循環(huán)的參數(shù)

更新時間：2023年02月13日 08:27:25 作者：追·不逝

這篇文章主要介紹了使用JS的DOM（文檔對象模型）獲取前端循環(huán)的參數(shù),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

使用JS的DOM（文檔對象模型）獲取前端循環(huán)的參數(shù)

使用Go語言渲染html，但是想讓網(wǎng)頁動起來，顯示一些彈窗還是比較麻煩的，于是乎，想到使用js獲取頁面的數(shù)據(jù)進(jìn)行顯示，但是js無法加載go的一些變量。想了很久，突然在網(wǎng)頁調(diào)試的時候使用了js的DOM進(jìn)行元素查找獲得了些許靈感最后實(shí)現(xiàn)了這個功能。

1.網(wǎng)頁顯示部分

該部分是顯示go后端傳遞的一個結(jié)構(gòu)體數(shù)組里的各項(xiàng)數(shù)據(jù)，展示到一個表格中，故使用了循環(huán)展示數(shù)據(jù)，詳見代碼：

　　{{ range $v := .res}}
             　　　　　　 <tr >
                            <td name="assetid">{{ $v.AssetUUID}}</td>
                            <td>{{ $v.AssetName}}</td>
                            <td>{{ $v.AssetPrice}}</td>
                            <td>{{$v.ProofUUID}}</td>
                            <td>{{ $v.DataType}}</td>
                            <td>{{ $v.DeviceType}}</td>
                            <td>{{ $v.StorageTime}}</td>
                            <td>
                                <a class="link-update" href="javascript:del($r)">撤銷</a>
                                <a class="link-update" href="#.html/?AssetID={{$v.AssetUUID}}">更新</a>
                            </td>
                        </tr>
                        {{ end }}

在代碼中的

{{ range $v := .res}}<br>.....<br>{{end}}

這個部分.res是Go后端向網(wǎng)頁傳遞的數(shù)據(jù)，range $v即是對其進(jìn)行遍歷的操作。

撤銷操作使用get方法傳遞參數(shù)，但是再確定是否執(zhí)行撤銷操作的時候，我想進(jìn)行確認(rèn)，因此需要獲得{{ $v.AssetUUID}}的數(shù)據(jù)，傳進(jìn)js里面，進(jìn)行彈框的確定及URL的跳轉(zhuǎn)。

我嘗試，將{{ $v.AssetUUID}}當(dāng)成變量直接傳進(jìn)js里是執(zhí)行不了的，這一步進(jìn)行不下去了。

2.使用js的DOM獲取頁面的數(shù)據(jù)

2.1預(yù)備知識

1）DOM查找元素

document獲取節(jié)點(diǎn)的基本方法

document.getElementById('id'); //通過id來獲取元素,返回指定的唯一元素。

document.getElementsByName("name"); //通過name來獲取元素，返回name='name'的集合。

.document.getElementsByClassName("classname") //用classname來獲取元素，返回的是一個的集合(不兼容IE8及以下)。

document.getElementsByTagName('div'); //用元素的標(biāo)簽獲取元素，返回所有標(biāo)簽=“div”的集合。

2）查找

直接查找

　　var obj = document.getElementById('id');

間接查找

　　文件內(nèi)容操作

　　innerText 僅文本

　　innerHTML 全內(nèi)容

　　value

　　input value 獲取當(dāng)前的值

　　select 獲取選中的value的值 document.getElementById('s1').selectedIndex=1

　　Textarea 獲取value的值

2.2 從網(wǎng)頁獲取數(shù)據(jù)

document.getElementsByName("assetid")獲得的是一個NodeList的列表

如何獲得具體的assetid呢？

可以使用document.getElementsByName("assetid")[]這種方式定位到需要獲得id的位置，比如獲得第一個assetid位置是：document.getElementsByName("assetid")[0]

且document.getElementsByName("assetid")[0].textContent是這個數(shù)據(jù)里面的text值，具體請看：

即可獲取這個id的具體值。

代碼具體實(shí)現(xiàn)：

  <script>
                            $r=-1;
                        </script>
                        {{ range $v := .res}}
                        <script>
                            $r++;
                        </script>
                        <tr >
                            <td name="assetid">{{ $v.AssetUUID}}</td>
                            <td>{{ $v.AssetName}}</td>
                            <td>{{ $v.AssetPrice}}</td>
                            <td>{{$v.ProofUUID}}</td>
                            <td>{{ $v.DataType}}</td>
                            <td>{{ $v.DeviceType}}</td>
                            <td>{{ $v.StorageTime}}</td>
                            <td>
                                <a class="link-update" href="javascript:del($r)">撤銷</a>
                                <a class="link-update" href="#.html/?AssetID={{$v.AssetUUID}}">更新</a>
                            </td>
                        </tr>
                        {{ end }}
 
<script>
        function del(pos){
            if(false==confirm("是否確定刪除當(dāng)前記錄")) return;
            var $aid=document.getElementsByName("assetid")[pos].textContent;
            location.href='Myasset.html/?action=del&AssetID='+$aid;
        }
    </script>

　　說明$r表示的是下標(biāo)。

到此這篇關(guān)于使用JS的DOM（文檔對象模型）獲取前端循環(huán)的參數(shù)的文章就介紹到這了,更多相關(guān)js dom獲取前端循環(huán)的參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: