获取元素的三种方法: 1.getElementById() 2.getElementsByName() 3.getElementsByTagName();
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/demo.js"></script>
</head>
<body>
<button type="button" onclick="showInfo()">调用函数</button>
<button type="button" onclick="disp_confirm()">确认框</button>
<button type="button" onclick="disp_prompt()">提示框</button>
<button type="button" onclick="loc()">location跳转页面</button>
<button type="button" onclick="location.reload()">刷新页面</button>
<h1 id="myHeader" onclick="getId()">This is a header</h1>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
</body>
</html>
...
demo.js
1. getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 function getId() { //根据Id获取html节点元素 var x = document.getElementById("myHeader") //获取到html节点的内容 x.innerHTML = "我的内容被改变了!!!"; //alert(x.innerHTML) }
2. getElementsByName() 方法可返回带有指定名称的对象的集合。 function getElements() { var x = document.getElementsByName("myInput"); alert(x.length); }
3. getElementsByTagName() 方法可返回带有指定标签名的对象的集合 function getElements() { var x = document.getElementsByTagName("input"); alert(x.length); }