DOM映射机制

1.形参跟arguments

arguments是所有实参的集合（类数组对象），与形参无关
arguments与形参有映射机制

//当形参与实参长度一致时，arguments与形参有映射机制
function test(a, b, c) {
console.log(arguments)  //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  arguments[0] = 100
console.log(arguments)  //Arguments(3) [100, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(a, b, c)  //100, 2, 3
}
test(1, 2, 3)
//当实参数量比形参数量少时，多余的形参与arguments不存在映射关系。即使改变形参的值，对应的arguments[i]仍然是undefined。

2.DOM的映射机制：

页面中的html元素和js中通过相关方法获取到的元素或者元素对象存在映射关系（一个修改另一个也跟着修改）
xxx.style.color = 'red' //就是使用映射机制
使用document.getElementById()等方法获取元素也有映射机制的存在

<ul>
	<li>迪迦</li>
	<li>佐菲</li>
	<li>赛文</li>
	<li>泰罗</li>
	<li>杰克</li>
	<li>艾斯</li>
	<li>初代奥特曼</li>
</ul>

let ul = document.querySelector("ul")
let li = document.querySelectorAll("li")
let node = document.createElement("li")
node.appendChild(document.createTextNode('欧布'))
ul.appendChild(node)
console.log(li.length);  //7

上面代码可以看出通过querySelectorAll拿到的li元素长度并没有发生改变，还是之前长度，并且当修改li样式时，新增的元素也不会改变

<ul>
	<li>迪迦</li>
	<li>佐菲</li>
	<li>赛文</li>
	<li>泰罗</li>
	<li>杰克</li>
	<li>艾斯</li>
	<li>初代奥特曼</li>
</ul>

let ul = document.querySelector("ul")
let li = document.getElementsByTagName("li")
let node = document.createElement("li")
node.appendChild(document.createTextNode('欧布'))
ul.appendChild(node)
console.log(li.length);  //8

使用getElementsByTagName类似的方法不会有这种映射切断的风险存在。