js--getElementsByTagName

二、getElementsByTagName
全线浏览器兼容的,得到元素的方法,就这两个:
document.getElementById()       		通过id得到元素
document.getElementsByTagName();   	通过标签名得到元素们

getElementsByTagName就是通过标签名得到元素,得到的是页面上所有该种标签元素,得到的是数组,数组可以有下标,开始是0,最后一项是.length-1
既然是数组,就能通过循环语句批量控制,比如表格的隔行变色:
1			var otrs = document.getElementsByTagName("tr");
2
3			for(var i = 0 ; i < otrs.length ; i+=2){
4				otrs[i].style.backgroundColor = "yellowgreen";
5			}

假如页面上只有一个p标签,那么得到的也是数组。
1		var op = document.getElementsByTagName("p")[0];
2
3		op.style.backgroundColor = "red";


2.2 连续打点调用get
先去选择一个HTML标签,然后选择这个HTML标签中的所有p标签:
1var ps = document.getElementById("box2").getElementsByTagName("p");

连续get可以很疯狂,但是如果是数组,一定要加上下标,才能变成对象:
1document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("span")[1].style.color = "red";


for循环包裹添加监听的语句。
对序号的影响,闭包的影响又出现了:

1for(var i = 0 ; i < ps.length ; i++){
2	ps[i].onclick = function(){
3		alert("我是老" + i + "点我干嘛?!!");
4	}
5}
所以每个盒子点击之后,都是7了,而不是我们预想的0、1、2、3、4、5、6。
闭包的影响:匿名函数定义的时候,已经记住了自己认识i,但是认识i不是表示把i的值赋值了一份记住,而是真真正正的认识了鲜活的、有生命的i。所以匿名函数执行的时候(就是事件发生时)i已经是7。

解决这个事情:
1for(var i = 0 ; i < ps.length ; i++){
2	(function(m){
3		ps[m].onclick = function(){
4			alert("我是老" + m + "点我干嘛?!!");
5		}
6	})(i);
7}


除了IIFE之外,还有一种方法,就是强制添加属性的方法:
任何一个对象,我们都可以通过点语法来设置新的属性。
1		for(var i = 0 ; i < ps.length ; i++){
2			ps[i].idx= i;	 //先不要着急设置监听,先编号
3			
4			ps[i].onclick = function(){
5				alert("我是老" + this.idx+ "点我干嘛?!!"); //自己的编号
6			}
7		}

---------------------------------------------------------------------------------
2.3 补充一个小知识点,ele.innerHTML属性就是HTML标签内部的文本。可以读,可以设。
---------------------------------------------------------------------------------
2.4 所有window对象的方法,都可以不用写window
现在我们要学习一个小知识,所有window对象的方法,都可以不用写window。至于window对象是什么,我们后面课程介绍。
比如,alert方法是window对象的方法,所以我们可以简写:
1window.alert("哈哈哈");
等价于
1alert("哈哈哈");

得到计算后的样式,可以直接使用getComputedStyle函数,而不用写window.
1getComputedStyle(oDiv).getPropertyValue("width")

1getComputedStyle(oDiv).getPropertyValue("padding-left")

getPropertyValue看上去就像打它,看着就不爽,所以可以简写:
1getComputedStyle(oDiv)["padding-left"]

---------------------------------------------------------------------------------
2.5 window.getComputedStyle(oDiv).getPropertyValue("width")
现在我们只能得到行内的样式,事实上DOM提供了可靠的API,得到计算后的样式。

W3C制定的标准API,所有现代浏览器(包括IE9,但不包括之前的版本)都实现了window.getComputedStyle(),该方法接收一个要进行样式计算的元素,并返回一个样式对象。样式对象提供了一个名为getPropertyValue()的方法,用于检索特定样式属性的计算样式。getPropertyValue方法接收css属性名称,而不是驼峰式的名称。getPropertyValue()可以不写,直接用方括号来检索属性也可以。

get得到,computed计算后,style样式
get得到,property属性,vaule值
比如:
1window.getComputedStyle(oDiv).getPropertyValue("width")

总结:
1高级:
2window.getComputedStyle(oDiv).getPropertyValue("padding-left");
3getComputedStyle(oDiv).getPropertyValue("padding-left");
4getComputedStyle(oDiv)["padding-left"];
5
6IE6、7、8:
7oDiv.currentStyle.paddingLeft;
8oDiv.currentStyle["paddingLeft"];

 

JS-WPSParser 是一个基于 JavaScript 的库,它允许你在 Web 环境下解析和操作 WPS (WordPerfect Open XML) 文件,这是一种类似 Microsoft Word 文档的文件格式。这个库主要是针对那些需要在网页上处理或展示 WPS 文件,但又不想依赖浏览器内嵌 Office 应用的情况。 使用 JS-WPSParser 处理 .wps 文件的一般流程如下: 1. **安装和引入库**: - 如果使用 npm,可以在终端或命令行中运行 `npm install js-wpsparser` 来安装。 - 然后,在你的 Vue.js 项目中通过 `import` 导入: ```javascript import * as wps from 'js-wpsparser'; ``` 2. **加载和解析文件**: - 首先,你需要获取到文件的内容,可能是从本地文件系统、服务器或其他途径。 - 使用 `wps.parse` 函数解析文件内容: ```javascript const parser = new wps.Parser(); parser.parse(fileContent); // 将你的 WPS 文件内容传入这里 ``` 3. **访问和操作文档结构**: - 解析完成后,你可以通过 `parser.doc` 对象访问到整个文档的结构,包括段落、表格、图片等元素。 - 例如,获取文档标题可以这样做: ```javascript const title = parser.doc.getElementsByTagName('w:t')[0].textContent; ``` 4. **显示解析结果**: - 根据需要,你可以选择将解析后的数据渲染到页面上,比如创建一个 HTML 结构来展示。 注意:由于 JS-WPSParser 是基于 Node.js 的库,所以在浏览器环境中需要使用诸如 iframe 或者 web worker 这样的技术间接使用。此外,它的功能受限于WPS文件的具体结构,对于复杂的格式可能无法完全解析。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值