如果我们刚才所解释的dom破坏形式不再是单纯的x一层结构，而是x，y这种形式，两层结构，我们该怎么办
举个例子吧
我们的想法是先取x再取y，想法很简单，现实很苦感，看看结果吧
取出来的是undefined，无法取值
但是我们通过另一种方式引入name的话就会有奇效
HTMLCollection 是⼀个element 的“集合”类，在最新的Dom 标准中 IDL 描述如下：
[Exposed=Window, LegacyUnenumerableNamedProperties] interface HTMLCollection { readonly attribute unsigned long length; getter Element? item(unsigned long index); getter Element? namedItem(DOMString name); };⽂中也提到了
HTMLCollection is a historical artifact we cannot rid the web of. While developers are of course welcome to keep using it, new API standard designers ought not to use it (use sequence in IDL instead). 它是⼀种历史产物，并且在今天我们也可以继续使⽤这个类，只是对于API 标准设计者不推荐再使⽤。 关于它的⽤法我们可以去看官方文档：
HTMLCollection - Web API 接口参考 | MDN (mozilla.org)
让我们值得注意的是我们可以通过collection[name] 的形式来调⽤其中的元素，所以我们似乎可以通 过先构建⼀个HTMLCollection ，再通过collection[name] 的形式来调⽤。
很明显通过这种方式我们去实操，取出来了
我们来验证这句话
collection[name] 的形式来调⽤
直接让代码中变为一个元素
很明显集合中是有两个元素的
那我们测试一下通过x取值和通过y取值的效果是什么
x直接是取了整个div
y是把div内部的a取出来了
我们也可以通过利⽤HTML标签之间存在的关系来构建层级关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var log = [];
var html = [
"a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b",
"base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br",
"button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command",
"content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div",
"dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer",
"form", "frame", "frameset", "h1", "head", "header", "hgroup", "hr", "html", "i", "iframe",
"image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li",
"link", "listing", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter",
"multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol",
"optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress",
"q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow",
"slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary",
"sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead",
"time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"
];
var div = document.createElement('div');
for (var i = 0; i < html.length; i++) {
for (var j = 0; j < html.length; j++) {
div.innerHTML = '<' + html[i] + ' id="element1"><' + html[j] + ' id="element2"></' + html[j] + '></' + html[i] + '>';
document.body.appendChild(div); // This line was missing in your original code
if (window.element1 && element1.element2) {
log.push(html[i] + ',' + html[j]);
}
document.body.removeChild(div);
}
}
console.log(log.join('\n'));
</script>
</body>
</html>结果证明这些都可以进行层级嵌套，并且两个里面都可以写id
那么我们试试两层嵌套，接下来的代码x.y是取到它了
<output id=y>I've beenclobbered</output>x是取整个from，废话不多说，开始实践
很明显我们自定义中x.y是取到了中间值
只取x是整个from表单
很明显我们上面的假设成立，那很简单了，我们可以通过这两种方式去进行两层取值，而这种取值的方式标签有以下几种
那么三层关系呢？？？？
我们同样也通过举例来进行说明（将我们上面所说一层和两层的技巧都用到了）
很明显，x是一个集合，x.y把name取出来了，x.z把标签中间的取出来了
验证图：
x.y.z（通过from取id）
单x（集合）
x.y是from
上面不管是单层、双层、三层我们都是通过id和name去进行的，那我们可不可以自创建属性？？
这个问题留给大家作为一个思考题
