DOM封装

最新推荐文章于 2023-11-22 16:28:23 发布
最新推荐文章于 2023-11-22 16:28:23 发布
阅读量121 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/R1156237641/article/details/118994442
版权

HTML

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM封装-1</title>
    <style>
        .red {
            background: red;
        }
    </style>
</head>

<body>
    <div>
        <div id="test">test
            <p class="red">段落标签</p>
        </div>
        <div id="test2">
            <p class="red">段落标签</p>
        </div>
    </div>
    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="e3"></div>
    </div>
    <div id="siblings">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="e3"></div>
    </div>

    <div id="travel">
        <div id="t1">1</div>
        <div id="t2">2</div>
        <div id="t3">3</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

JS

window.dom = {
    create(string) { //创建一个新的节点
        const container = document.createElement("template"); //可以接纳任意
        container.innerHTML = string.trim(); //trim()可以把字符串两边的字符串去掉
        return container.content.firstChild;
    },
    after(node, node2) {
        node.parentNode.insertBefore(node2, node.nextSibling);
    },
    before(node, node2) {
        node.parentNode.insertBefore(node2, node);
    },
    append(parent, node) {
        parent.appendChild(node)
    },
    wrap(node, parent) {
        dom.before(node, parent)
        dom.append(parent, node)
    },

    //删除
    remove(node) {
        node.parentNode.removeChild(node)
        return node
    },
    empty(node) {
        const { childNodes } = node //const childNodes = node.childNodes
        const array = []
        let x = node.firstChild
        while (x) {
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },

    //改
    attr(node, name, value) { //重载
        if (arguments.length === 3) {
            node.setAttribute(name, value)
        } else if (arguments.length === 2) {
            return node.getAttribute(name)
        }
    },
    text(node, string) { //适配
        //console.log('innerText' in node) 有没有这个节点
        if (arguments.length === 2) {
            if ('innerText' in node) {
                node.innerText = string
            } else {
                node.innerContent = string
            }
        } else if (arguments.length === 1) {
            if ('innerText' in node) {
                return node.innerText
            } else {
                return node.innerContent
            }
        }
    },
    html(node, string) {
        if (arguments.length === 2) {
            node.innerHTML = string
        } else if (arguments.length === 1) {
            return node.innerHTML
        }
    },
    style(node, name, value) {
        if (arguments.length === 3) {
            //dom.style(div, 'color', 'red')
            node.style[name] = value
        } else if (arguments.length === 2) {
            if (typeof name === 'string') {
                //dom.style(div, 'color')
                return node.style[name]
            } else if (name instanceof Object) {
                //dom.style(div, {color: 'red'})
                const object = name
                for (let key in object) {
                    node.style[key] = object[key]
                }
            }
        }
    },
    class: {
        add(node, className) {
            node.classList.add(className)
        },
        remove(node, className) {
            node.classList.remove(className)
        },
        has(node, className) {
            return node.classList.contains(className)
        }
    },
    on(node, eventName, fn) {
        node.addEventListener(eventName, fn)
    },
    off(node, eventName, fn) {
        node.removeEventListener(eventName, fn)
    },

    find(selector, scope) {
        return (scope || document).querySelectorAll(selector)
    },
    parent(node) {
        return node.parentNode
    },
    children(node) {
        return node.children
    },
    siblings(node) {
        return Array.from(node.parentNode.children).filter(n => n !== node)
    },
    next(node) {
        let x = node.nextSibling
        while (x && x.nodeType === 3) {
            x = x.nextSibling
        }
        return x
    },
    previous(node) {
        let x = node.previousSibling
        while (x && x.nodeType === 3) {
            x = x.previousSibling
        }
        return x
    },
    each(nodeList, fn) {
        for (let i = 0; i < nodeList.length; i++) {
            fn.call(null, nodeList[i])
        }
    },
    index(node) {
        const list = dom.children(node.parentNode)
        let i
        for (i = 0; i < list.length; i++) {
            if (list[i] === node) {
                break
            }
        }
        return i
    }
};
//document.createElement('div')
const div = dom.create("<div>newDiv</div>");
console.log(div);

dom.after(test, div);

const div3 = dom.create('<div id="parent"></div>')
dom.wrap(test, div3)


const nodes = dom.empty(window.empty)
console.log(nodes)

dom.attr(test, 'title', 'Hi, I am Frank')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)


dom.text(test, '你好，这是新的内容')
const text = dom.text(test)
console.log(text)

dom.style(test, { border: '1px solid red', color: 'blue' })
console.log(dom.style(test, 'border'))
dom.style(test, 'border', '1px solid black')

dom.class.add(test, 'red')
dom.class.remove(test, 'red')

const fn = () => {
    console.log('点击了')
}
dom.on(test, 'click', fn)
dom.off(test, 'click', fn)

const testDiv = dom.find('#test')[0]
console.log(testDiv)
const test2 = dom.find('#test2')[0]
console.log(dom.find('.red', test2)[0])

console.log(dom.parent(test))

console.log(dom.siblings(dom.find('#e2')[0]))
console.log(dom.next(dom.find('#e2')[0]))
console.log(dom.previous(dom.find('#e2')[0]))

const t = dom.find('#travel')[0]
dom.each(dom.children(t), (n) => dom.style(n, 'color', 'red'))

console.log(dom.index(t2))

小学渣渣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM封装（自己写一个DOM库）
weixin_44809439的博客
10-11 732
前言 DOM提供的api实在是不好用，各种各样的都有，需要记住的又多，特性不一，还要考虑兼容性问题。 在学习DOM原生api的同时，自己封装一套好用的api，即把原生api学会了，又做出一套好用的api； 首先是把声明一个dom全局变量，并挂载在window上。 dom = window.dom 一，增加节点 创建节点dom.create(<div>hi</div>) create(string) { const container = document.createElem
DOM节点的封装
weixin_46907923的博客
03-19 103
寻找所有的元素节点 <div id="box"> <p>A</p> <p id=pare>B</p> <p>C</p> </div> <script> // 寻找所有的元素节点 var box = document.getElementById('box'); var para .
VUE框架MVVM架构思想解析与实现封装dom对象------VUE框架
最新发布
春风若有怜花意，可否许我再少年
11-22 1025
VUE框架MVVM架构思想解析与实现封装dom对象------VUE框架
SpringBoot 依赖包总结
zlh0816
03-27 991
SpringBoot 依赖包总结 名称 描述 spring-boot-starter 核心Starter，包括自动配置支持，日志和 YAML spring-boot-starter-activemq 用于使用 Apache ActiveMQ 实现 JMS 消息 spring-boot-starter-amqp 用于使用 Spring AMQP 和 Rabbit MQ s...
简单实现JS对dom操作封装
10-23
主要介绍了简单实现JS对dom操作封装，需要的朋友可以参考下
常用操作DOM的方法及对象封装
Bidding
08-06 927
1、使用Javascript打印出1-10000之间的所有对称数（例如 121 1331等）【掌握】 代码： function print(start,end) { if (start>end) { return []; } var res=[]; for(var i=start;i var len=i.toString().length; if (i.toString()===
前端教程：62 dom 封装函数
08-30
千锋Web前端教程_62_dom_封装函数
封装获取dom元素的简单实例
11-22
在本文中，我们将深入探讨如何通过封装来简化DOM（Document Object Model）元素的获取和操作。标题中的"封装获取DOM元素的简单实例"是指将常用的DOM操作如获取元素通过ID或标签名等方法，整合到一个自定义的对象或...
Dom4j封装和解析
11-13
本篇将深入探讨Dom4j的封装和解析技术，以及如何利用它来处理XML文件。 **1. Dom4j基本概念** Dom4j是一个基于Java的XML处理库，它的核心是DOM（Document Object Model）模型，但比Java内置的DOM API更加轻量级和...
简单封装js的dom查询实例代码
10-21
下面小编就为大家带来一篇简单封装js的dom查询实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
dom封装函数
cico_new的博客
01-19 635
//封装函数，返回元素e的第n层祖先元素节点 function retParent(elem. n) { while(elem && n) { elem = elem.parentElement; n --; } return elem; } var i = document.getElementsByTagName('i')[0]; //编辑函数，封装myChil
【硬核写DOM库】--简单封装DOM
qq_44906900的博客
10-14 265
封装DOM – 硬核写DOM库 目录 前言 什么是封装 术语 常用功能自己手写DOM封装 封装DOM的总结 附上自己封装DOM库的github仓库 一、前言 【正文】 记住一个事实：原生DOM]很难用！，如果你觉得DOM很傻，不要怀疑自己，相信自己的直觉！API的函数名和属性真的是长的不得了，本来我自己想简单写个原生DOM的博客，没想到就花了我好几个小时的时间去码字，真的是吐了，而且容易被这些函数名给绕晕！好了，废话就到这里了，接下来让我们进入正题吧！ 二、什么是封装 举例 一个电脑就是CPU、
关于封装部分DOM操作的方法
水痕
06-06 929
window.utils = { /////////////////////////////关于DOM操作js开始///////////////////////////////////// /** * 定义一个获取元素的方法 * @param param * @returns {*} */ $$: function(param) {
JS的DOM方法封装库
Renyinyu的博客
04-07 851
由于使用原生JS写代码时，经常需要使用到DOM方法，需要获取各种节点，而且还要处理各浏览器的兼容性。于是封装一个自己的兼容各浏览器的DOM封装库就势在必行了 var utils = (function(){ var flag = "getComputedStyle" in window; function listToArray(arg){ ...
jQuery源码学习---简单dom封装（一）
wujimiao的专栏
02-14 1560
封装简易的dom操作。 一、解决命名空间和变量污染 1.作用域 2.立即执行函数 3.闭包 jQuery是一个类数组对象，里面有各种方法，当然jQuery的dom选择器是sizzle很牛叉，据了解还有更快的dom选择器，实力上去再探索。jQuery使用无new构造函数，可以直接使用$().xx  (function(window){ var wdjs=function(sel
Javascript DOM封装方法汇总
weixin_34150503的博客
12-25 97
一：在页面上增加类和删除类的方法： 增加类：传两个参数 节点和类名 方法如下： functionaddClass(obj,className){ obj.className+=""+className; returnobj; } 删除类 也是传两个参数 节点和类名 然后获取该节点的所有类名并且用正则表达式...
[JavaScript]了解Dom_封装函数
wy1948的博客
08-22 198
日常摸鱼，偶尔学习… 1.获取行内样式 获取行内样式可以通过一下方式，但是以下的方式对于页面的行外样式和外联样式无法获取。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dom—获取当前样式</title> <style> #Div1{ background-color: red; height: 300px; }.
DomDocument使用及简单封装
u013862108的博客
12-14 597
使用场景： 数据库 查出列表等数据 ，生成 xml文件 (!defined('BASEPATH')) exit('No direct script access allowed'); /** * 数组转XML类库 */ class Createnode { public $doc; //文档对象 //必须要提供一个构造函数，不然CI loader在加载过程中会出现
DOM封装函数
chenlunju的专栏
12-17 299
编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。 &lt;script type="text/javascript"&gt; Element.prototype.myChildren = function() { var child = this.childNodes; var len = child.length; var arr = []; for...
JavaScript DOM 高级编程指南
12. **Shadow DOM**：现代Web开发中的重要特性，用于封装组件的内部结构和样式，保持全局CSS的隔离。 桑贝斯的这本书可能还会包含实际案例、最佳实践和高级技巧，帮助读者将理论知识转化为实际项目中的应用。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值