收藏
天蓬老师批改状态：合格
老师批语：你的总结是对的
主要有两个方面不一样
1.包含节点的类型
2.使用方法
1.包含节点的类型不同
(1)NodeList一个节点的集合，既可以包含元素和其他节点（注释节点，文本节点等）。(2)HTMLCollection元素集合，只有Element
2.使用方法不同
遍历方式不一样,Nodelist可以用forEach遍历数据
示例
<body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>var cl = console.log.bind(console);var ul = document.querySelector("ul");var eles = [];ul.childNodes.forEach(function (item) {// 只返回类型为1的元素节点if (item.nodeType === 1) this.push(item);}, eles);cl(eles);
HTMLcollection没有forEach，只能用for循环遍历
<body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>var cl = console.log.bind(console);var ul = document.querySelector("ul");for(var i = 0; i < ul.childElementCount; i++) {cl(ul.children.item(i));}</script>
注：onclick为点击事件
事件的添加方式有四种：
<body><button onclick="var text=this.innerText; alert(text);">按钮1</button><body>
<body><button onclick="show(this)">按钮2</button></body><script>function show(ele) {var text = ele.innerText;alert(text);}</script>
<body><button onclick="show(this)">按钮2</button></body><script>var btn4 = document.querySelector("button:nth-of-type(4)");btn4.addEventListener("click",function () {alert(this.innerText);},false);<script>
原理：子元素上的事件会冒泡到父元素上的同名事件上触发，比如click,注意是同名事件。
示例：
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>// 事件委托/代理: 子元素上的事件会冒泡到父元素上的同名事件上触发,只要写父元素的事件就行了document.querySelector("ul").addEventListener("click", function (ev) {cl(ev.target);cl(ev.currentTarget);cl(this === ev.currentTarget);cl("当前触发事件的元素是:", ev.target);// });</script>
NodeList与HTMLCollection的访问与遍历有所区别，他们可以说是一个包含关系。运用场景不一样。事件的委托与代理，应用场景十分的广阔，它可以减少重复DOM的交互次数，这样我们就需要一个内存空间就够了。提高网页性能。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
