前言
DOM提供的api实在是不好用,各种各样的都有,需要记住的又多,特性不一,还要考虑兼容性问题。
在学习DOM原生api的同时,自己封装一套好用的api,即把原生api学会了,又做出一套好用的api;
首先是把声明一个dom全局变量,并挂载在window上。
dom = window.dom
一,增加节点
创建节点dom.create(<div>hi</div>)
create(string) {
const container = document.createElement("template");
container.innerHTML = string.trim();
return container.content.children[0];
}
思路:用一个template标签,把传进来的内容包裹住,再返回需要创建的标签。
应为可能创建的标签是全部,比如li标签,div不能直接包裹住li标签。
所以template是最合适的。
新增弟弟dom.after(node, node2)
after(node, node2) {
node.parentNode.insertBefore(node2, node.nextSibling);
}
先来熟悉原生api
- insertBefore(node1, node2):把node1插入到node2前面
- node.nextSibling:node的下一个兄弟节点
思路:找到父节点,插入到node后面兄弟节点的前面。
新增哥哥 dom.before(node, node2)
before(node, node2) {
node.parentNode.insertBefore(node2, node);
},
思路:找到父节点,插入到node节点前面
新增儿子 dom.append(parent, child)
append(parent, node) {
parent.appendChild(node);
}
这个差不多只是把单词字母变少了,和原生的api没有本质区别
新增爸爸 dom.wrap(<div></div>)
wrap(node, parent) {
dom.before(node, parent);
dom.append(parent, node);
},
代码很精简,但是理解起来不是很好理解。
举个栗子node1->node2
现在来一个node3,要求不顺序变成node1->node3->node2
思路:把node3插入到node2前面,node2和node3变成兄弟节点,再把node2变成node3的子节点。
删除
删除节点 dom.remove(node)
remove(node) {
node