目录
笔记
方法的使用
案例一、 动态生成表格
案例二、下拉菜单，鼠标经过和离开实现
案例全部代码
###节点概述
1.网页中的任何内容都是节点——文字、标签、元素、文档等。
节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)三个基本属性
节点的类型nodeType
元素节点：1 ———主要操作
属性节点：2
文本节点：3
2.节点的层级关系
父子兄
父节点：
parentNode 得到的是最近的一个父节点
父节点使用：
element.parentNode 返回的是父节点
子节点：
childNode 得到的是所有的子节点(包括文本等)
children 得到的是所有子元素节点(不包括文本等)——常用
firstChildren lastChildren 得到的是第一个/最后一个子节点(包括文本等)
firstElementChildren lastElementChildren 得到的是第一个/最后一个子元素节点(不包括文本等)
子节点的使用：
element.children 返回的是所有子元素节点
实例：实现下拉菜单——使用节点获取元素操作更方便
兄弟节点：
nextSibling：得到的是下一个子节点(包括文本等)
previousSibling：得到的是上一个子节点(包括文本等)
nextElementSibling：得到的是下一个子元素节点(不包括文本等)
previousElementSibling：得到的是上一个子元素节点(不包括文本等)
3.第一个子元素和最后一个子元素的获取：
ele.children[0] ———— 第一个子元素节点
ele.children[ele.children.length - 1] ———— 最后一个子元素节点###节点的创建、添加、移除、复制
创建节点：
节点是文档创建，创建后一般是要添加到知道地方的
document.createElement('TagName')方法 动态创建元素节点
比如：document.createElement('li')
添加节点：
node.appendChild(child) 方法
在node父节点列表的末尾添加child子节点
比如：ul.appendChild(li) 在ul的子元素列表末尾添加元素节点
node.insertBefore(child,指定元素)方法
在指定元素节点的前面添加子节点元素
比如：ul.insertBefore(li,ul.children[0]) 在ul的第一个子元素节点前面添加元素节点
删除节点：
node.removeChild(child)方法
在node父节点列表删除child子节点
复制节点：
node.cloneChild([child])方法
无参数：浅拷贝 —— 只复制标签 不复制内容
有参数child：深拷贝 —— 标签和标签里的所有内容都复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点创建、添加、删除、复制</title>
<style>
li {
background-color: pink;
margin-top: 20px;
padding: 5px 0;
width: 500px;
}
li button {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>1
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>2
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>3
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>4
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
</ul>
<script>
// 点击添加按钮， 就添加一个li到下面列表中
// 获取事件源
var ul = document.querySelector('ul');
var lis = ul.children;
var aaa = ul.children[0].cloneNode(true);
ul.appendChild(aaa);
// 遍历每个li 找到其中的按钮
for (var i = 0; i < lis.length; i++) {
// 注册添加事件
var addbtn = lis[i].children[1];
addbtn.onclick = function () {
// 创建一个li
var lili = document.createElement('li');
// 并把这个创建的li添加到ul中
ul.appendChild(lili);
}
// 注册删除事件 点击删除按钮，删除的是按钮所在的li 是当前按钮的父节点
var removeBtn = lis[i].children[0];
removeBtn.onclick = function () {
ul.removeChild(this.parentNode); // 移除的是btn的父亲 —— li
}
// 删除添加的元素
var removeAdd = lis[i].children[2];
removeAdd.onclick = function () {
// 从最后一个开始删除
ul.removeChild(ul.children[ul.children.length - 1]);
}
}
</script>
</body>
</html>
在实际中，表格中的数据是从数据库中取得，这里我是用对象模拟得数据。
图中得列表中的行，都是自动生成的
点击按钮可以删除行：
JS部分：
<script>
// 表格的数据应该是数据库中的，暂时用对象模拟数据
var arr = [{
name: '薛',
subject: 'JavaScript',
source: 90
}, {
name: '朱',
subject: 'JavaScript',
source: 80
}, {
name: '张',
subject: 'JavaScript',
source: 90
}, {
name: '赵',
subject: 'JavaScript',
source: 99
}];
// 获取元素 生成的表格是在tbody中
var tbody = document.querySelector('tbody');
// 把数组中的对象信息存入tbody
for (var i = 0; i < arr.length; i++) { //创建行
// 1.创建行 数组中几个对象 就创建几个行
var tr = document.createElement('tr');
// 2.添加行 把行添加到tbody中
tbody.appendChild(tr);
// 创建每一行的单元格 单元格的个数就是对象的属性个数
// 遍历对象 获取属性个数 key 获取的是属性 obj[key]是属性值
for (var key in arr[i]) { // 创建列
// 有一个属性就创建td列
var td = document.createElement('td');
// 获取对象的值作为列的内容
td.innerHTML = arr[i][key];
// 把列添加到行中
tr.appendChild(td);
}
// 3.创建删除链接的单元格
var ass = document.createElement('td');
ass.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(ass);
}
// 表格创建好之后，再进行其他操作
// 4.点击删除按钮，删除链接所在行
// 获取事件源
var aas = document.querySelectorAll('a');
// 因为有多个链接 所有需要循环注册事件
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function () {
// 要删除的是tr a的父亲——td a的父亲的父亲——td的父亲——tr
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
<script>
// 鼠标经过，下拉菜单显示
// 获取事件源
var nav = document.querySelector('.nav');
var lis = nav.children; // nav的子节点就是所有的li li中有链接和下拉列表
// 注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 让第二个子元素节点显示
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
// 鼠标经过，下拉菜单显示
// 获取事件源
var nav = document.querySelector('.nav');
var lis = nav.children; // nav的子节点就是所有的li li中有链接和下拉列表
// 注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// 让第二个子元素节点显示
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 表格的数据应该是数据库中的，暂时用对象模拟数据
var arr = [{
name: '薛',
subject: 'JavaScript',
source: 90
}, {
name: '朱',
subject: 'JavaScript',
source: 80
}, {
name: '张',
subject: 'JavaScript',
source: 90
}, {
name: '赵',
subject: 'JavaScript',
source: 99
}];
// 获取元素 生成的表格是在tbody中
var tbody = document.querySelector('tbody');
// 把数组中的对象信息存入tbody
for (var i = 0; i < arr.length; i++) { //创建行
// 1.创建行 数组中几个对象 就创建几个行
var tr = document.createElement('tr');
// 2.添加行 把行添加到tbody中
tbody.appendChild(tr);
// 创建每一行的单元格 单元格的个数就是对象的属性个数
// 遍历对象 获取属性个数 key 获取的是属性 obj[key]是属性值
for (var key in arr[i]) { // 创建列
// 有一个属性就创建td列
var td = document.createElement('td');
// 获取对象的值作为列的内容
td.innerHTML = arr[i][key];
// 把列添加到行中
tr.appendChild(td);
}
// 3.创建删除链接的单元格
var ass = document.createElement('td');
ass.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(ass);
}
// 表格创建好之后，再进行其他操作
// 4.点击删除按钮，删除链接所在行
// 获取事件源
var aas = document.querySelectorAll('a');
// 因为有多个链接 所有需要循环注册事件
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function () {
// 要删除的是tr a的父亲——td a的父亲的父亲——td的父亲——tr
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点创建、添加、删除、复制</title>
<style>
li {
background-color: pink;
margin-top: 20px;
padding: 5px 0;
width: 500px;
}
li button {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>1
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>2
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>3
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
<li>4
<button>删除元素</button>
<button>添加元素</button>
<button>删除添加的</button>
</li>
</ul>
<script>
// 点击添加按钮， 就添加一个li到下面列表中
// 获取事件源
var ul = document.querySelector('ul');
var lis = ul.children;
var aaa = ul.children[0].cloneNode(true);
ul.appendChild(aaa);
// 遍历每个li 找到其中的按钮
for (var i = 0; i < lis.length; i++) {
// 注册添加事件
var addbtn = lis[i].children[1];
addbtn.onclick = function () {
// 创建一个li
var lili = document.createElement('li');
// 并把这个创建的li添加到ul中
ul.appendChild(lili);
}
// 注册删除事件 点击删除按钮，删除的是按钮所在的li 是当前按钮的父节点
var removeBtn = lis[i].children[0];
removeBtn.onclick = function () {
ul.removeChild(this.parentNode); // 移除的是btn的父亲 —— li
}
// 删除添加的元素
var removeAdd = lis[i].children[2];
removeAdd.onclick = function () {
// 从最后一个开始删除
ul.removeChild(ul.children[ul.children.length - 1]);
}
}
</script>
</body>
</html>