查找节点的方法
获取元素的方法 | 作用 |
---|---|
document.getElementById(“id”) | 通过id属性到唯一的元素如果页面上有多个同名的id,则得到第1个元素 |
document.getElementsByName(“name”) | 通过name属性得到一组标签,返回一个数组 |
document.getElementsByTagName (“标签名”) | 通过标签名字得到一组标签,返回一个数组 |
document.getElementsByClassName(“类名”) | 通过类名得到一组标签,返回一个数组 |
给标签添加链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script type="text/javascript">
window.onload = function () {
//根据标签名找元素
var b2 = document.getElementById("b2");
b2.onclick = function () {
//返回的是一个数组对象
var aNodes = document.getElementsByTagName("a");
for (var index = 0; index < aNodes.length; index++) {
aNodes[index].href = "http://www.itcast.cn";
}
}
//根据name的属性值找
var b3 = document.getElementById("b3");
b3.onclick = function () {
//根据name的属性值找元素,返回一个数组对象
var divs = document.getElementsByName("one");
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='https://www.baidu.com/'>baidu.com</a>";
}
}
var b4 = document.getElementById("b4");
b4.onclick = function () {
//根据class的属性值找元素,返回一个数组对象
var divs = document.getElementsByClassName("two")
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='https://www.google.com/'>Google.com</a>";
}
}
}
</script>
</head>
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2"/>
<input type="button" value="(通过name属性)给div设值" id="b3"/>
<input type="button" value="(通过类名)给div设值" id="b4"/>
<hr/>
<a>传智播客</a><br/>
<hr/>
<div name="one">百度</div>
<hr/>
<div class="two">谷歌</div>
</body>
</html>
实现全选/全不选,商品结算的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选/全不选
function selectAll () {
//得到下面复选框的状态
var all = document.getElementById("all");
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = all.checked;
}
}
//反选
function reverseSelect () {
//得到上面所有的复选框
var items = document.getElementsByName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
</script>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
<input type="checkbox" name="item" value="200" /> 时尚女装200<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
<input type="checkbox" name="item" value="800" /> 情侣手表800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
</body>
</html>