dom-element-attribute-agent-proxy

基于 proxy 封装的对于 dom 元素的 attribute 的读写操作库

安装方法

yarn add https://github.com/masx200/dom-element-attribute-agent-proxy.git

或者

cnpm install  --save https://github.com/masx200/dom-element-attribute-agent-proxy.git

API

declare function createeleattr(ele: HTMLElement): Record<string, any>;

使用方法

import createeleattr from "@masx200/dom-element-attribute-agent-proxy";
var element1 = document.querySelector(
    "div.Popover.anim-scale-in.js-tagsearch-popover"
);
var attribute1 = createeleattr(element1);
attribute1.testarray = [1, "sssssssq"];
console.log(attribute1.testarray);
console.log(Reflect.ownKeys(attribute1));
console.log(attribute1.class);
attribute1["data-tagsearch-ref"] = "master";
console.log(Object.entries(attribute1));
attribute1.class = new Set(["wwwwwwwww1", "sssssssq"]);
attribute1.style = { display: "block", width: "500px" };
console.log(attribute1.style);
attribute1.style = "display:block;width:500px;height:100px";
console.log(attribute1.style);

设置attributes类型说明

style属性支持类型为string|Record<string,string>

class属性支持类型为string|Array<string>|Set<string>

其他属性支持Set<any>|Array<any>|string|Record<string,string>|Object

如果设置属性的值为类型Object,则将其用JSON.stringify转换成string类型

更新 : 添加了对于 input元素中 type="checkbox" 的 checked 的读写操作,

更新 : 添加了对于 input 和 textarea和select元素 的 value 的读写操作,

支持style 属性的对象类型和字符串类型

更新：style属性支持驼峰命名法和横杠命名法，自动转换成字符串

更新 :添加了 class 属性对于 Array 和 Set 的支持,也增加了其他属性对于 Set 转 Array 的支持

关于 Proxy

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy