getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素,返回的是 htmlcollection 类型,是伪数组而不是真数组,故不能使用数组的方法。
我们可以使用数组原型配合 slice 方法,利用 call,apply,bind 方法将伪数组转为真数组。
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
console.log(y)//在控制台我们可以看到原型proto为htmlcollection,是伪数组
HTMLCollection 转数组的方法:
//伪数组转为真数组方法1
console.log(Array.prototype.slice.call(y))//在控制台我们可以看到原型proto为Array(0),是真数组
//伪数组转为真数组方法2
console.log(Array.prototype.slice.apply(y))//在控制台我们可以看到原型proto为Array(0),是真数组
//伪数组转为真数组方法3
console.log(Array.prototype.slice.bind(y)())//在控制台我们可以看到原型proto为Array(0),是真数组
https://www.runoob.com/js/js-htmldom.html
var x=document.getElementById("ww");
var objText = Array.prototype.slice.call(y);
objText[0].innerText
objText[0].innerHTML
[].map.call(document.getElementsByTagName('img'), function (img){ return img.src;})
[].map.call(document.getElementsByTagName('A'), function (img){ return img.href;})
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
https://developer.mozilla.org/en-US/docs/Web/Events
https://developer.mozilla.org/zh-CN/docs/Web/Events
ES6规范
https://www.tutorialspoint.com/es6/es6_events.htm
http://t.zoukankan.com/
http://t.zoukankan.com/IwishIcould-p-14587793.html
html 官方资料
https://html.spec.whatwg.org/multipage/
https://html.spec.whatwg.org/multipage/indices.html#events-2
https://html.spec.whatwg.org/multipage/indices.html#http-headers
标签:slice,数组,img,html,https,Array,解析,页面 From: https://www.cnblogs.com/wzihan/p/16839183.html