目前需要做一个需求,那就是需要用户提供一些自定义属性,可以定义的属性比较多,我们就需要把这些自定义属性都要拿到,然后返回给后台。这样做比较符合html5的规范。翻看了一些资料http://www.w3school.com.cn/xmldom/dom_element.asp,找到具体的操作方法。
代码如下:
<div id="id1" att="1" att2="2"></div>
<div id="id2"></div>
<script>
window.onload=function(){
var obj = document.getElementById("id1");
var a1 = "";
for (var i in obj.attributes)
{
var ss = obj.attributes[i];
if(ss && ss["nodeName"] && ss["nodeValue"]){
a1+="<br/>::"+ss["nodeName"]+"-"+ss["nodeValue"]+",";
}
}
document.getElementById("id2").innerHTML=(a1);
}
</script>
在ie6下获取的结果如下:
::id-id1,
::contentEditable-inherit,
::att2-2,
::att-1,
在Chrome 10.0.648.204下获取的结果如下:
::id-id1,
::att-1,
::att2-2,
在firefox3.6.16得到的结果如下:
::att2-2,
::att-1,
::id-id1,
可以看到自定义属性都拿到了,对于共用属性id,那就需要去除掉,对于ie还需要去掉contentEditable这个属性,不明白IE为啥把这个给单列出来了。
ie其他版本没有没有测试。
分享到:
相关推荐
2、可以根据属性标签进行筛选 3、返回的都是Llist强类型无需转换 用过XElement的都知道 用来解析XML非常的方便,但是对于HTML的格式多样化实在是没办法兼容。 所以我就写了这么一个类似XElement的 XHTMLElement ...
只需一个简单的mixin,即可将老式的内联事件处理程序属性和属性添加到自定义元素中! 默认情况下,内联事件处理程序属性仅适用于(例如onclick用于click事件, onchange用于change事件),但是使用OnEventMixin可以...
babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...
Shadow是从HTMLElement继承的Web组件和自定义元素的基类。 快速开始 编译example/my_example.ts : deno bundle --config example/tsconfig.json example/my_example.ts > example/my_example.js 服务index.html...
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is ...
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 代码如下: ”some>Test</div> [removed] div.getAttribute(‘data’); // some data [removed] 给页面中div添加了自定义属性“data”及值“some data”。...
连续操作HTMLElement对象图文解决方法.docx
* HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle
主要介绍了如何判断元素是否为HTMLElement元素。需要的朋友可以过来参考下,希望对大家有所帮助
Object.prototype.***不能用作在HTMLElement对象上,如本后面的抓图所示。
赛普拉斯风格断言
确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
确定HTMLElement的最大可伸缩尺寸。 该库的工作方式在目标元素之前添加一个较大,并强制进行。 因此,不支持,因为它们永远不能包含该子。 另外,由于没有渲染光树,因此不自动支持具有shadowRoot元素,但是有一种...
自定义元素样式 创建自定义元素后,自动将样式注入到它的 Shadow DOM ... create ( HTMLElement . prototype )}styles ( CustomElement , ` h1 { color: red; text-transform: uppercase; }` )CustomElement . prototyp
确定对象是否为HTMLElement (来自任何Realm )。 安装 >= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; CommonJS模块:...
康宝方舟 实用的Web组件库 介绍 ... 该类只是HTMLElement自定义元素类之上的一个瘦包装,并且可以在您自己的应用程序代码中进行扩展以创建新组件。 参考 主题化 为了主题化,可以使用: 基本的 次要的
htmlelement.polyfills 用于HTMLElement接口的轻量级香草JavaScript polyfills htmlelement.polyfills库为上一些最常用的DOM交互提供了轻量级的香草JavaScript polyfills。 用法: 安装htmlelement.polyfills包 ...
它提供了一组自定义规则,可以对声明从HTMLElement扩展的类的文件强制执行这些规则。要求节点14.x安装$ npm install --save-dev eslint eslint-plugin-custom-elements设置将custom-elements添加到您的ESLint配置中...