JavaScript DOM 创建元素 移除元素 克隆元素
前端 JavaScript DOM 和 BOM 学习目录
4. DOM attribute property style属性 className属性 classList属性 Data
DOM 创建元素
使用 document.write 创建元素（不推荐）
通过前面的了解我们是可以了解到，以前的创建元素的方式使用的是我们的 document.write 来实现的创建元素
使用这种方式的话是可以非常简便的创建页面中的元素
但是对于我们的比较复杂的内容以及元素之间的关系建立就不是非常的方便了
这个是早期没有 DOM 提供的创建元素的方式，最终还是保留到了现在，但是实际开发中使用这种模式进行开发是很不方便的
使用 innerHTML 来实现创建元素（不推荐）
当我们实现使用这个方法的时候，我们的含有的一个弊端就是
innerHtml 原本就是用来实现设置元素中的内容实现
如果说原本一个元素中是含有我们的内容的，那么就会导致内容被替代，导致原本存在的内容消失
所以说这个方法就不是很推荐的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box"> hello world </div> <script> // 开始实现我们的获取元素 var boxEl = document.querySelector('.box') // 先使用我们的早期在一个元素中创建元素的方式一 boxEl.innerHTML = ` <h2>我是标题</h2> ` // 但是这种方式的是具有一个弊端的，因为这种模式是设置的是我们的一个元素中的内容，原本的内容直接被替换了 </script> </body> </html>
使用 createElement(elementName)
这个时候就是实现的是是实在的直接创建一个我们的元素
实现的步骤就是：
- 首先是需要先进行创建一个元素出来
- 然后使用需要插入的元素实现最终的添加即可
实现插入元素的方法
method desc base_use node.append(...nodes or strings) 在该 node 末尾插入节点或者字符串 boxEl.append(h2El) node.prepend(...nodes or strings) 在该 node 开头插入节点或者字符串 boxEl.prepend(h2El) node.before(...nodes or strings) 在该 node 前面插入节点或者字符串 boxEl.before(h2El) node.after(...nodes or strings) 在该 node 后面插入节点或者字符串 boxEl.after(h2El) node.replaceWith(...nodes or strings) 将该 node 替换为给定的节点或者字符串 boxEl.replaceWith(h2El) 实际上的话，我们的 document 这个文档对象指的是我们的 根元素开始文档
所以说也是可以通过我们的某个元素来实现操作我们的 DOM 的
**boxEl.querySelector("span") **这个就是表明的是在 boxEL 中寻找我们的 span 元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box"> hello world </div> <script> // 开始实现我们的获取元素 var boxEl = document.querySelector('.box') var h2El = document.createElement('h2') h2El.className = "title" h2El.classList.add('active') h2El.textContent = '我是标题' // 实现创建了元素后，我们就直接向指定容器实现插入元素即可 boxEl.replaceWith(h2El, "hahaha") </script> </body> </html>
DOM 移除元素
我们的移除元素的方法含有多种，可以移除本身，还可以实现移除自己的子元素
method desc base_use node.remove() 实现的是将自己的 node 进行移除 boxEl.remove() node.removeChild(...nodes or strings) 实现的是将本身 node 中的子元素实现移除 boxEl.removeChild(removeEl) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box"> <h2>hello world</h2> <button>按钮</button> </div> <script> // 开始实现我们的获取元素 var boxEl = document.querySelector('.box') // 开始实现获取我们的需要被移除的元素 var removeEl = boxEl.querySelector('h2') // 获取我们的控制元素是否移除的按钮 var ctrl_btn = boxEl.querySelector('button') // 添加监听事件: 下面的监听模式就是等价于我们的 ctrl_btn.onclick = function() {} ctrl_btn.addEventListener('click', function () { boxEl.removeChild(removeEl) }) </script> </body> </html>
DOM 克隆元素
就是实现的是我们的直接克隆一个节点
cloneNode 使用了直接直接实现返回一个新的节点
**node.cloneNode(true) **实现的是我们的将本 node 实现克隆操作，在函数内部传入一个 true ，就是开启我们的深度克隆
boxEl.cloneNode(true)
最后一份代码，有自己独到见解的，可以再继续加和优化，使用这个案例只是为了让大家知道，书写一个程序的时候，这些可以抽象出来的
方法，都是可以实现抽离的，来提高我们的代码的复用，虽然我的这个抽离反倒弄麻烦了很多操作 😄 😄 😄
// 开始我们的抽离一些可以直使用的 DOM 操作代码
export class DealDOM{
/**
* 构造函数
* @param container_element
* @param css_selector
* @param tagName
*/
constructor(container_element, css_selector, tagName) {
this._container_element = container_element; // 就是我们当前需要操作的 DOM 容器元素
this._child_element = null // 就是当前需要操作的子元素
this._css_selector = css_selector
this._tagName = tagName
}
/**
* 获取需要进行操作的子元素
* @param css_slector
* @returns {Node | ActiveX.IXMLDOMNode}
*/
_getChild_element(css_slector) {
this._child_element = this._container_element.querySelector(css_slector);
return this._child_element;
}
/**
* 对后续需要进行操作的子元素进行克隆操作的辅助函数
* @param element
* @returns {Node | ActiveX.IXMLDOMNode}
*/
_clone_container_element(element) {
return element.cloneNode(true);
}
/**
* 实现的是我们的创建一个元素
* @param css_selector
* @param tagName
* @returns {{child_ele: (any|Node|ActiveX.IXMLDOMNode), clone_child_ele: (Node|ActiveX.IXMLDOMNode)}}
*/
_createElement(css_selector, tagName) {
let child_ele = this._getChild_element(css_selector)
child_ele = child_ele ? document.createElement(tagName) : this._getChild_element(css_selector)
const clone_child_ele = this._clone_container_element(child_ele)
return {
child_ele: child_ele,
clone_child_ele: clone_child_ele
}
}
/**
* 实现移除元素
* @param element
*/
removeEle(element) {
if (element && element.parentNode) element.parentNode.removeChild(element)
}
/**
* 默认的添加元素
*/
appendEle() {
const createEle = this._createElement(this._css_selector, this._tagName).child_ele
this._container_element.append(createEle)
}
/**
* 在元素开头添加元素
*/
beforeEle() {
const createEle = this._createElement(this._css_selector, this._tagName).child_ele
this._container_element.before(createEle)
}
/**
* 在元素末尾添加元素
*/
afterEle() {
const createEle = this._createElement(this._css_selector, this._tagName).child_ele
this._container_element.after(createEle)
}
/**
* 在元素前进行添加元素
*/
prependEle() {
const createEle = this._createElement(this._css_selector, this._tagName).child_ele
this._container_element.prepend(createEle)
}
/**
* 替换元素操作
*/
replaceWithEle() {
const createEle = this._createElement(this._css_selector, this._tagName).child_ele
this._container_element.replaceWith(createEle)
}
/**
* 设置元素的 CSS 样式
* @param element
* @param styles
*/
setStyle(element, styles) {
Object.assign(element.style, styles);
}
/**
* 设置元素的属性
* @param element
* @param attributes
*/
setAttributes(element, attributes) {
Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
}
/**
* 设置元素的文本内容
* @param element
* @param text
*/
setText(element, text) {
element.textContent = text;
}
/**
* 设置元素的 HTML 内容
* @param element
* @param html
*/
setHTML(element, html) {
element.innerHTML = html;
}
/**
* 绑定事件处理器
* @param element
* @param eventType
* @param handler
*/
bindEvent(element, eventType, handler) {
element.addEventListener(eventType, handler);
}
/**
* 添加类
* @param element
* @param className
*/
addClass(element, className) {
element.classList.add(className);
}
/**
* 移除类
* @param element
* @param className
*/
removeClass(element, className) {
element.classList.remove(className);
}
/**
* 切换类
* @param element
* @param className
*/
toggleClass(element, className) {
element.classList.toggle(className);
}
}
