JS常用方法和一些封装：dom相关 -一佰互联

划时代自助建站平台软件，企业建站+专业商城+门户组件+PS级专业可视化系统+自助开站+域名接口查看演示

JS常用方法和一些封装：dom相关

author：一佰互联 2019-03-26 click：209

简介：js一个非常重要的作用就是对dom进行操作，所谓的dom，可以理解为html代码里的一个个节点。比如，body标签元素就是一个dom。本文对js的dom操作进行一些总结。按照惯例，先上一个刚写好的小例子，代码在最后给出：现在 ...

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

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

JS常用方法和一些封装：dom相关

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

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

css

*{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

<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>

效果图

JS常用方法和一些封装：dom相关

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

1.最简单的dom方法封装

在本系列中，假设我们不考虑用jQuery。

现在给第三个盒子添加一个id。

<div id="targetBox" class="child">3</div>

如何拿到这个盒子呢？

很显然，最先想到的肯定是document.getElementById() 方法，于是就有了这样的代码。

var box = document.getElementById("targetBox");box.style.background = "#FEAF51";

效果：

JS常用方法和一些封装：dom相关

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

于是，自然而然的，我们会这么写：

//获取JavaScript的dom对象function dom(id){ return document.getElementById(id);};var box = dom("targetBox");box.style.background = "#FEAF51";

完美运行，我们知道，在jQuery中，是这样的：

var box = $("#targetBox");

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

//获取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盒子，要得到它在父盒子的角标位置，首先肯定要拿到它的父盒子对象吧。

像这样：

var box = dom("#targetBox");var parent = box.parentElement;

parent打印出来是这样的：

JS常用方法和一些封装：dom相关

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

像这样：

var children = parent.children;

打印结果：

JS常用方法和一些封装：dom相关

接下来就要遍历这些孩子节点啦，children 的数据类型是object。

然而，在js中我们可以遍历数组，却无法直接遍历object，咋办呢？

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

Array.prototype.slice.call(object);

举个例子：

var obj ={length:2,0:"first",1:"second"};objArr = Array.prototype.slice.call(obj);alert(objArr);

结果：

JS常用方法和一些封装：dom相关

注1： length是几个，就转换几个，如果你length写1，那么只弹出first。

注2： key必须为数字，而且与数组的角标是对应的。

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

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

var children = Array.prototype.slice.call(parent.children);

开始遍历：

for(var i = 0,len = children.length;i < len;i++){ if(children[i] == box){ alert(i); }}

结果：

JS常用方法和一些封装：dom相关

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

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

for(var i = 0,len = children.length;i < len;i++){ if(children[i] == box){ alert(i); break; }}

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

children.forEach(function(child,index){ if(child == box){ alert(index); return false; }});

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

//查找当前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 + 已经可以通过下面的方式来实现了：

var children = parent.getElementsByClassName("child");

效果：

JS常用方法和一些封装：dom相关

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

这里提供一种思路：

1.用getElementsByTagName获取parent元素下所有的节点。

2.遍历这些节点，比较className，如果相同，就用一个数组装起来。

3.返回这个数组。

上代码：

/*通过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;}

最后，附上最开始小例子的源码：

<!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>

本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱qq2522407257。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云学院www.yx10011.com。

PREV: 如何管理我的企业邮局

NEXT: 针对不同的快照情况我们该如何制定应对策略