1. 配置环境
在终端用 yarn 安装 parcel: yarn global add parcel
启动服务器: parcel src/index.html
2. 对象风格(命名空间风格)封装 DOM 操作
window.dom
是我们提供的全局对象
在scr目录中创建index.html, dom.js 和 main.js
<!--index.html-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手写 DOM 封装</title>
</head>
<body>
Halo
<script src="dom.js"></script>
<script src="main.js"></script>
<!--引入dom和main.js-->
</body>
</html>
// dom.js
window.dom = {
create(string){
const container = document.createElement('template');
container.innerHTML = string.trim(); // .trim() 用于把 string 两边多余的空格去掉
return container.content.firstChild;
}
}
// main.js
// 由于 dom 是 window 上但全局属性,所以可以在 main.js 上直接用 dom.create
const div = dom.create(`<td>HI!</td>`)
console.log(div)
main.js 中也可以用<div>
包裹<span>
标签等内容,但是<td>
不能包在<div>
里,所以这里用到了<template>
;
HTML内容模版元素<template>
,在加载页面时不会呈现,但随后可能会在运行时使用JavaScript实例化(may be instantiated subsequently)
3. 功能:创建节点
(1) 创建新节点
dom.create(`<td>HI!</td>`)
,控制台打印出如下字样
(2) 在后面新增一个节点
index.html 中添加 <div id="test">test</div>
// ...dom.js中添加
after(node, node2){
node.parentNode.insertBefore(node2, node.nextSibling);
}
.parentNode.insertBefore(node2, node.nextSibling)
:新增node的弟弟node2 === 新增一个爸爸的小儿子node2 === node2是小儿子,但是由于insertBefore
只能新增哥哥,所以此时新增的node2是哥哥,node后面有node.nextSibling,所以把node2插到node和node.nextSibling之间即可
// main.js
const div = dom.create('<div>弟弟</div>');
console.log(div);
dom.after(test, div);
(3) 在前面新增一个节点
相当于新增一个哥哥,类比上面的方法
// ...dom.js中添加
before(node,node2) {
node.parentNode.insertBefore(node2, node);
}
// ...main.js中添加
const div2 = dom.create('<div>哥哥</div>')
console.log(div2);
dom.before(test,div2);
(4) 新增一个子节点
// ...dom.js中添加
append(parent, node){
parent.appendChild(node)
}
parent.appendChild()
用于新增子节点
// ...main.js中添加
const div3 = dom.create('<div>孩子</div>');
console.log(div3);
dom.append(test,div3);
效果如图
(3) 新增一个父节点(parent)
// ...dom.js中添加
wrap(node, parent){
dom.before(node,parent)
dom.append(parent, node)
}
这里先用dom.before
把新节点插到test前面,成为test的哥哥;然后用dom.append
给新节点涨了辈分,让test变成新节点的儿子,听上去贵圈真乱,为了更好理解,我们重写main.js如下:
// main.js
const div = dom.create('<div>test的弟弟</div>');
const div2 = dom.create('<div>test的哥哥</div>');
const div3 = dom.create('<div>test的孩子</div>');
const div4 = dom.create('<div>test的妈妈</div>');
dom.after(test, div);
dom.before(test,div2);
dom.append(test,div3);
dom.wrap(test,div4);
当然,你也可以使用dom.after
,让新节点先当test的弟弟,再当test的爸妈,为了尽可能减少迷幻色彩,还是长兄为父,让他哥当他妈好了
~本系列未完待续~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!