html页面解析

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

 

posted @ 2023-06-16 14:10  奥兰王子  阅读(18)  评论(0编辑  收藏  举报