封装一个可以获取元素文本内容的函数
这次给大家带来封装一个可以获取元素文本内容的函数，封装一个可以获取元素文本内容函数的注意事项有哪些，下面就是实战案例，一起来看一下。
A.1 逻辑步骤
目标: 获取某元素的 所有同级+元素节点
S1 获取某的父元素节点 + 其所有子节点
S2 声明将要返回的伪数组对象
S3 去除本身传入的元素节点
S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
S5 返回这个伪数组
A.1 具体代码
<body> <ul> <li id="item1">选项1</li> <li id="item2">选项2</li> <li id="item3">选项3</li> <li id="item4">选项4</li> <li id="item5">选项5</li> </ul> </body>
//S5 封装为函数(API)
function getSiblings(node){
var allChildren = node.parentNode.children; //S1 获取li的父元素节点 + 其所有子节点
var array = {length:0}; //S2 声明将要返回的伪数组对象
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // S3 去除本身传入的元素节点
array[array.length] = allChildren[i]; // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
array.length += 1;
}
}
// console.log(array); // {0:li#item1, 1:li#item2......}
return array; // S6 返回这个伪数组
}A.2 逻辑步骤
目标: 批量给元素添加/移除类名
S1 遍历对象的key值
S2 当类名的值为ture时，添加类名; 否则则去除
A.2 具体代码
function addClass(node, classes){
// var classes = {'a':true, 'b':false, 'c':true} //S1 构造要传入的类名对象
for (let key in classes){ //S2 遍历对象的key值
value = classes[key];
// if (value){ //S3 当类名的值为ture时，添加类名
// node.classList.add(key);
// }else{
// node.classList.remove(key);
// }
// 以上 if/else可以优化为
var methodName = value ? 'add':'remove';
node.classList[methodName](key);
}
}B 添加上命名空间，就是
window.mydom = {};
mydom.getSiblings = function getSiblings(node){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
mydom.addClass = function addClass(node, classes){
classes.forEach( (value)=> node.classList.add(value) );
}`
调用方法就是 mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
而希望的调用方法是item3.getSibling() / item3.addClass('['a', 'b'])
C.1 this+原型链
Node.prototype.getSiblings = function getSiblings(){
var allChildren = this.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== this){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
Node.prototype.addClass = function addClass(classes){
classes.forEach( (value)=> this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )C.2 node2函数_对象模式
window.Node2 = function(node){ //要挂载到全局window上，才能直接访问
return {
getSiblings: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )C.3 模拟一个简化的jQuery
window.jQuery = function(nodeOrSelector){
let node;
if (typeof nodeOrSelector === 'string'){ //类型检测
node = document.querySelector(nodeOrSelector); //只支持返回一个节点
} else {
node = nodeOrSelector;
}
return{
getSibligs: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])C.4 支持传入 一个/多个节点
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// for (let i = 0; i < nodes.length; i++){
// classes.forEach( (value) => nodes[i].classList.add(value) );
// }
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
return nodes
}
//调用效果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );D 添加其他功能
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
// 获取元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 获取其文本内容，并推送到存储的 数组;
// S3 返回数组
nodes.getText = function(){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent); //获取元素节点内容并推入到数组
}
return texts
}
// 设置元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 设置其文本内容为传入的参数内容
nodes.setText = function(text){
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
// 合并为一个接口
// S1 判断是否传入了参数, 传入了就是设置，没传入就是读取
nodes.text = function(text){
if (text === undefined){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent);
}
return texts
} else {
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
}
return nodes
}
// 调用结果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );
// 获取文本内容
// var text = node2.text();
// console.log(text);
// 设置文本内容
node2.text('hi');相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
EasyCanvas绘图库在Pixeler项目开发中使用实战总结
以上是封装一个可以获取元素文本内容的函数的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
谷歌安全码在哪里获取
Mar 30, 2024 am 11:11 AM
谷歌验证器是一种用于保护用户账户安全的工具，其密钥是用于生成动态验证码的重要信息。如果忘记了谷歌验证器的密钥，只能通过安全码进行验证，那么下文本站小编就将为大家带来谷歌安全码在哪里获取的详细内容介绍，希望能帮助到大家，想要了解的用户们就请跟着下文继阅读吧！首先打开手机设置，进入设置页面。下拉页面，找到Google。进入Google页面，点击Google账号。进入账号页面，点击验证码下方的查看。输入密码或者使用指纹验证身份。获得Google安全码，利用安全码验证谷歌身份。
可以删除downloads文件夹吗？
Feb 19, 2024 pm 03:38 PM
downloads可以删除吗近年来，随着数字化时代的来临，我们生活中出现了越来越多的数字化产品和服务。而随之而来的，就是我们对于数字化内容的需求与日俱增。在日常生活和工作中，我们经常需要下载各种各样的文件，如文档、图片、音频和视频等等。而这些下载的文件，通常都被保存在一个名为“downloads”（下载）的文件夹之中。然而，随着时间的推移，我们经常会发现，“
i34150搭配1G独显适合玩哪些游戏(i34150适用于哪些游戏)
Jan 05, 2024 pm 08:24 PM
i34150搭配1G独显能玩哪些游戏能玩lol等小游戏。GTX750和GTX750TI是非常合适的显卡选择。如果只是玩一些小游戏或者不玩游戏，建议使用i34150的集成显卡就可以了。一般来说，显卡和处理器的搭配差价并不是很大，所以选择合理的搭配是很重要的。如果需要2G显存，推荐选择GTX750TI；如果只需要1G显存，直接选择GTX750即可。GTX750TI可以看作是GTX750的增强版本，具有超频功能。i34150可以搭配什么显卡根据需求，如果你打算玩单机游戏，建议你考虑更换显卡。你可以选择
即刻获取最新更新：修复缺少最新更新问题
Nov 08, 2023 pm 02:25 PM
如果“最新更新可用后立即获取最新更新”选项缺失或灰显，则你可能正在运行开发人员频道Windows11版本，这是正常的。对于其他人，安装KB5026446（22621.1778）更新后会出现问题。您可以采取以下措施来取回“在最新更新可用时立即获取更新”选项。如何取回“在最新更新可用时立即获取更新”选项？在开始以下任何解决方案之前，请确保检查最新的Windows11更新并安装它们。1.使用ViVeTool转到“Microsoft更新目录”页面并查找KB5026446更新。在您的PC上下载并重新安装更
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
真我 12 Pro怎么安装双卡？
Mar 18, 2024 pm 02:10 PM
虽然说国产手机的大致操作是很相似的，但是在有的细节上面还是会有些区别的，比如说不同的手机型号和制造商可能会有不同的双卡安装方式。二真我12Pro这款新手机也是支持双卡双待的，但是这款手机具体又应该怎么安装双卡呢？真我12Pro怎么安装双卡？在安装之间记得先把手机关机哟。步骤一查找SIM卡托盘：查找手机的SIM卡托盘,通常，在真我12Pro中，SIM卡托盘位于手机的侧边或顶部。步骤二插入第一张SIM卡，使用专用的SIM卡针或一个细小的物体，将其插入SIM卡托盘中的开槽,然后，将第一张SIM卡小心地
快速获取屏幕高度的jQuery技巧
Feb 24, 2024 pm 06:30 PM
jQuery技巧：快速获取屏幕高度的实现方式在网页开发中，经常会遇到需要获取屏幕高度的情况，比如实现响应式布局、动态计算元素尺寸等。而使用jQuery可以很便捷地实现获取屏幕高度的功能。下面就来介绍一些使用jQuery快速获取屏幕高度的实现方式，并附上具体的代码示例。方法一：使用jQuery的height()方法获取屏幕高度通过使用jQuery的height
CSS过渡效果：如何实现元素的滑动效果
Nov 21, 2023 pm 01:16 PM
CSS过渡效果：如何实现元素的滑动效果引言：在网页设计中，元素的动态效果能够提升用户体验，其中滑动效果是一个常见而又受欢迎的过渡效果。通过CSS的过渡属性，我们可以轻松实现元素的滑动动画效果。本文将介绍如何使用CSS过渡属性来实现元素的滑动效果，并提供具体的代码示例，以帮助读者更好地理解和应用。一、CSS过渡属性transition的简介CSS过渡属性tra
