使用JS的DOM（檔案物件模型）獲取前端回圈的引數

使用Go語言渲染html，但是想讓網頁動起來，顯示一些彈窗還是比較麻煩的，于是乎，想到使用js獲取頁面的資料進行顯示，但是js無法加載go的一些變數，想了很久，突然在網頁除錯的時候使用了js的DOM進行元素查找獲得了些許靈感最后實作了這個功能，

1.網頁顯示部分

該部分是顯示go后端傳遞的一個結構體陣列里的各項資料，展示到一個表格中，故使用了回圈展示資料，詳見代碼：

　　　　　　　　　　　　{{ 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}}
.....
{{end}}

這個部分.res是Go后端向網頁傳遞的資料，range $v即是對其進行遍歷的操作，

撤銷操作使用get方法傳遞引數，但是再確定是否執行撤銷操作的時候，我想進行確認，因此需要獲得{{ $v.AssetUUID}}的資料，傳進js里面，進行彈框的確定及URL的跳轉，

我嘗試，將{{ $v.AssetUUID}}當成變數直接傳進js里是執行不了的，這一步進行不下去了，

2.使用js的DOM獲取頁面的資料

 2.1預備知識

1）DOM查找元素

document獲取節點的基本方法

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

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

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

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

2）  查找

直接查找

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

間接查找

　　檔案內容操作

　　innerText 僅文本

　　innerHTML 全內容

　　value

　　input value 獲取當前的值

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

　　Textarea 獲取value的值

2.2 從網頁獲取資料

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

 如何獲得具體的assetid呢？

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

且 document.getElementsByName("assetid")[0].textContent是這個資料里面的text值，具體請看：

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

代碼具體實作：

                        <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  href="javascript:del($r)">撤銷</a>
                                <a  href="https://www.cnblogs.com/echoqiqi/p/#.html/?AssetID={{$v.AssetUUID}}">更新</a>
                            </td>
                        </tr>
                        {{ end }} 

<script>
        function del(pos){
            if(false==confirm("是否確定洗掉當前記錄")) return;
            var $aid=document.getElementsByName("assetid")[pos].textContent;
            location.href='https://www.cnblogs.com/echoqiqi/p/Myasset.html/?action=del&AssetID='+$aid;
        }
    </script>                              

　　說明$r表示的是下標，

標籤：JavaScript

上一篇：關于 NodeJs 處理超長字串問題的分析

下一篇：關于 NodeJs 處理超長字串問題的分析