1.1 DOM编程概念：
- Document Object Model 文档对象模型，用于操作网页中的html元素。
1.2 DOM编程的作用：
- 一个html页面被加载到浏览器的时候，浏览器会为每一个html标签都会创建一个对应的对象进行描述，然后网页上显示的内容其实就是这些html标签对应的属性信息，如果我们想要改变页面显示的内容，那么就应该拿到这些对象，改变对象的属性信息，从而控制页面的显示效果。
- document代表了整个HTML的文档信息。
- 在dom编程中任何一个HTML标签对应的对象，我们都习惯称作为节点对象。Node
- 这些对象全部都被保存到一个document对象中。document对象也被称作为文档树。
1.3 根据标签的属性找节点方法：
- 注意：凡是节点都具备两个属性：nodeName（节点的名字），nodeType
| 获取元素的方法 | 作用 |
| document.getElementById("id") | 通过id属性得到唯一的元素<br/>如果页面上有多个同名的id,则得到第1个元素 |
| document.getElementsByName("name"） | 通过name属性得到一组标签，返回一个数组 |
| document.getElementsByTagName("标签名") | 通过标签名字得到一组标签，返回一个数组 |
| document.getElementsByClassName("类名") | 通过类名得到一组标签，返回一个数组 |
1.3.1 通过标签属性找节点代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据标签的属性找元素</title>
<script type="text/javascript">
window.onload = function () {
/*//根据标签的id属性找节点
var input = document.getElementById("b2");
alert(input.nodeName);*/
//找到b3
var input = document.getElementById("b3");
//给input标签注册一个事件
input.onclick = function () {
//根据标签的name属性，返回的是一个数组
var divs = document.getElementsByName("one");
//遍历divs数组
for(var index = 0;index<divs.length;index++){
divs[index].innerHTML = "我是div";
}
}
//根据标签名找标签
var button2 = document.getElementById("b2");
button2.onclick = function () {
//根据标签名找标签
var links = document.getElementsByTagName("a");
for(var index=0;index<links.length;index++){
links[index].href = "http://www.baidu.com";
}
}
//根据class值找标签
var button3 = document.getElementById("b4");
button3.onclick = function () {
var calssId = document.getElementsByClassName("two");
for(var index=0;index<calssId.length;index++){
calssId[index].innerHTML="我是div";
}
}
}
</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/>
<a>百度</a><br/>
<a>百度</a><br/>
<hr/>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr/>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</body>
</html>1.3.2 实现多选与反选案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//实现全选功能
function selectAll(input) {
//找到name为item的checkbox
var items = document.getElementsByName("item");
//遍历items，让每一个item都与全选按钮的状态一致
for(var index=0;index<items.length;index++){
items[index].checked = input.checked;
}
}
//实现反选功能
function reverseSelect() {
//找到name为item的checkbox
var items = document.getElementsByName("item");
//遍历items，让每一个item的checked取反
for(var index=0;index<items.length;index++){
//checked是布尔类型，取反只需要在前面加上取反符号即可
items[index].checked = !items[index].checked;
}
}
//结账
function total() {
//找到name为item的checkbox
var items = document.getElementsByName("item");
//定义result，保存总价格
var result = 0;
//遍历items,找出选中的item
for(var index=0;index<items.length;index++){
if(items[index].checked){
//当前的选项是选中的，那么就获取其value值。
var price = items[index].value;
result +=parseInt(price);
}
}
//把总价格设置到span标签中
document.getElementById("result").innerHTML = "总价格为 ："+result;
}
</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(this)" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
<input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
</body>
</html>2.1 根据节点的关系找节点
2.1.1 节点的类型：
| 名称 | 节点名称 | 节点类型 |
| 标签 | Element | 1 |
| 文本 | Text | 3 |
| 注释 | Comment | 8 |
2.1.2 节点的通用属性：
凡是节点都会具备以下两个属性。
| 属性名 | 属性说明 |
| nodeName | 标签的名字 |
| nodeType | 标签的类型 |
2.1.3 节点与节点之间的关系：
| 遍历节点的属性 | 说明 |
| childNodes | 得到当前元素下所有的子节点 |
| children | 得到当前元素下所有的标签元素 |
| parentNode | 得到当前元素的父节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据关系找节点</title>
<script type="text/javascript">
window.onload = function () {
//找到div
var div = document.getElementsByTagName("div")[0];
//获取div的所有子节点
var children = div.children;
for(var index=0;index<children.length;index++){
/* if(children[index].nodeType==1){
alert("节点名字："+children[index].nodeName+"节点的类型："+children[index].nodeType);
}*/
alert("节点名字："+children[index].nodeName+"节点的类型："+children[index].nodeType);
}
alert("div的父元素是："+div.parentNode.nodeName);
}
</script>
</head>
<body>
<div>
<!--注意：div中所有出现的空格，制表，换行也是文本节点 -->
<span>王者荣耀</span>
<br/>
<img src="img/0.jpg" width="300px" />
</div>
</body>
</html>
3.1 增删改节点：
| 创建元素的方法 | 作用 |
| document.createElement(“标签名”) | 在文档上创建一个对象 |
| 元素对象.setAttribute（“属性名”,“属性值”） | 给元素添加一个属性名和属性值<br/> 如果元素名不存在则是添加属性，存在则是修改属性值 |
| 将元素挂到DOM树上的方法 | 作用 |
| 父元素.appendChild（子元素） | 将元素追加成父元素的最后一个子元素 |
| 父元素.removeChild（子元素） | 通过父元素删除一个子元素 |
| 元素.remove | 元素删除本身 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript">
/*增删节点主要使用的方法：
document.createElement("标签名") 在文档上创建一个元素对象
元素对象.setAttribute("属性名", "属性值") 给元素添加一个属性名和属性值 <br />如果元素名不存在则是添加属性，存在则是修改属性值
父元素.appendChild(子元素) 将元素追加成父元素的最后一个子元素
父元素.removeChild(子元素) 通过父元素删除一个子元素
元素.remove() 元素删除本身
*/
var num = 1;
function addButton() {
//创建一个节点
var inputNode = document.createElement("input");
//设置input标签的属性名和属性值
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num++);
//把input标签添加到body中
var body = document.getElementsByTagName("body")[0];
//添加
body.appendChild(inputNode);
}
function removeButton() {
var button = document.getElementById("b1");
/*//自杀
button.remove();*/
var body = document.getElementsByTagName("body")[0];
//使用removeChild方法的时候，一定要是被删除节点的父节点去执行该方法
body.removeChild(button);
}
</script>
</head>
<body>
<input type="button" value="添加按钮" onclick="addButton()"/>
<input id="b1" type="button" value="删除按钮" onclick="removeButton()"/>
</body>
</html>
4.1 省市联动案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript">
//每个省份对应的数组
var citys = [[""], ["广州", "湛江", "东莞", "河源"], ["南宁", "桂林", "北海", "玉林"], ["长沙", "衡阳", "岳阳", "邵阳"]];
function selectCity(province) {
//第一步：获取到当前省份选中的索引值
var index = province.selectedIndex;
//第二步：根据索引值取出对应的省份城市
var cityDate = citys[index];
var cityOption = "<option value=\"\">--请选择市--</option>";
//遍历所有的城市
for(var i=0;i<cityDate.length;i++){
//取出每一个城市的名字
var cityName = cityDate[i];
cityOption += "<option>"+cityName+"</option>";
}
//找到城市的select
var citySelect = document.getElementById("cityId");
citySelect.innerHTML = cityOption;
}
</script>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option value="">--请选择省--</option>
<option>广东省</option>
<option>广西省</option>
<option>湖南省</option>
</select>
<select id="cityId">
<option value="">--请选择市--</option>
</select>
</body>
</html>5.1通过js代码修改CSS样式：
方式一：通过style属性操作
元素.style.样式名 = “样式值”；
方式二：通过className 操作
元素.className="类名"；
5.1.1 隔行换色案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<style type="text/css">
table {
margin: auto;
border-collapse: collapse;
}
tr {
text-align: center;
height: 32px;
}
.redStyle {
background: lightpink;
}
.yellowStyle {
background: lightyellow;
}
.greenStyle {
background: lightgreen;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oldColor = "";
//找到所有的tr
var trs = document.getElementsByTagName("tr");
//遍历所有的tr
for(var index = 1; index<trs.length ; index++){
if(index%2==0){
//偶数行
trs[index].className = "redStyle";
}else{
//奇数行
trs[index].className = "yellowStyle";
}
//给每行注册一个之间，鼠标经过事件
trs[index].onmouseover = function(){
//记录原本的颜色
oldColor = this.className;
this.className = "greenStyle";
}
//注册鼠标移开事件
trs[index].onmouseleave = function(){
this.className =oldColor;
}
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr style="background-color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
