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和{{1} }。从第二个开始，id，text和value。等等。并非像id属性这样的DOM元素的所有属性都会返回。

虚构代码：

.attributes

所以（考虑上面的HTML作为我们的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; }）

document

结果是：

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

我坚持如何定义{type: "text", value: "a", name: "A", id: "A"}功能。我正在寻找一个优雅的解决方案，没有正则表达式来获得这些价值。

Answer 1

它们是属性节点，因此它们是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;
}

Answer 2

您可以获取元素的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

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

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

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

2 个答案:

JS Fiddle Demo