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

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

本文关键字：属性 HTML 获取      更新时间：2024-03-11

让我们假设一个像这样的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。等等。并不是像.attributes属性这样的DOM元素的所有属性都会返回。

假想代码：

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)函数。我正在寻找一个尽可能优雅的解决方案，不需要正则表达式来获得这些值。

它们是属性节点，因此是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并通过以下方式进行解析：

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演示

请注意，此方法可能会有所改进。只有当属性由一个空格分隔，并且在打开标记的末尾没有"/"时，它才会起作用。值也需要用引号括起来。

无论如何，ThW的答案要好得多。

相关文章：