Javascript 无法在节点列表上声明自定义方法。活动节点列表的原型
有人能指出为什么该示例只适用于静态节点列表方法“querySelectorAll”？ 我想创建一个helper函数来帮助迭代活动节点列表中的子节点。但是，如果我尝试对活动节点列表使用dom查询方法，即使用“getElementsById”和getElementsById，我会得到“myList.on不是函数” 我得到的唯一回应是在收集点发现无用的拼写错误Javascript 无法在节点列表上声明自定义方法。活动节点列表的原型,javascript,Javascript,有人能指出为什么该示例只适用于静态节点列表方法“querySelectorAll”？ 我想创建一个helper函数来帮助迭代活动节点列表中的子节点。但是，如果我尝试对活动节点列表使用dom查询方法，即使用“getElementsById”和getElementsById，我会得到“myList.on不是函数” 我得到的唯一回应是在收集点发现无用的拼写错误 <!DOCTYPE html> <html lang="en"> <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NodeList Rocket Science</title>
<style>
li {
list-style: none;
width: 1em;
padding: .5em;
border: 1px solid #000;
border-radius: 1em;
}
li:hover {
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
<script>
// Static NodeList - Works, but not method 'getElementsByClassName' or 'getElementById' for live NodeLists!?
const $items = document.querySelectorAll('.item')
// HTMLCollection of a live NodeList, produces "Uncaught TypeError: $items.on is not a function"
// const $items = [...document.getElementsByClassName('item')]
console.log('$items', $items)
NodeList.prototype.on = function (eventType = '', func = () => {}) {
this.forEach(
($item = undefined) =>
$item.addEventListener(eventType, func, false)
)
}
const log = (event = {}, eventTarget = event.target) =>
console.log(`Clicked node ${ eventTarget.tagName } containing ${ eventTarget.textContent }`)
$items.on('click', log)
</script>
NodeList火箭科学
李{
列表样式：无；
宽度：1米；
填充：.5em；
边框：1px实心#000；
边界半径：1米；
}
李：悬停{
字体大小：粗体；
光标：指针；
}
- 1
- 2
- 3
//静态节点列表-对活动节点列表有效，但方法'GetElementsByCassName'或'getElementById'无效！？
const$items=document.querySelectorAll（'.item'）
//活动节点列表的HTMLCollection生成“未捕获类型错误：$items.on不是函数”
//const$items=[…document.getElementsByClassName（'item'）]
console.log（'$items'，$items）
NodeList.prototype.on=函数（eventType=''，func=（）=>{}）{
这是forEach(
（$item=未定义）=>
$item.addEventListener（事件类型，函数，false）
)
}
const log=（event={}，eventTarget=event.target）=>
log（`Clicked node${eventTarget.tagName}包含${eventTarget.textContent}`）
$items.on（'click'，log）
AddEvent（）AddEvent（）NodeList.prototype.AddEvent=函数（func）{
for（设i=0；i
名单组
addEventAddEvent