<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="p" type="button" value="我是一个按钮" onclick="myFunction()"/>
<p id="demo">单机可以显示按钮的名称</p>
<script>
function myFunction(){
//通过document对象获取html元素节点(即元素对象)
var inputElement=document.getElementById("p");
var pElement=document.getElementById("demo");
//通过-元素对象-获取指定属性的节点(即属性对象),再通过-属性对象-获取指定属性的值
//getAttributeNode() 已不赞成使用。请使用 getAttribute() 替代
pElement.innerHTML=inputElement.getAttributeNode("value").nodeValue;
//或者直接通过-元素对象-获取该元素指定的属性值,而不是属性节点(即属性对象)
//pElement.innerHTML=inputElement.getAttribute("value");
//又或者直接通过元素对象指定的属性获取,这种方式最简洁,用得次数也最多,
//但是也有缺点,就是.后面若是关键字就挂了
//pElement.innerHTML=inputElement.value;
//注意,innerHTML只能接收文本,所以需要文本对象转换成文本内容
//var buttonValue=inputElement.getAttributeNode("value").value;
//pElement.innerHTML=buttonValue.valueOf();
}
</script>
</body>
</html>