数组；DOM；节点

最新推荐文章于 2022-07-14 17:29:13 发布
最新推荐文章于 2022-07-14 17:29:13 发布
阅读量691 收藏
点赞数
分类专栏： JS 文章标签： 前端 JS dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dduan6506/article/details/64438871
版权

1.下拉菜单比span有优势，可以直接得到value值

<script>
    window.onload= function(){
        //需求：select的更改联动con-middle的背景图，yellow-star，con-bottom的更改
        //步骤：1，获取事件源；2，绑定事件；3，书写事件驱动程序
        //1;
        function$(id){returndocument.getElementById(id);}
        //获取星星和文字的数组；
        vararrStar =[10,6,3,5,2,6,4,3,7,8,9,7];
        vararrTxt =["白羊座的内容","金牛座的内容","双子座的内容","巨蟹座的内容","狮子座的内容","处女座的内容","天秤座的内容","天蝎座的内容","射手座的内容","摩羯座的内容","水瓶座的内容","双鱼座的内容"];
        //2;
        $("con_sele").onchange= function(){
            //3;
            //更改背景图;
            $("con_icon").style.backgroundPosition= "0 "+(-this.value*50)+"px";
            //更改星星；
            $("con_star").style.width= arrStar[this.value]*8+ "px";
            //更改内容；
            $("con_txt").innerHTML= arrTxt[this.value];
        }
    }
</script>

<divclass="con-middle-menu">
    <selectname=""id="con_sele">
        <optionvalue="0">白羊座03.21-04.19</option>
        <optionvalue="1">金牛座04.20-05.20</option>
        <optionvalue="2">双子座05.21-06.21</option>

   </select>
</div>


2.数组的常用方法

  数组的添加和删除

<script>
    //在数组的后面放入；
    vararr = [1,3,5];
    arr.push(7,9);
    console.log(arr);
    /*==========注释==========*/
    //在数组前面放入；
    vardom = [1,2,3,4];
    dom.unshift(0);
    console.log(dom);
    console.log(dom.push(7));//返回的是数组的长度
    /*==========注释==========*/
    //删除最后一个数组；
    vararr1 = [3,8,4];
    arr1.pop();
    console.log(arr1);
    console.log(arr1.pop());//返回的是最后一个数组
    /*==========注释==========*/
    //删除第一个数组；
    vararr2 = [2,4,3,7];
    arr2.shift();
    console.log(arr2);
    console.log(arr2.shift());
</script>

 

数组的转换

<script>
    //数组的连接；
    vararr = [1,2,3,4];
    vardom = [5,6,7,8,"a","c"];
    console.log(arr.concat(dom));
    //数组转换成字符串；
    vartxt = ["aa","bb","cc"];
    console.log(txt.join("-"));
    console.log(txt);
    //字符串转换成数组；
    vararr2 = "a-b-c";
    console.log(arr2.split("-"));
</script>

 

3.DOM

封装自己的class类名

<script>
    window.onload= function(){
        //封装自己的class类名;
        functiongetClass(classname){
            //支持的浏览器
            if(document.getElementsByClassName){
                returndocument.getElementsByClassName(classname);
            }
            //不支持的浏览器
            vararr =[];//用于存放满足的数组
            vardom =document.getElementsByTagName("*");
            for(vari =0;i <dom.length;i++){
                if(dom[i].className== classname){
                    arr.push(dom[i]);
                }
            }
            returnarr;
        }
        console.log(getClass("demo").length);
    }
</script>

 <div></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>

 

封装自己的class类名分割版

window.onload= function(){
    functiongetClass(classname){
        //支持浏览器；
        if(document.getElementsByClassName){
            returndocument.getElementsByClassName(classname);
        }
        //不支持浏览器；
        vararr =[];
        vardom =document.getElementsByTagName("*");
        for(vari =0;i <dom.length;i++){
            //分割类名，转换成数组；
            varTest =dom[i].className.split(" ");
            for(varj =0;j <Test.length;j++){
                if(Test[j]== classname){
                    arr.push(dom[i]);
                }
            }
        }
        returnarr;
    }
    console.log(getClass("test").length);
    varchange = getClass("test");
    for(vari =0;i <change.length;i++){
        change[i].style.backgroundColor= "purple";
    }
}

 <divclass="demo"></div>
<div  class="demo test"></div>
<div></div>
<div></div>
<divclass="test demo"></div>
<div></div>
<div></div>
<divclass="one test demo two"></div>
<div></div>
<div></div>

 

类添加id

window.onload= function(){
    functiongetClass(classname,id){
        //支持;
        //有id的情况；
        if(id){
            vareleId =document.getElementById(id);
            returneleId.getElementsByClassName(classname);
        }else{
            returndocument.getElementsByClassName(classname);
        }
        //不支持的情况；
        //有id的情况；
        if(id){
            vareleId =document.getElementById(id);
            returneleId.getElementsBytagName("*");
        }else{
            returndocument.getElementsByTagName("*");
        }
        vararr =[];
        for(vari =0;i < dom.length;i++){
            vartxt = dom[i].className.split(" ");
            for(varj =0;j <txt.length;j++){
                if(txt[j]==classname){
                    arr.push(dom[i]);
                }
            }
        }
        returnarr;
    }
    varaa = getClass("test","one");
    for(vari =0;i <aa.length;i++){
        aa[i].style.backgroundColor= "purple";
    }
}

 <divclass="demo"></div>
<div  class="test"></div>
<div></div>
<divid="one">
    <divclass="demo test one"></div>
    <divclass="demo one"></div>
    <div></div>
    <divclass="demo"></div>
    <divclass="one two test"></div>
</div>
<div></div>
<div></div>
<div></div>

 

4.节点

兄弟节点

window.onload=function(){
    //兄弟节点；
    varone =document.getElementById("one");
    vartwo =one.nextElementSibling|| one.nextSibling;
    two.style.backgroundColor= "red";
}

 <ul>
    <li>123123</li>
    <li>123123</li>
    <liid="one">123123</li>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
</ul>

 

孩子节点

<ulid="ul">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<script>
    varul = document.getElementById("ul");
    varone = ul.childNodes;
    //alert(one.length);
    for(vari = 0;i < one.length;i++){
        if(one[i].nodeType== 1){
            one[i].style.backgroundColor= "red";
        }
    }
</script>

 

孩子节点--children

<ulid="ul">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<script>
    varul = document.getElementById("ul");
    varone = ul.children;
    alert(one.length);
</script>

 

节点操作

<divid="demo">
    <divid="da"></div>
</div>
<script>
    vardemo = document.getElementById("demo");
    varchildrens = demo.children;
    //创建节点；创造节点就要添加节点；
    varone = document.createElement("div");
    //添加节点；
    demo.appendChild(one);//放到最后一个孩子的后面；
    //创建节点；
    vartwo = document.createElement("div");

    //inserBefore必须写满两个参数;
    demo.insertBefore(two,childrens[0]);//放到第一个孩子的前面；
    demo.insertBefore(two,null);//放到最后一个；
    //移除节点；
    demo.removeChild(two);
    //克隆节点；
    varlast = childrens[0].cloneNode();
    demo.appendChild(last);
    demo.parentNode.appendChild(demo.cloneNode(true));
</script>

 

nodeType == 1    元素节点     

nodeType == 2    属性节点

nodeType == 3    文本节点

给火锅个面子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js数组 DOM
weixin_30788731的博客
09-11 237
JS数组 数组对象的作用是：使用单独的变量名来存储一系列的值。数组的创建方式： 1、数组直接量（字面量）形式创建数组； 2、通过构造函数Array()创建数组； 注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。 对象没有length属性 3、访问...
（100）数组节点
革命队伍的螺丝钉
05-24 1190
Add Item（添加项目） Add Item(添加项目) 取入一个数组和一个变量。它将该变量插入到数组的尾部，并相应地增加数组的大小。 Clear（清除） Clear 节点将清除相连接的数组中的所有数据，重置数组，并删除数组中的所有索引值。 Contains Item（包含项目） Contains Item（包含项目） 节点允许搜索一个数组来查找特定
dom操作方法（数组）
shua_1990的博客
05-12 1092
数组属性 constructor 引用数组对象的构造函数 length 返回数组的长度 prototype 通过增加属性和方法扩展数组定义 数组方法（ECMAScript3） ...
动力节点——数组（十九）
qq_36440274的博客
01-24 382
一，数组的概述 1，定义 数组就是存储相同数据类型的多个元素的容器。 2，特点 A，数组是一个容器，装东西数据使用。 B，数组中的数据必须是相同的数据类型。 C，数组中在定义时可存储数据的个数一旦固定，则不能再被改变。 3，数组的定义： 数组元素类型[]    数组名称    或者    数组元素类型    数组名称[] 4，数组的初始化
JavaScript遍历标签（遍历DOM数组）
『愚』的博客
11-16 6998
很多时候我们经常会同时操作多个DOM对象，此时，可以使用循环来遍历DOM数组。 假如我们有这样的需求： 把所有的p标签的字体变为蓝色，字体大小为25px 把列表的奇数行的颜色变为红色 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>这是第一个p
基本DOM节点操作
11-26
element.childNodes：返回该元素的子节点数组。注意：换行在浏览器中作为text节点，需要进行过滤 element.firstChild：该元素的第一个子节点。 element.lastChild：该元素最后一个子节点。 3、父节点 element...
Vue Render函数创建DOM节点代码实例
10-15
在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签...
获取HTML DOM节点元素的方法的总结
01-21
令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过...
jQuery获取DOM节点实例分析(2种方式)
11-22
// 方式1：使用数组索引获取DOM节点对象 alert($tmp[0].innerText); // 方式2：使用get()函数获取DOM节点对象 alert($tmp.get(0).innerText); ``` 在这个示例中，`$tmp[0]`和`$tmp.get(0)`都用于获取刚创建的`div...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
在JavaScript（JS）前端开发中，掌握页面加载事件、数组操作、DOM节点操作以及循环和分支结构是非常重要的。下面将详细讲解这些知识点。 1. **页面加载事件**： - `window.onload` 事件是在整个页面包括所有资源...
javascript把创建的节点放入数组中，再从数组中删除节点
程宇寒
12-10 1026
javascript把创建的节点放入数组中，再从数组中删除节点 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;把创建的节点放入数组中，再从数组中删除节点&lt;/title&gt; &lt;link rel="stylesheet&quot
什么是DOM + 获取页面元素 + 类数组转成数组的方式 + 一些数组的方法(entries,keys)
weixin_47075145的博客
07-14 985
文档对象模型（Document Object Model），简称DOM,是一种标准的编程接口.文档对象模型 DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口W3C已经定义了一些列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。DOM树： 注：1.文档：一个页面就是一个文档，DOM中使用document表示2.元素：页面中所有标签都是元素，DOM中用element使用3.节点：网页中所有内容都是节点(标签，属性，文本，注
ES6中用数组方法遍历DOM
michael8512的博客
11-29 5773
最新的浏览器提供了一个名为querySelectorAll()的原生DOM方法，可以达到jQuery获取DOM的效果，例如 href var a=document.querySelectorAll("#content a");此处的a即为div中的所有a标签元素。但是这里的a为一个DOM集合，要想准确获取a标签，则应该用a[0]表示，但是这里的a虽然能用数组的方法，却不是一个标准数组。
1-DOM中-类数组对象遍历(转换)为数组
Bug_money的博客
11-13 5762
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
js04DOM操作和数组详解
会飞的小鹿
07-06 795
前言 看着这个浮夸的标题是不是觉得不靠谱，因为我是在想不出什么非常好的题目！这一节的内容我将记录自己对于jsDOM操作的一些心得，一些数组方面的操作！ 常见的DOM操作 Node类型 在DOM1级里定义了一组节点类型，每个节点都有一个nodeType属性，用于表明节点在DOM中扮演的角色，同时每一个类型对应着一个值，文档中的每一个节点一定属于其一： NodeTyp...
jsdom元素、数组以及排序
qq_42481626的博客
05-22 231
js dom元素的事件 js 事件（js的事件前缀都带on） 键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件 <1>onkeydown(键盘按下) onkeyup(抬起) onkeypress(按键) <2>onfocus(获得焦点) onblur（失去焦点） <3> onclick（单击） ondbclick（双击） onmouseleav...
你可能不知道的JavaScript 遍历DOM的几种方法
热门推荐
Quiet-Night的博客
11-02 2万+
你可能不知道的JavaScript 遍历DOM的几种方法
Neo4j创建有数组属性的节点
Hurpe
04-13 5436
因为最近再搞竞品这个东西，某些用户可能安装了不止一个竞品，但最好能都放一个属性里，所以就用数组来装这些竞品。 创建节点 create (u:User{name:'Ma',age:23,compare:['Neo4j','MySQL','ArangoDB']}) return n 创建好了节点，查询 match (n:User) where 'MySQL' in n.compare...
JQuery 遍历对象（DOM,数组，JSON）方法
鸟叔
04-16 4032
1、遍历DOM对象 $('div').each(function(){ alert($(this).attr('id'));//这里$(this)就是正在遍历的子对象 }); 2、遍历JSON对象 $.getJSON( '/admin/index.php?app=cate_recommend&act=ajax_get_child_
uniapp 获取dom节点
最新发布
03-29
在uniapp中，可以使用以下方法获取dom节点： 1. 通过id获取： 在模板中设置id，例如： ``` <view id="myView"></view> ``` 然后在js中通过以下方式获取： ``` let myView = uni.createSelectorQuery().select('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值