任务1：获取父节点
任务要求：parentNode属性的使用
任务实现：
<body>
<div>
<h1>
<span class="child">span元素</span>
</h1>
<script>
var child = document.querySelector(".child");
console.log(child.parentNode);
</script>
</body>
任务2：获取子节点
任务要求：掌握获取子节点的常用属性
任务实现：页面中有一个ul无序列表，根据子节点的特征，采用不同的属性获取子节点。
任务实现：
<body>
<ul>
<li>我是li中的文本1</li>
<li>我是li中的文本2</li>
<li>我是li中的文本3</li>
</ul>
<script>
var ul = document.querySelector("ul");
//获取当前节点的首个子节点
console.log(ul.firstChild);
//获取当前节点的首个子元素节点
console.log(ul.firstElementChild);
//获取当前节点的所有子节点的集合
console.log(ul.childNodes);
//获取当前节点的所有子元素节点的集合
console.log(ul.children);
</script>
</body>
任务3：获取兄弟节点
任务要求：掌握获取兄弟节点的常用属性
任务实现：在页面中定义3个div元素，获取第2个div元素的兄弟节点和兄弟元素节点。
任务实现：
<body>
<div>第一个</div>
<div class="second">第二个</div>
<div>第三个</div>
<script>
var second = document.querySelector(".second");
//获取当前节点的上一个兄弟节点
console.log(second.previousSibling);
//获取当前节点的下一个兄弟节点
console.log(second.nextSibling);
//获取当前节点的上一个兄弟元素节点
console.log(second.previousElementSibling);
//获取当前节点的下一个兄弟元素节点
console.log(second.nextElementSibling);
</script>
</body>
任务4：创建并添加节点
任务要求：掌握创建节点和添加节点的方法。
效果如下图所示：
任务实现：在页面中定义无序列表，通过单击不同按钮在列表的不同位置添加div元素 节点。
任务实现：
<body>
<ul>
<li>第1个Li元素</li>
<li>第2个li元素</li>
</ul>
<button>appendChild()方法</button>
<button>insertBefore()方法</button>
<script>
var ul = document.querySelector("ul");
var btn = document.querySelectorAll("button")
btn[0].onclick = function () {
var div = document.createElement("div");
div.innerHTML = "通过appendChild()方法新添加的节点";
ul.appendChild(div);
};
btn[1].onclick = function () {
var div = document.createElement("div");
div.innerHTML = "通过insertBefore()方法新添加的节点";
ul.insertBefore(div, ul.children[1])
}
</script>
</body>
任务5：移除节点
任务要求：掌握移除节点的方法
任务实现：通过removeChild()方法移除页面中的指定节点。
任务实现：
<body>
<ul>
<li>第1个li元素</li>
<li>第2个li元素</li>
</ul>
<button>移除ul元素中的第2个li元素节点</button>
<script>
var ul = document.querySelector("ul");
var btn = document.querySelector("button");
btn.onclick = function () {
ul.removeChild(ul.children[1]);
}
</script>
</body>
任务6：简易留言板
任务要求：
留言板具有发表留言和展示留言的功能，并且可以对展示的留言进行删除。
效果图下图所示：
任务分析：
搭建页面结构。
实现单击“发布”按钮发表留言的功能。
实现删除留言功能。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="message.css">
</head>
<body>
<div>
<h1>留言板</h1>
<ul></ul>
<textarea placeholder="请编辑您的留言"></textarea>
<button class="sub">发布</button>
</div>
<script>
//获取元素
var btn = document.querySelector(".sub");
var text = document.querySelector("textarea");
var ul = document.querySelector("ul");
//注册事件
btn.onclick = function () {
if (text.value == "") {
alert("您没有输入内容！");
return false;
} else {
//创建li元素节点
var li = document.createElement("li");
li.innerHTML = text.value;
var button = document.createElement("button");
button.className = "remove";
button.innerHTML = "删除";
button.onclick = function () {
ul.removeChild(this.parentNode);
};
li.appendChild(button);
//在ul元素中添加节点
ul.insertBefore(li, ul.children[0]);
//将文本域中的内容清空
text.value = "";
}
};
</script>
</body>
</html>
CSS样式文件下载：
任务7：复制节点
任务要求：掌握复制节点方法的使用
任务实现：在页面中搭建一个用于展示水果的无序列表，通过单击按钮将列表中的第1个元素节点复制到新的无序列表中。
任务实现：
<body>
<ul id="myList">
<li>苹果</li>
<li>橙子</li>
<li>橘子</li>
</ul>
<ul id="op"></ul>
<button>点我</button>
<script>
var btn = document.querySelector("button");
btn.onclick = function () {
var item = document.getElementById("myList").firstChild;
console.log(item);
var cloneItem = item.cloneNode(true);
document.getElementById("op").appendChild(cloneItem);
};
</script>
</body>
原创视频
