JavaScript06-DOM的增删改查
1.DOM，Document Object Model
- Document，文档。文档表示整个网页。
- Object，对象。DOM将网页中的所有的东西都转换为对象。
- Model，模型。模型用来体现网页中节点和节点之间的关系。
2.节点，Node
- 网页中的所有部分都可以成为一个节点，节点有不同的类型。
- 文档节点，表示整个网页。
- 元素节点，各个标签都属于元素节点。
- 属性节点，标签中的属性成为属性节点。
- 文本节点，标签中的文本成为文本节点。
3.网页的组成
- 结构，HTML。
- 表现，CSS。
- 行为，JavaScript。
4.DOM常用方法
document.getElementById(); // 通过元素id获取元素，返回唯一元素。
document.getElementsByClassName(); // 通过标签的class属性获取标签，返回一个数组。
// 通过标签名获取标签，返回一个数组。
// 返回HTMLCollection，HTMLCollection是实时更新的。
document.getElementsByTagName(); //
document.getElementsByTagName('*'); // 获取所有的元素。
document.getElementsByName(); // 通过元素name属性获取元素，返回一个数组。
document.all; // 获取所有的元素。
document.body; // 获取body元素。
document.documentElement; // 获取HTML元素
document.images; // 获取页面中所有的image元素，返回一个数组。
// 通过CSS选择器查找元素，只返回查找到的第一个元素，返回一个元素。
// 返回包含title属性的div。
document.querySelector('div[title]');
// 通过CSS选择器查找元素，返回一个数组。
// 返回的对象是返回NodeList，NodeList不会实时更新，开始获取几个元素，之后就是几个元素。
// 即使DOM中有相关元素的变化，也不会触发NodeList的更新。
document.querySelectorAll('.li');
document.createElement('li'); // 创建li标签
document.createTextNode('A04'); // 创建文件节点
5.DOM的事件
<body>
<button id="btn1" onclick="alert('bnt1')">btn1</button>
<button id="btn2">bnt2</button>
<script>
// 通过JavaScript为按钮添加事件。
let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
alert('btn2');
};
</script>
</body>
6.DOM的加载
- 错误的加载方式。
<html lang="en">
<head>
<script>
// 1 网页是自顶向下加载，所以当script标签放在上面时报错。
// 原因是此时DOM还没有加载，所以获取的属于是null。
let btn = document.getElementById('btn');
// 报错 Cannot set properties of null (setting 'onclick')
btn.onclick = function () {
alert('btn');
};
</script>
</head>
<body>
<button id="btn">btn</button>
</body>
</html>
- DOM加载的解决方法。
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
// 1 DOM加载顺序的解决方法。
// 1 将JS代码放在body下面。
// 2 将JS代码放在window.onload中，window.onload会在页面加载完成之后触发。
// 3 将JS代码放在外部文件中，引入外部文件时添加defer属性，如，<script defer src="app.js">
// 添加defer后，会进行延时加载。但是如果<script>中是代码，即使添加了defer属性，也依然不会延时加载。
window.onload = function () {
let btn = document.getElementById('btn');
btn.onclick = function () {
alert('btn');
};
}
</script>
</head>
<body>
<button id="btn">btn</button>
</body>
</html>
7.DOM查询
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 10px;
}
</style>
<script>
// 1 getElementById() 通过标签id获取标签。
// 2 document.getElementsByClassName() 通过标签的class属性获取标签。
// 3 document.getElementsByTagName() 通过标签名获取标签。
window.onload = function () {
// getElementById() 通过标签id获取标签
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
let box1 = document.getElementById('box1');
box1.innerHTML = 'box01';
};
// document.getElementsByClassName() 通过标签的class属性获取标签。
let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
let item = document.getElementsByClassName('li');
for (let i = 0;i < item.length;i++) {
alert(item[i].innerHTML);
}
};
// document.getElementsByTagName() 通过标签名获取标签。
let btn3 = document.getElementById('btn3');
btn3.onclick = function () {
let item = document.getElementsByTagName('li');
for (let i = 0;i < item.length;i++) {
alert(item[i].innerHTML);
}
};
// 获取页面中的所有的元素
console.log(document.getElementsByTagName('*').length); // 10
// document.getElementsByName() 通过标签的name属性获取标签。
let btn4 = document.getElementById('btn4');
btn4.onclick = function () {
let username = document.getElementsByName('username')[0];
// 读取标签的属性值就直接通过.属性名的方式读取。
alert(username.type); // text
// 读取标签的class属性需要通过className获取
alert(username.className); // a b c
// 如果元素的class属性有多个值，可以使用classList获取，classList返回一个数组。
alert(username.classList.length); // 3
};
// 给标签的属性设置值，相当与给对象的属性赋值。
let btn5 = document.getElementById('btn5');
btn5.onclick = function () {
let username = document.getElementsByName('username')[0];
username.value = '张三';
};
}
</script>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
<button id="btn5">btn5</button>
<div id="box1"></div>
<ul>
<li class="li">l1</li>
<li class="li">l2</li>
<li class="li">l3</li>
</ul>
<form action="#">
姓名：<input type="text" name="username" value="tom" class="a b c"> <br>
性别 <input type="radio" class="a b c" name="gender" value="male" > 男
<input type="radio" class="a b c" name="gender" value="female"> 女
</form>
</body>
</html>
8.DOM练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-图片切换练习</title>
<style>
* {
padding: 0;
margin: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: yellowgreen;
text-align: center;
}
</style>
<script>
window.onload = function () {
let prev = document.getElementById('prev');
let next = document.getElementById('next');
let image = document.getElementsByTagName('img')[0];
let info = document.getElementById('info');
let images = ['image/1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg', 'image/5.jpg'];
let index = 0;
info.innerHTML = `当前第${index + 1}张图片，共${images.length}张图片`;
prev.onclick = function () {
index--;
if (index < 0) {
index = 4;
}
info.innerHTML = `当前第${index + 1}张图片，共${images.length}张图片`;
image.src = images[index];
};
next.onclick = function () {
index++;
if (index > 4) {
index = 0;
}
info.innerHTML = `当前第${index + 1}张图片，共${images.length}张图片`;
image.src = images[index];
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info">当前第1张图片，共5张图片</p>
<img src="image/1.jpg">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
9.DOM查询
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
// 1 获取所有的元素
console.log(document.all.length); // 6
console.log(document.getElementsByTagName('*').length); // 6
// 2 获取body元素
console.log(document.body); // body
console.log(document.getElementsByTagName('body')[0]); // body
// 3 获取html元素
console.log(document.documentElement); // html
// 4 获取页面所有的img元素
console.log(document.images.length); // 2
// 5 document.querySelector() 根据CSS选择器来获取一个元素节点。
// 该方法值返回符合条件的第一个元素。
// document.querySelector('div[title]'); 获取有title属性的div。
let div = document.querySelector('div[title]');
div.innerHTML = 'tom';
// 6 document.querySelectorAll(); 获取所有符合CSS选择器的元素。
// document.querySelectorAll('.li'); 获取所有class='li'的元素。
let lis = document.querySelectorAll('.li');
console.log(lis.length); // 4
}
</script>
</head>
<body>
<img src="#">
<img src="#">
<div title="div">
div01
</div>
<div>
div02
</div>
<ul>
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
</ul>
</body>
</html>
10.DOM中元素的获取
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
// 通过getElementsByTagName() 获取当前标签中的元素。
let bnt1 = document.getElementById('btn1');
bnt1.onclick = function () {
let box1 = document.getElementById('box1');
// 获取box1中的p元素。
console.log(box1.getElementsByTagName('p').length);
};
document.getElementById('btn2').onclick = function () {
// childNodes 获取当前元素内的所有子节点，同时空白的文本会被当做一个子节点返回。
console.log(document.getElementById('box2').childNodes.length); // 7
// children 获取当前元素中的所有子元素。
console.log(document.getElementById('box2').children.length); // 3
};
document.getElementById('btn3').onclick = function () {
// 1 获取第一个子节点，包含空白节点
console.log(document.getElementById('box1').firstChild); // #text
// 获取第一个子元素，p标签
console.log(document.getElementById('box1').firstElementChild); // p
// 获取最会一个子节点
console.log(document.getElementById('box1').lastChild); // #text
// 获取最后一个子元素
console.log(document.getElementById('box1').lastElementChild); // p
};
document.getElementById('btn4').onclick = function () {
let p02 = document.getElementById('p02');
// 获取前一个兄弟节点，会获取到空白节点。
console.log(p02.previousSibling); // #text
// 获取前一个兄弟元素。
console.log(p02.previousElementSibling.innerHTML); // A01
// 获取下一个兄弟节点
console.log(p02.nextSibling); // #text
// 获取下一个兄弟元素
console.log(p02.nextElementSibling.innerHTML); // A03
};
document.getElementById('btn5').onclick = function () {
let p01 = document.getElementById('p01');
// 获取标签内的内容。包括html代码
console.log(p01.innerHTML); // <span>p标签</span>
// 获取标签内的内容。不包括html代码
console.log(p01.innerText); // <span>p标签</span>
// 获取标签内的内容。不包括html代码
console.log(p01.textContent); // <span>p标签</span>
// 通过firstChild 获取的是一个文本标签，在通过nodeValue就可以获取到文本的值。
alert(document.getElementById('p03').firstChild); // [object Text]
console.log(document.getElementById('p03').firstChild.nodeValue); // p标签
}
}
</script>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
<button id="btn5">btn5</button>
<div id="box1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p3</p>
</div>
<div id="box2">
<p>A01</p>
<p>A02</p>
<p>A03</p>
</div>
<div>
<p>A01</p>
<p id="p02">A02</p>
<p>A03</p>
</div>
<div>
<p id="p01"><span>p标签</span></p>
<p id="p03">p03</p>
</div>
</body>
</html>
11.JavaScript操作DOM练习，全选、全不选和反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
let items = document.getElementsByName('items');
// 全选
document.getElementById('checkedAllBtn').onclick = function () {
for (let i = 0;i < items.length;i++) {
items[i].checked = true;
}
};
// 提交时时输出选择的内容
document.getElementById('sendBtn').onclick = function () {
for (let i = 0;i < items.length;i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
};
// 全选/全不选
document.getElementById('checkedAllBox').onclick = function () {
for (let i = 0;i < items.length;i++) {
items[i].checked = this.checked;
}
};
// 当足球、篮球、羽毛球和乒乓球都选中时，选中 全选/全不选
for (let i = 0;i < items.length;i++) {
items[i].onclick = function () {
// 获取所有选中的按钮
let allChecked = document.querySelectorAll('[name=items]:checked');
document.getElementById('checkedAllBox').checked = (items.length === allChecked.length);
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提 交">
</form>
</body>
</html>
12.DOM的创建
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
// 创建li标签
let li = document.createElement('li');
// 创建文件节点
let test = document.createTextNode('A04');
li.appendChild(test);
document.getElementById('ul').appendChild(li);
};
document.getElementById('btn02').onclick = function () {
// 第二种向li中添加文本的方式
// 创建li标签
let li = document.createElement('li');
li.innerText = 'AA01';
document.getElementById('ul').appendChild(li);
};
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<ul id="ul">
<li>A01</li>
<li>A02</li>
<li>A03</li>
</ul>
</body>
</html>
13.DOM的插入
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
let list = document.getElementById('list');
let li = document.createElement('li');
li.innerText = 'AA01';
// insertAdjacentElement() 将元素插入到执行元素的指定位置。
// 一共有四个位置
// beforebegin 开始标签前
// afterbegin 开始标签后
// beforeend 结束标签前
// afterend 结束标签后
// 在list标签后插入li标签。
list.insertAdjacentElement('afterbegin', li);
};
document.getElementById('btn02').onclick = function () {
let list = document.getElementById('list');
// list元素开始标签后插入html
list.insertAdjacentHTML('afterbegin', '<li>AAA</li>');
// 在元素指定位置插入文本
list.insertAdjacentText('afterbegin', 'text');
};
document.getElementById('btn03').onclick = function () {
let a02 = document.getElementById('a02');
let li = document.createElement('li');
li.innerText = 'AA02';
// 在a02前插入li
a02.insertAdjacentElement('beforebegin', li);
};
document.getElementById('btn04').onclick = function () {
let list = document.getElementById('list');
let a02 = document.getElementById('a02');
let li = document.createElement('li');
li.innerText = 'AA02';
// 将元素插入到指定元素前
// 父元素.insertBefore(新元素, 元素)
list.insertBefore(li, a02);
};
document.getElementById('btn05').onclick = function () {
let list = document.getElementById('list');
let a02 = document.getElementById('a02');
let li = document.createElement('li');
li.innerText = 'AA02';
// 将指定元素替换为元素
// 父元素.insertBefore(新元素, 旧元素)
list.replaceChild(li, a02);
};
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<button id="btn04">btn04</button>
<button id="btn05">btn05</button>
<!--ul的开始标签前 -->
<ul id="list">
<!--ul的开始标签后 -->
<li>A01</li>
<li id="a02">A02</li>
<li>A03</li>
<!--ul的结束标签前 -->
</ul>
<!--ul的结束标签后-->
</body>
</html>
14.DOM的删除
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-删除DOM</title>
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
let list = document.getElementById('list');
let a02 = document.getElementById('a02');
// 父元素.removeChild(需要删除的元素) 从父节点中删除元素
list.removeChild(a02);
};
document.getElementById('btn02').onclick = function () {
let a02 = document.getElementById('a02');
// 父元素.removeChild(需要删除的元素) 从父节点中删除元素
a02.parentNode.removeChild(a02);
};
document.getElementById('btn03').onclick = function () {
let a02 = document.getElementById('a02');
// remove() 自己删除自己
a02.remove();
};
// 通过修改innerHTML来向元素中添加元素。
document.getElementById('btn04').onclick = function () {
let list = document.getElementById('list');
// 使用这种方式添加元素后，其他元素也会被替换。
// 如果其他元素中绑定了事件，则事件失效。
list.innerHTML += '<li>A004</li>';
// 可以使用insertAdjacentHTML()向元素中添加元素。
//list.insertAdjacentHTML('beforeend', '<li>A004</li>');
};
// 如果使用 list.innerHTML += '<li>A004</li>'; 向元素中添加元素，则之前元素绑定的事件失效。
document.getElementById('a02').onclick = function () {
alert('A0002');
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<button id="btn04">btn04</button>
<ul id="list">
<li>A001</li>
<li id="a02">A002</li>
<li>A003</li>
</ul>
</body>
</html>
15.DOM插入和删除的练习，人员管理插入和删除Demo
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<style>
ul {
list-style-type: none;
}
li {
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th,td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
<script>
window.onload = function () {
let addOnclient = function () {
let tr = this.parentNode.parentNode;
let firstTd = tr.firstElementChild;
// confirm() 弹出确认框。
// 如果确定返回true；取消返回false。
let isDel = confirm(`确实删除${firstTd.innerHTML}`);
if (isDel) {
tr.remove();
}
// 超链接的默认行为是跳转，如果想取消默认行为 return false;
return false;
};
// 获取所有的a标签，并为其添加点击事件。
let as = document.getElementsByTagName('a');
for (let i = 0;i < as.length;i++) {
as[i].onclick = addOnclient;
}
document.getElementById('addEmpButton').onclick = function () {
// 获取输入框的值。
let empName = document.getElementById('empName').value;
let email = document.getElementById('email').value;
let salary = document.getElementById('salary').value;
// 创建标签
let tr = document.createElement('tr');
let empNameTag = document.createElement('td');
let emailTag = document.createElement('td');
let salaryTag = document.createElement('td');
let aTd = document.createElement('td');
let aTag = document.createElement('a');
aTag.innerHTML = 'Delete';
aTd.appendChild(aTag);
// 创建文本节点
let empNameText = document.createTextNode(empName);
let emailText = document.createTextNode(email);
let salaryText = document.createTextNode(salary);
// 将文本节点加入到标签中。
empNameTag.appendChild(empNameText);
emailTag.appendChild(emailText);
salaryTag.appendChild(salaryText);
// 将标签加入到tr中
tr.appendChild(empNameTag);
tr.appendChild(emailTag);
tr.appendChild(salaryTag);
tr.appendChild(aTd);
// 为新创建的a标签添加点击事件。
aTag.onclick = addOnclient;
aTag.href = 'javaScript:;';
// 创建表格时，如果没有指定thead tbody tfoot标签，浏览器会自动创建，并且将tr放入到tbody中。
let tBody = document.getElementById('employeeTable').getElementsByTagName('tbody')[0];
tBody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
16.浅复制和深复制
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
document.getElementById('btn01').onclick = function () {
let a01 = document.getElementById('a01');
// 浅复制，浅复制只会复制标签。
let a02 = a01.cloneNode();
// 深复制，深复制会复制当前标签下的整个DOM树，深复制要谨慎使用，会有性能问题。
let a03 = a01.cloneNode(true);
console.log(a02); // <li id="a01"></li>
console.log(a03); // <li id="a01">a01</li>
}
}
</script>
</head>
<body>
<button id="btn01">btn</button>
<ul>
<li id="a01">a01</li>
</ul>
</body>
</html>
17.getElementsByTagName()和querySelectorAll()的区别
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
let allLi01 = document.getElementsByTagName('li');
let allLi02 = document.querySelectorAll('li');
document.getElementById('btn01').onclick = function () {
console.log(allLi01.length); // 1
console.log(allLi02.length); // 1
// getElementsByTagName() 返回HTMLCollection
console.log(allLi01); // HTMLCollection
// querySelectorAll() 返回NodeList
console.log(allLi02); // NodeList
let a01 = document.getElementById('a01');
let a02 = a01.cloneNode();
a02.innerText = 'a02';
a02.id = 'a02';
a01.appendChild(a02);
// HTMLCollection 是实时更新的。
// NodeList 不是实时更新的，开始时获取到几个就是几个。
console.log(allLi01.length); // 2
console.log(allLi02.length); // 1
}
}
</script>
</head>
<body>
<button id="btn01">btn</button>
<ul>
<li id="a01">a01</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号