首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js常用方法和一些封装(3) -- dom相关

js常用方法和一些封装(3) -- dom相关

作者头像
剽悍一小兔
发布于 2018-05-17 04:05:46
发布于 2018-05-17 04:05:46
1.7K00
代码可运行
举报
运行总次数:0
代码可运行

js一个非常重要的作用就是对dom进行操作,所谓的dom,可以理解为html代码里的一个个节点。比如,body标签元素就是一个dom。本文对js的dom操作进行一些总结。

按照惯例,先上一个刚写好的小例子,代码在最后给出:

1.gif

现在,来看看js对dom的一些操作吧。

首先,给出一个html模板,接下来开始用js来做一些有趣的事情吧,css样式的绘制就不细说了,先上代码:

css
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
*{margin: 0;padding: 0;}
.parent {
    width: 305px;
    height: 302px;
    background: #d7e6ea;
    margin: 100px auto;
    
}
.parent .child {
    width: 80px;
    height: 80px;
    background: deepskyblue;
    float: left;
    margin-top: 10px;
    margin-left: 9px;
    margin-right: 12px;
    margin-bottom: 12px;
    box-shadow: 3px -3px 2px #9898c7;
    text-align: center;
    line-height: 80px;
    font-family: "微软雅黑";
    font-size: 28px;
    text-shadow: 2px 2px 2px yellowgreen;
}
html
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <div class='parent'>
        <div class='child'>1</div>
        <div class='child'>2</div>
        <div class='child'>3</div>
        <div class='child'>4</div>
        <div class='child'>5</div>
        <div class='child'>6</div>
        <div class='child'>7</div>
        <div class='child'>8</div>
        <div class='child'>9</div>
    </div>
</body>
效果图

Paste_Image.png

从代码中,我们可以看到,body是一个大节点,里面套了一个class属性为parent的div盒子,然后我们又在这个盒子里面放了9个小盒子。

1.最简单的dom方法封装

在本系列中,假设我们不考虑用jQuery。 现在给第三个盒子添加一个id。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id='targetBox' class='child'>3</div>

如何拿到这个盒子呢? 很显然,最先想到的肯定是document.getElementById() 方法,于是就有了这样的代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var box = document.getElementById('targetBox');
box.style.background = '#FEAF51';

效果:

Paste_Image.png

当然,我们很多时候都不希望每次都把document.getElementById(id)给写一遍,那么,是不是可以将这一个过程封装起来呢?

于是,自然而然的,我们会这么写:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取JavaScript的dom对象
function dom(id){
    return document.getElementById(id);
};

var box = dom('targetBox');
box.style.background = '#FEAF51';

完美运行,我们知道,在jQuery中,是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var box = $('#targetBox');

那么,为了让代码更加山寨,不妨将dom方法稍微改进一下嘞!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取JavaScript的dom对象
function dom(id){
    if(id.toString().indexOf('#') != -1) {
        id = id.replace('#','');
    }
    return document.getElementById(id);
};

var box = dom('#targetBox');
box.style.background = '#FEAF51';

2.如何获取dom元素在父盒子中的位置?

刚才,我们已经获得了编号为3的div盒子,要得到它在父盒子的角标位置,首先肯定要拿到它的父盒子对象吧。

像这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var box = dom('#targetBox');
var parent = box.parentElement;

parent打印出来是这样的:

Paste_Image.png

看来很顺利呢,接下来因为要知道目标元素在父盒子的位置,则需要拿到父盒子所有的孩子节点。

像这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var children = parent.children;

打印结果:

Paste_Image.png

接下来就要遍历这些孩子节点啦,children 的数据类型是object。 然而,在js中我们可以遍历数组,却无法直接遍历object,咋办呢?

原来,这是一个特殊的object,因为它有一个length属性。有length属性的object,可以通过以下方式转换成数组(注:当然,这边也可以直接获取获取object中的length,然后来遍历。):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Array.prototype.slice.call(object);

举个例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var obj ={length:2,0:'first',1:'second'};
objArr = Array.prototype.slice.call(obj);
alert(objArr);

结果:

Paste_Image.png

注1: length是几个,就转换几个,如果你length写1,那么只弹出first。 注2: key必须为数字,而且与数组的角标是对应的。

这里不深究call的的意思,我会在以后重新写这方面的内容。

回到正题,现在可以拿到数组形式的children了!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var children = Array.prototype.slice.call(parent.children);

开始遍历:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for(var i = 0,len = children.length;i < len;i++){
    if(children[i] == box){
        alert(i);
    }
}

结果:

Paste_Image.png

弹出来下标是2,因为数组下标的起始值是从0开始的。

上面的循环结构还欠缺了一个东西,就是一旦找到box之后,因为及时退出循环才是。像这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for(var i = 0,len = children.length;i < len;i++){
    if(children[i] == box){
        alert(i);
        break;
    }
}

这样便可以一定程度地提高性能。顺便附上forEach的写法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
children.forEach(function(child,index){
    if(child == box){
        alert(index);
        return false;
    }
});

这样也可以,最后,将这些内容封装成方法,就采用forEach的方式吧!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//查找当前dom元素在父盒子中的位置
function getIndex(dom){
    var index = -1;
    var domArr = Array.prototype.slice.call(dom.parentElement.children);
    domArr.forEach(function(obj,i){
        if(obj==dom){
            index = i;
            return false;
        }
    });
    return index;
};

我学习js的路线就是如此,先想尽办法把功能实现了,然后才开始封装成方法。封装的好处不言而喻,没有人喜欢每次用到这个功能的时候,就去把实现代码拷贝一份吧。

3.如何获取parent下面指定class的元素列表?

parent盒子下面有9个孩子节点,我们能否通过一个什么办法获取到这9个孩子节点呢?显然,这些孩子节点都有一个共同的className,那么我们可以通过这个className来获取。

IE9 + 已经可以通过下面的方式来实现了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var children = parent.getElementsByClassName('child');

效果:

1.gif

IE678还是不支持的,那么,如果让我们自己来封装一个方法,又该如何呢?

这里提供一种思路: 1.用getElementsByTagName获取parent元素下所有的节点。 2.遍历这些节点,比较className,如果相同,就用一个数组装起来。 3.返回这个数组。

上代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*通过className获取dom元素进行过滤*/
function getClass(pid,sClass){
    var aEle = dom(pid).getElementsByTagName('*');
    var arrs = [];
    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className.indexOf(sClass)!=-1){
            arrs.push(aEle[i]);
        }
    }
    return arrs;
}

最后,附上最开始小例子的源码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
               *{margin: 0;padding: 0;}
            body {
                background: url(https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/12.jpg?2) no-repeat;
                background-size: 100% 128%;
                overflow: hidden;
            }
            .content {
                height: 600px;
                width: 305px;
                margin: 100px auto;
                position: relative;
                border-top:8px solid #ccc;
                border-right:10px solid #ccc;
            }
            
            .content .screen {
                height: 298px;
                width: 305px;
                background: #333;
                position: absolute;
            }
            .content .screen .icon {
                width: 78px;
                height: 78px;
                display: inline-block;
                background: url(android.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -39px;
                margin-left: -39px;
            }
            
            .parent {
                width: 305px;
                height: 302px;
                background: #d7e6ea;
                position: absolute;
                bottom: 0px;
                
            }
            .parent .child {
                width: 80px;
                height: 80px;
                background: #eee;
                float: left;
                margin-top: 10px;
                margin-left: 9px;
                margin-right: 12px;
                margin-bottom: 12px;
                box-shadow: 3px -3px 2px #9898c7;
                text-align: center;
                line-height: 80px;
                font-family: "微软雅黑";
                font-size: 28px;
                text-shadow: 2px 2px 2px yellowgreen;
            }
            .parent .child:hover {
                cursor: pointer;
                background: linear-gradient(#ccc,#666);
            }
            
            .putIn {
                position: absolute;
                width:100%;
                height:60px;
                line-height: 60px;
                color: #fff;
                bottom:0;
                right: 0;/*为了让padding起作用*/
                text-align:right;
                font-size: 40px;
                overflow: hidden;
                padding-right: 8px;
                padding-bottom: 8px;
            }


        </style>
    </head>
        <body>
            <div class="content">
                <div class="screen">
                    <i class="icon"></i>
                    <span id="putIn" class="putIn"></span>
                </div>
                <div class='parent'>
                    <div class='child'>1</div>
                    <div class='child'>2</div>
                    <div id='targetBox' class='child'>3</div>
                    <div class='child'>4</div>
                    <div class='child'>5</div>
                    <div class='child'>6</div>
                    <div class='child'>7</div>
                    <div class='child'>8</div>
                    <div class='child'>9</div>
                </div>
            </div>
            
        </body>

    
    <script>

        //获取JavaScript的dom对象
        function dom(id){
            if(id.toString().indexOf('#') != -1) {
                id = id.replace('#','');
            }
            return document.getElementById(id);
        };
        
        var buttons = document.getElementsByClassName('child');
        var putIn = dom('#putIn');
        for(var i = 0,len = buttons.length;i < len;i++){
            buttons[i].onclick = function(){
                var num = this.innerHTML;
                if(putIn.innerText.length < 13 )
                    putIn.innerText = putIn.innerText + num;
                
            }
        }

    </script>
</html>

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.08.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧
说实话我有点吃惊,用js写的对话效果在当天都就被多个专题收录,而且直接被推荐到首页。我怎么也没有想到随便写的一个小例子会这么受关注,莫非是因为贴图的关系? 4f98a0a1cd11728b50834c
剽悍一小兔
2018/05/17
7080
《从案例中学习JavaScript》之实现对话效果(3)
上一节传送门:《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧 本节涉及的知识点: div元素的 scrollHeight 和 clientHeight 开关变量的使用技巧 先声明一下,这个案例是我临时想出来的,当时觉得挺好玩的,所以开始做。算是一次尝试吧,这不是讲解真正的游戏开发,虽然H5是可以做游戏开发的,不过我还没有去深入研究过。更何况这个案例比较基础,还没有用h5。 本案例的目的还是借由一个例子来讲解JavaScript的知识点,没别的意思。 继续上一节的内容,本节
剽悍一小兔
2018/05/17
1.1K0
JQuery常用方法总结
1.json的创建方式 <script> $(function () { //第一种 var my = new People("CallmeYhz", 26); alert("(1):" + my.name); //第二种 var you = { "name": "周公瑾", "age": 35 };
用户1055830
2018/01/18
1.1K0
JQuery常用方法总结
《从案例中学习JavaScript》之实现对话效果
今天突发奇想,js能不能通过字符串和定时器来实现游戏中的对话效果呢。试了一下,还真挺好玩的。 上效果图: Paste_Image.png 本节涉及的知识点: 字符串的charAt方法 js定时器set
剽悍一小兔
2018/05/17
1.1K0
css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定
coders
2018/01/04
1.2K0
css补充、JavaScript、Dom
第42天:焦点图
1、焦点图 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦点图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul,ol{ 12 list-
半指温柔乐
2018/09/11
9720
第47天:拖动弹出框
假期结束,继续学习! 拖动弹出框效果 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{margin:0;padding:0;} 8 .box{ 9 width:400px; 10 height:300px; 11
半指温柔乐
2018/09/11
4790
零基础打造自己的 js 类库(1)
写作不易,转载请注明出处,谢谢。 文章类别:Javascript基础(面向初学者) 前言 在之前的章节中,我们已经不依赖jQuery,单纯地用JavaScript封装了很多方法,这个时候,你一定会想,这些经常使用的方法能不能单独整理成一个js文件呢? 当然可以,封装本来就是干这个用的。放在一个单独js文件里固然不错,其实我们也可以单独整一个js类库,一方面可以锻炼一下自己封装方法的能力,另一方面,也可以将自己学到的东西做一个整理。 出于这个目的,本文将介绍如何封装一个简单的js类库。 1. 总体设计 所谓的
剽悍一小兔
2018/05/17
3.7K1
前端学习(46)~事件简介
事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
Vincent-yuan
2020/03/19
8110
年度实用技巧 | 假期神器,用CSS复刻了一个游戏机
我小时候,家里的庭院有一棵枝繁叶茂的树,那时候家里没有空调,夏天会在树荫下铺个席子,或是午睡,或是看书。后来,家里给我买了一台掌上游戏机,那个时候还挺奢侈的。于是,暑假大部分时间都是在俄罗斯方块的旋转、移动中度过的。
叶一一
2025/01/24
1300
年度实用技巧 | 假期神器,用CSS复刻了一个游戏机
[工具推荐] VS code网页开发插件Live Preview [实时预览html]
托管本地服务器的扩展程序,供您预览Web项目! 此扩展对于尚未创建服务器的项目最有用 安装OK后,代开HTML文档会出现下图图标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,
科控物联
2023/02/28
1.5K0
[工具推荐] VS code网页开发插件Live Preview [实时预览html]
js常用方法和一些封装 -- 时间相关(附案例详解)
昨天上传的时候少了一个方法,现在补上: //日期转换 function transformDate(date){ if(typeof date =="string"){ return new Date(date.replace(/-/ig,"/").replace("T"," ")); }else{ return date; } } 勘误:_center()方法中timeBox应改为dom,封装方法的时候忘了改过来了,现在已更正。 本文介绍一些时间操
剽悍一小兔
2018/05/17
1.9K0
JavaScript进阶内容——DOM详解
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
秋落雨微凉
2022/10/25
1.6K0
JavaScript进阶内容——DOM详解
3)js的基础语法使用以及css定位
var north = ['北京','山东','天津']; var south = ['东莞','深圳','上海']; var newCity = north.concat(south); console.log(newCity)
py3study
2020/01/08
1.1K0
Web前端知识(三)
font-size、font-family、font-style、font-weight
软件小生活
2021/09/10
1.6K0
20.DOM
定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签
zhang_derek
2018/04/11
7750
js学习: 自定义类库 - miniQuery 2.0
Paste_Image.png 在上一篇 零基础打造自己的 js 类库(1) 中,原本只是为了写个小案例,说明一下闭包,js对象的作用。 后来我隐约有一个想法,我是不是可以将miniQuery写得更完善一些呢。我的意思是说,尽量使用jQuery的调用规则,看看自己能不能把常用的方法模拟出来? 这个想法产生以后,我感觉挺兴奋,正好可以藉由这个机会把js的知识点再复习一下。 今后只要有时间,我就把miniQuery更新一下,添加新的api方法进去。作为自己的一个学习记录。 零基础打造自己的 js 类库(1)
剽悍一小兔
2018/05/17
1.8K0
(Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!
Tz一号
2020/09/10
1.6K0
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何CSS库,例如Bootstrap
公众号---人生代码
2020/08/04
7.6K0
(长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <ti
xing.org1^
2018/05/17
1.4K0
推荐阅读
相关推荐
《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验