为了动态的修改HTML元素,必须能访问HTML元素,DOM提供了三种方式来访问HTML元素:
➢根据ID访问HTML元素
➢根据CSS选择器访问HTML元素
➢利用节点关系访问HTML元素
根据ID访问HTML元素
➢document.getElementById(idVal):返回文档中id属性为idVal的HTML元素
下面的代码示范了如何根据ID来访问HTML元素
<!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>根据ID访问HTML元素</title>
<script type="text/javascript">
var accessById = function(){
alert(document.getElementById("a").innerHTML+"\n"
+document.getElementById("b").value);
}
</script>
</head>
<body>
<div id="a">guairenyoucj</div>
<textarea id="b" cols="25" rows="3">怪人友cj</textarea>
<input type="button" value="访问2个元素" onclick="accessById();">
</body>
</html>
DOM模型扩展了HTML元素,几乎为所有的HTML元素都新增了innerHTML属性,该属性代表该元素的内容。但<textarea…/>例外,因为它是一个表单控件,他的开始标签和结束标签之间的内容是他的值,因此只能通过value属性来访问。
根据CSS选择器访问HTML元素
根据CSS选择器来访问HTML元素由document的如下方法提供支持
➢Element querySelector(selectos):该方法的参数既可以是一个CSS选择器,也可以是用逗号隔开的多个CSS选择器,该方法返回HTML文档中第一个符合选择器参数的HTML元素
➢NodeList querySelectorAl(selectors):该方法与前一个方法的用法类似,只是该方法将返回所有符合CSS选择器的HTML元素。
下面代码示范了querySelector()的用法
<!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>querySelector</title>
<script>
var accessById = function(){
alert(document.querySelector("#a").innerHTML+"\n"
+document.querySelector("#b").value);
}
</script>
</head>
<body>
<div id="a">怪人友cj</div>
<textarea name="" id="b" cols="25" rows="3">怪人友cj</textarea>
<input type="button" value="访问两个" onclick="accessById();"/>
</body>
</html>
下面代码示范了querySelectorAl()方法同时获取多个HTML元素的情形
<!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>querySelectorAll</title>
<script>
var change =function(){
var divList = document.querySelectorAll("div");
console.log(divList);
for(var i=0;i<divList.length;i++){
divList[i].innerHTML="测试内容"+i;
divList[i].style.width="300px";
divList[i].style.height="50px";
divList[i].style.margin="10px";
divList[i].style.background="#faa";
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" onclick="change();" value="修改全部div">
</body>
</html>
利用节点关系访问HTML元素
一旦获取了某个HTML元素,由于该元素实际上与DOM树的某个节点对应,因此可以利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问HTML元素的属性和方法如下
下面的代码示范了如何利用节点关系访问HTML元素
<!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>利用节点关系访问HTML元素</title>
<style type="text/css">
.selected{
background-color: #66f;
}
</style>
</head>
<body>
<ol id="books">
<li id="one">第一个</li>
<li id="two">第二个</li>
<li id="three" class="selected">第三个</li>
<li id="four">第四个</li>
<li id="five">第五个</li>
<li id="six">第六个</li>
</ol>
<input type="button" value="父节点"
onclick="change(curTarget.parentNode);">
<input type="button" value="第一个"
onclick="change(curTarget.parentNode.firstChild.nextSibling);">
<input type="button" value="上一个"
onclick="change(curTarget.previousSibling.previousSibling);">
<input type="button" value="下一个"
onclick="change(curTarget.nextSibling.nextSibling);">
<input type="button" value="最后一个"
onclick="change(curTarget.parentNode.lastChild.previousSibling);">
<script type="text/javascript">
var curTarget = document.getElementById("three");
var change = function(target){
alert(target.innerHTML);
}
</script>
</body>
</html>
空格和换行也算一个节点,叫空节点。
访问表单控件
表单在DOM中由HTMLFormElement对象表示,该对象除了可调用前面介绍的基本属性和方法之外,还拥有如下几个常用属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>访问表单控件</title>
</head>
<body>
<form action="" id="d" method="get">
<input type="text" name="user"><br>
<input type="text" name="pass"><br>
<select name="color">
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select><br>
<input type="button" value="第一个" onclick=
"alert(document.getElementById('d').elements[0].value);">
<input type="button" value="第二个" onclick=
"alert(document.getElementById('d').elements['pass'].value);">
<input type="button" value="第三个" onclick=
"alert(document.getElementById('d').color.value);">
</form>
</body>
</html>
访问列表框、下拉菜单的选项
HTML SelectElement代表-一个 列表框或下拉菜单,HTML SelectElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。
<!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>访问列表项</title>
</head>
<body>
<select name="mySelect" id="mySelect">
<option value="one">第一个</option>
<option value="two">第二个</option>
<option value="three">第三个</option>
<option value="four">第四个</option>
<option value="five">第五个</option>
<option value="six">第六个</option>
</select><br>
<input type="button" value="第一个"
onclick="change(curTarget.options[0])">
<input type="button" value="上一个"
onclick="change(curTarget.options[curTarget.selectedIndex-1])">
<input type="button" value="下一个"
onclick="change(curTarget.options[curTarget.selectedIndex+1])">
<input type="button" value="最后一个"
onclick="change(curTarget.options[curTarget.length-1])">
<script>
var curTarget = document.getElementById("mySelect");
var change = function(target){
alert(target.text);
}
</script>
</body>
</html>
访问表格子元素
HTMLTableElement代表表格,HTMLTableElement 对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。
<!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>访问表格元素</title>
</head>
<body>
<table id="d" border="1">
<caption>表头</caption>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
<input type="button" value="表格标题"
onclick="alert(document.getElementById('d').caption.innerHTML);">
<input type="button" value="表格第一行第一格"
onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);">
<input type="button" value="表格第二行第二格"
onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);">
<input type="button" value="表格第三行第二格"
onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);">
</body>
</html>