如何只获取 HTML 页面中的属性？

Question

让我们假设 HTML 像这样（属性不固定）：

<input type='text' value='a' name='A' id='A'> <br>
<input type='text' value='b' id='B'><br>
<input type='checkbox' name='C'><br>

我只想获取 HTML 中看到的属性，即从第一个 input 开始：type、value、name , 和 id。从第二个开始，text、value 和 id。等等。并非 DOM 元素的所有属性都像 .attributes 属性那样 return.

虚构代码：

function grab_attributes(element)
{
  var result = {};
  var attributes = element.attributes;
  for(var key in attributes)
  {
    if(is_seen_in_html_page(key))
      result[key] = attributes[i];
  }
  return result;
}

所以（考虑以上HTML作为我们的document）

var e = document.getElementsByTagName("*") [0];
var result = grab_attributes(e);

结果是：

{type: "text", value: "a", name: "A", id: "A"}

我被困在如何定义 is_seen_in_html_page(e) 函数上。我正在寻找尽可能优雅的解决方案，无需正则表达式即可获取该值。

Answer 1

您可以获得元素的 HTML 并以这种方式解析它：

function grab_attributes(el){
    var result = {},
      tag = el.outerHTML, // <input type=...>
      attr = tag.substring( tag.indexOf(' ')+1, tag.indexOf('>') ).split(' '), // ['type="text"',...]
      result = {};
    for(var i = 0, l = attr.length; i<l; i++){
        var item = attr[i].split('='); // [name,value]
        result[ item[0] ] = item[1].substring(1, item[1].length-1);
    }
    return result; // {type: "text", value: "a", name: "A", id: "A"}
}

JS Fiddle Demo

请注意，此方法可能会得到改进。它仅在属性由单个 space 分隔并且开始标记末尾没有“/”时才有效。值也需要用引号括起来。

无论如何，ThW的答案更好。

Answer 2

它们是属性节点，所以它们是Attr的实例。

function grab_attributes(element) {
  var result = {};
  var attributes = element.attributes;
  var attribute;
  for(var key in attributes) {      
    attribute = attributes[key];
    if (attribute instanceof Attr) {
      result[attribute.name] = attribute.value;
    }
  }
  return result;
}

如何只获取 HTML 页面中的属性？

How do I get only the attributes as in HTML the page?

javascript

html

dom

attributes

JS Fiddle Demo