如何获取 HTML 标签的值（getAttribute 返回 NULL）答案

【问题标题】：How to get values of HTML tags (getAttribute is returning NULL)如何获取 HTML 标签的值（getAttribute 返回 NULL）
【发布时间】：2017-03-22 13:55:07
【问题描述】：

我想获取所有字段的value-tag的值。

例如我想得到：

/wEPDwUKLTUwMTUxNzcwOGRklQy3YSnUhKEGDrFOOy2aa5Lg4qY=
83BB589F -/wEWBwKN/dHeCAKl1bKzCQK1qbSRCwKpiJ/dDgKE8/3/CQKM+5aFCQKM54rGBs1XK43QekWbnANIKpGR9+Q85Kji
0151CSE003
@Abhishek

我的 HTML 代码目前提供 NULL 和 Undefined

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<body>

 <form name="form1" method="post" action="http://abc/Home/default.aspx" id="form1">

    <div><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwMTUxNzcwOGRklQy3YSnUhKEGDrFOOy2aa5Lg4qY="></div>
    <div><input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="83BB589F"></div>
    <div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKN/dHeCAKl1bKzCQK1qbSRCwKpiJ/dDgKE8/3/CQKM+5aFCQKM54rGBs1XK43QekWbnANIKpGR9+Q85Kji"></div>
    User Name<input name="txtUserName" type="text" id="txtUserName" value="0151CSE003">
    Password<input name="txtPassword" type="password" id="txtPassword"  value="@Abhishek">
    <input type="submit" name="Ulogin" value="Login"  id="Ulogin" >

</form>
<br><br>
<div id="op"></div>

<script>

{
    //var x=document.getElementsByTagName("div")[0].getAttribute('value');
    var x=document.getElementsByTagName("div")[1];


    alert(x.getAttribute('data-value'));
    alert(x.dataset.value);

    document.getElementById("op").innerHTML=x;

}
</script>

</body></html>

【问题讨论】：

标签： javascript html forms dataset getattribute

【解决方案1】：

请检查此代码，看看它是如何获取值的。你的一些代码有点错误。

var viewState = document.querySelector("#__VIEWSTATE");
var viewStateGenerator = document.querySelector("#__VIEWSTATEGENERATOR");

console.log(viewState.value);
console.log(viewStateGenerator.value);

document.querySelector('#op').innerHTML = viewState.value;

【讨论】：

基本上： - 输入的 ID 应该更短、具有描述性，并且不使用下划线或大写字母 - 脚本标签不需要花括号来包围代码，只有函数 - 使用 querySelector 而不是 @987654323 @ - 使用 console.log 代替 alerts 进行更友好的交互

【解决方案2】：

应该是

 x.getAttribute('value')

您不能追溯添加“data-”标签，它必须包含在内。

【讨论】：

【解决方案3】：

如果你需要取输入值，我可以直接做：

    var x=document.getElementsByTagName("input");
    var showValues = '<ul>';

    for(var i=0, len=x.length; i<len; i++){
        if(x[i].id != "Ulogin"){
            showValues +='<li>'+x[i].value + '</li>';
        }
    }
    showValues += '</ul>';

    document.getElementById("op").innerHTML=showValues;

如果你想展示给用户，我已经把它包裹在 ul-li 标签中了

【讨论】：

谢谢..成功了

【解决方案4】：

好的，你的 JavaScript 有点乱。下面的代码应该符合您的要求。将Value 属性与getElementById 一起使用

var VIEWSTATE = document.getElementById("__VIEWSTATE").value;
  var VIEWSTATEGENERATOR = document.getElementById("__VIEWSTATEGENERATOR").value;
  var EVENTVALIDATION = document.getElementById("__EVENTVALIDATION").value;
  var UserName = document.getElementById("txtUserName").value;
  var Password = document.getElementById("txtPassword").value;

alert(VIEWSTATE +"\n" + VIEWSTATEGENERATOR +"\n" +  EVENTVALIDATION + "\n" + UserName+"\n"+Password);

我个人推荐你使用 jquery - 它更容易使用，使用的代码行数更少并且功能强大。

代码如下：

var VIEWSTATE = $("#__VIEWSTATE").val();
  var VIEWSTATEGENERATOR = $("#__VIEWSTATEGENERATOR").val();
  var EVENTVALIDATION = $("#__EVENTVALIDATION").val();
  var UserName = $("#txtUserName").val();
  var Password = $("#txtPassword").val();

alert(VIEWSTATE +"\n" + VIEWSTATEGENERATOR +"\n" +  EVENTVALIDATION + "\n" + UserName+"\n"+Password);

【讨论】：