首页 > 其他分享 >html页面解析

html页面解析

时间:2023-06-16 14:23:30浏览次数:40  
标签:slice 数组 img html https Array 解析 页面

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

相关文章

  • vue+html2canvas生成寄几想要的海报
    需求:点击弹出一个弹窗,其中是某个作品内容的海报,需要呈现作品的内容+二维码 思路:获取作品内容渲染到弹窗中,生成包含分享链接的二维码,将整个界面转为图片,用户可以长按保存,并扫描识别。 方案及步骤:1.引入html2canvas实现生成图片的功能npminstall--savehtml2canvas 2......
  • .nupkg格式解析
    .nupkg格式是NuGet包的标准打包格式。NuGet是用于在.NET开发中共享和管理代码、工具和库的包管理器。.nupkg文件实际上是一个压缩文件,其内部包含了NuGet包的相关内容。下面是.nupkg文件的组成部分:__metadata:该文件夹包含与包相关的元数据信息,例如包的ID、版本号、......
  • Qt+QtWebApp开发笔记(六):http服务器html实现静态相对路径调用第三方js文件
    前言  前面做了一些交互,网页是直接通过html对response进行返回的,这里QtWebApp与传统的web服务器不同,传统的web服务器可以调用同级目录相对路径或者绝对路径下的js,而QtWebApp的httpserver是response返回当前页面的问题,默认是无法调用的。  为了解决调用一些依赖的如echarts......
  • 页面会话技术介绍,什么是Cookie和Session
    页面会话技术Cookie什么是cookie:服务端保存在浏览器端的数据片段。以key/value的形式进行保存。每次请求的时候,请求头会自动包含本网站此目录下的cookie数据。网站经常使用这个技术来识别用户是否登陆等功能。用途:保存登录状态,购物车等缺点:做为请求或响应报文发送,无形中......
  • 微信小程序—智能小蜜(基于智能语义解析olami开放平台)
    概述该程序支持功能有查天气、查诗词、查百科、算算术、查日历、看笑话、看故事、聊天等,通过用户输入语句智能解析用户意图输出相应答案。详细一、准备工作1、电脑需要安装有微信web开发者工具,如果没有请点击这里安装:下载地址2、成为微信小程序开发者,需要用到appID,详......
  • Vue项目入门实战(07)-想让你的Vue页面更炫酷?来学习样式绑定吧
    1class的对象绑定1.1需求现在要实现点击div区域里的helloworld文本时,文本变成红色。1.2实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue中的样式绑定</title><scriptsrc="../vue.js&q......
  • 通过python封装接口获取淘宝商品页面数据、淘宝商品详情数据
    可以使用GET或POST方法,请求参数中应包含商品详情页面数据、标题、价格、图片、库存、销量等信息。解析返回的response中的HTML页面或JSON格式数据,提取需要的商品信息,如商品标题、价格、评价人数等。使用pandas库将提取的商品信息保存到数据框中,以方便后续处理和分析。......
  • 基于HTML5的chrome,firefox预览本地图片(扩展IE兼容)
    http://www.zhangxinxu.com/wordpress/?p=1923第一篇<scripttype="text/javascript"language="JavaScript"src="http://qingfengxia2.blog.163.com/blog/jquery.js"></script><scripttype="text/javascript"......
  • url欺诈--HTML5无刷修改url
     window.history.pushState({},0,'http://'+window.location.host+'/'+url); url--要修改的网址a标签欺诈<script>window.onclick=function(){       //触发单击事件,修改链接  document.links[0].setAttribute('href','http://google.com');}&......
  • html canvas写字并右对齐
    functionPaintText(x,y,color,size,text,toLeft){if(toLeft==undefined){toLeft=true;}y+=size;ctx.font="normal"+size+"pxarial";ctx.fillStyle=color;if(toLeft){ctx.fillText(text,x,y);}......