版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
DOM教材
DOM是DocumentObjectModel的缩写，是对XML文档的内容进行表示的模型。它把
XML文档看作是一系列node和node间的关系，并且把每一个node都当作一个对象，所以
叫文档对象模型。
DOM还提供了一系列的方法（API）,允许开发人员添加、编辑、移动或删除树中任
意位置的节点，从而创建一个引用程序。
在网页中，我们可以把DOM理解为不仅是对网页中各个元素关系的描述（把每个元素
或文本都视为一个节点，既node。关系是指每一个节点之间是兄弟还是父子等关系。），并
且还可以把每一个网页元素或一段文字，都当成一个可操作的对象。比如说：html元素和
body元素是什么关系（父节点和子节点的关系）,body中某一个div和某一个p是什么关系。
如何删除body中的某一个div,如何给body里添加一个新的div等等，这些都是DOM里
规定的。
配套视频请见《DOM专题》视频部分。
1获取节点
1.1通过document获取节点
表1获取节点方法索引表
Item内容
通过元素ID获取节点：
getElementByld
document.getElementByld（元素ID名）
通过元素的name属性获取节点：document.getElementByName（元素
getElementByName
name属性）
通过元素的标签名获取节点：documenl.getELemenlByTagName（元素标
getElementByTagName签）；
它返回的是nodeList对象
通过类名获取节点：getElemenlByClassName（元素类名）。IE6/7/8不支
getElemenlByClassName
持
querySelectorjQuery风格的元素查找方法，获得一个DOM元素。从1E8开始支持
querySelectorAlljQuery风格的元素查找方法，获得一组DOM元素。从IE8开始支持
1.2通过节点指针获取节点
表2节点属性索引表
Item名称内容
节点D0M1级定义的node接口,js中所有的节点类型均继承自
Node
node类型
nodeValue节点值Text节点或conment节点的文本内容，可进行读写操作
续表2节点属性索引表
Item名称内容
nodeName节点名称元素的标签名，以大写形式表示
节点类型表示该节点的类型。如1代表Element节点、2代表Attribute
nodeType
节点等，具体见表2内容
子节点每个节点都有childNodes属性，它是只读的类数组对象，
childNodes
实时动态的保存该节点的子节点
子节点Children只包含element元素，它的功能和childNodes类
Children似，不同的是，children是非标准属性，由IE提出，在部
分浏览器不兼容
节点列表nodeList是类数组对象，用于动态的保存一组有序的节点
nodeList
（理解nodeList是透彻理解DOM的关键）
父节点该节点的父节点，但类似document这样的对象没有父节
parentNode
点,它的parentNode属性为null
上一个兄弟节点该节点的兄弟节点中的上一个，和该节点具有相同的父节
previousSibling
点
下一个兄弟节点该节点的兄弟节点中的下一个，其中，具有相同父节点的
nextSibling
两个节点成为兄弟节点
第一个子节点该节点的子节点的第一个节点，该节点没有子节点则为
firstChild
null
最后一个子节点该节点的子节点的最后一个节点，该节点没有子节点则为
lastChild
null
表3节点信息索引
Item名称nodeTypenodeNamenodeValue
Element元素1元素的标签名Null
Attribute属性2属性的名称属性值
Text文本3#text节点内包含的文本
Comment注释8#comment注释的内容
Document文档9#documentNull
Fragment文档碎片11#document-fragmentNull
2节点操作
2.1创建节点：createElement()、createAttibute()、createTextNode()
a)createElement()
此方法可创建元素节点，返回的是一个Element节点，具有指定的标签名。创建出来的
新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。
所以它也没有nodeParent属性。如果想把它添加到文档里，可以使用appendChild。或者
insertBefore。方法或者replaceChild()方法。
请练习一下代码：
1.document.createElement():〃创建节点的方法
2.varoDiv=document.createElement(“div”)；
3.document.body.appendChild(oDiv);
b)createAttribute()和createTextNode()
createAttitude()方法用于创建一个新的Attri节点，给元素添加属性。createTextNode
()是用于创建一个文本节点，所以nodeType等于3。oTextNode.nodeName将返回#text;
跟createElement。一样，用createTextNode。创建的节点也不会自动添加到文档里。需要使
用appendChild。或者insertBefbre。方法或者replaceChild。方法。它经常与createElement()
配合使用，知道为什么吗？(一个元素节点，一个文本节点。)
4.varoDiv=document.createElement(“div”)；
5.oDiv.setAttribute("title","mydemo");
6.document.body.appendChild(oDiv);
7.如果需要添加文字，则需要createTextNode。这个方法了。
8.varoTextNode=document.createTextNode(umydemo");
9.varmes=document.createTextNode(lthelIoworld")；
10.varcontainer=document.createElement("p")；
11.container.appendChild(mes);
12.document.body.appendChild(container);
・注意：一定要理解好元素节点和文本节点的区别。元素节点是没有nodeValue的，只
有文本节点才有nodeValue。在IE9以下的ie浏览器中，回车换行不算一个文本节点,
但标准浏览器中这是个文本节点。
c)createFragment
此方法用于创建文档片段，虽然不能把文档片段直接添加到文档中，但是它可以作为
一个“仓库”来使用，将可能需要添加到文档中的节点保存在这里，需要添加时可以一次
性将需要添加的节点添加到文档中，避免浏览器的反复渲染，提高性能
请练习以下代码：
1.<body>
2.<ulid=,myList,x/ul>
3.</body>
4.<script>
5.varoFragment=document.crcateDocumentFragment();
6.varul=document.getElementById(€myList,);
7.varoLi=null;
8.fbr(vari=0;i<10;i++){
9.oLi=document.createElement(*li,);
10.oLi.appendChildCdocument.createTextNodeCitem^Ci+l)));
11.oFragmcnt.appcndChild(oLi);
12.)
13.ul.appendChild(oFragment);
14.</script>
2.2插入节点：appendChild()和insertBefore()
appendChild(node):在指定元素节点的最后一个子节点之后添加节点，需要注意的是，
该方法返回的是新的子节点。它经常跟createElement()和createTextNode。、cloneNode。配
合使用。另外appendChild。不仅可以用来追加新的元素，也可以你挪动文档中现有的元素。
请练习一下代码：
1.varcontainer=document.createElement("pn);
2.vart=document.createTextNode(nzhufengH);
3.container.appendChild(t);
4.document.body.appendChild(container);
5.<pid=',msgn>msg</p>
6.<pid="content">content</p>
7.<pid=',aaa,,>aaaaaaaa</p>
8.<script>
9.varmes=document.getElementByld(nmsg");
10.varcontainer=document.getElementByld("content**);
11.container.appendChild(mes);
12.</script>
13.//发现msg放至Ucontent后面去了。
14.<pid="content">
15.content
16.<pid="msg”>珠峰培训专注js前端开发培训</p>
17.</p>
18.<pid='匕aa”>珠峰培训的js课程中包含html5的内容</p>
insertBefore(newNode,oldNode)：在已有的子节点前插入一个新的子节点。使用该方法
需要注意以下两点：第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，
相当于appendChikl。；此方法可返回新的子节点。
请练习以下代码：
19.<divid="parent">
20.<pid="content”>珠峰培训，专注前端面向未来</p>
21.<divid=nmsgn>msg<div>test</divX/div>
22.<pid=**content">222</p>
23.<pid="aaa">aaaaaaaa</p>
24.</div>
25.<script>
26.varmsg=document.getElementByld(Hmsgn);
27.varaaa=document.getElementByld("aaa");
28.varparent=document.getElementByld(nparentn);
29.parent.insertBefore(msg,aaa);//这个方法由父元素调用
30.</script>
31.//我们发现工D为msg的插入到了aaa的前面。
2.3替换节点：replaceChild()
replaceChild(newNode,oldNode)方法是删除一个子节点并用一个新的节点代替原
来节点的位置，使用时需要注意以下几点：
该方法接受两个参数：第一个参数是新节点，第二个参数是需要被代替的节点；被替换
的节点没有消失，只是在文档树中被移除了，没有了它的位置，但还存在于文档中；这个
方法需要在父节点上调用，如替换成功则返回被替换的节点；如替换失败则返回null。
请练习以下代码：
32.ele.repalceChild(newNode,oldNode)：〃这个方法也是由父级元素来调用
33.
34.<body>
35.<divid="zhufengn>
36.<divid=nan>a</div>
37.<divid=nb">b</div>
38.<divid=ncH>c</div>
39.</div>
40.</body>
41.<script>
42.varzhufeng=document.getElementByld("zhufeng");
43.varmsg=document.getElementByld("bn);
44.varpara=document.createElement("pn);
45.zhufeng.replaceChild(para,msg);
46.</script>
2.4复制节点：cloneNode()
cloneNode(boolean)：此方法接受一个布尔值参数，用于复制节点操作，使用时需注
意以下几点：
参数boolean为false时，表示执行浅复制，即只复制节点本身；参数boolean为true
时，表示执行深复制，即会复制节点本身及其整个子节点树；复制后返回的节点没有指定
的父节点，不会被自动插入到文档，在文档中处于游离状态；如果克隆后，id一样，不要
忘记用setAttribute("id","another_id");改变新的节点的ID。
请练习以下代码：
15.varmes=document.createTextNode("helloworld");
16.varcontainer=document.createElement("pn);
17.container.appendChild(mes);
18.document.body.appendChild(container);
19.varnewpara=container.cloneNode(true);//true和false的区另U
20.document.body.appendChild(newpara);
2.5删除节点：removeChild()
removeChild(node)方法可以从子节点列表中删除某个节点。如删除成功，则此方法返回
被删除的节点，如删除失败则返回null。你如果想把某个节点从一处移动到另一个地方，不
必使用removeChild(),可以使用前面的appendChild。和insertBefore(),他们都会自动先删除
节点，然后移动到你指定的地方。
请练习以下代码
47.<body>
48.<divid="parentn>
49.<divid=naH>a</div>
50.<divid=nb">b</div>
51.<divid=ncH>c</div>
52.</div>
53.</body>
54.<script>
55・varparent=document.getElementByld(nparentn);
56.varb=document.getElementByld(nb");
57.parent.removechild(b);//这个方法也是由父元素来调用
58.</script>
如果不知道要删除的节点的父节点是什么，可以使用parentNode属性。比如:
59.<body>
60.<divid=nzhufengH>
61.<divid=ua">a</div>
62.<divid="b">b</div>
63.<divid=ncH>c</div>
64.</div>
65.</body>
66.<script>
67.varb=document.getElementByld("b");
68.varc=b.parentNode;
69.c.removeChild(b);
70.</script>
2.6判断节点:hasChildNodes()
此方法可判断指定节点是否存在子节点，若存在一个或多个子节点，则返回值为true,否则返回值
为false,请练习以下综合代码：
1.varps=document.getElementsByTagName(''p,z);
2.for(vari=0;i<ps.length;i++){
3.ps[i].setAttribute(''title","hell。");
4.//也可以使用：ps.item(i).setAttribute(Htitle",Hhellon);
5.)
6.<body>
7.<divid=,,zhufengn>
8.<divid=na">a</div>
9.<divid=nbH>b</div>
10.<divid=,,c">c</div>
11.</div>
12.</body>
13.<script>
14.varps=document.getElementByld("zhufeng")
15.if(ps.hasChildNodes){
16.alert(ps.childNodes.length);
17.)
18.</script>
3.属性操作
3.1获取属性、设置属性和删除属性
a)getAttribute()：该方法用于获取节点的属性，获取的时候，如果属性不存在，则返
回空，注意ie和ff返回不同，返回虽然不同，但是可以用一个方法来判断：
if(a.getAttribute("title"))
b)setAttribute()：该方法用于设置节点的属性
c)removeAttribute()：该方法用于移除节点的属性
请练习以下代码：
19.setAttribute();//15®
20.vara=document.createElement(''p,z);
21.a.setAttribute(''titlez,,^mydemo");
22.
23.vara=document.getElementByld(''zhufeng,z);
24.varb=a.getAttribute(''title"");
25.console.log(b);
26.varc=b.removeAttribute('title7);
27.console.log(c);
3.4判断属性
hasAttributeO：该方法用于判断一个元素是否具有指定的属性，如果当前元素节点拥
有指定属性，则返回true,否则返回false,但是不返回那个属性的值。若文档中明确设置
了指定的属性，或是文档类型声明为该属性设置了默认值，则hasAttributeO方法都返回true。
4.DOM应用：珠峰培训的DOM库【最新版本请在群共享里下载：3354715131
/*DOM库中方法索引表:
^l.getChildNodes获取指定元素下的所有指定元素节点
*2.getNextEle获取指定元素的下一个兄弟节点（用递归的思路）
*3.getNextOne获取指定元素的上一个兄弟元素节点（用循环的方法）
M.getNextAll获取指定标签名ele下面的所有标签名为tagName的弟弟元素节点
*5.getPreEle获取指定元素的上一个兄弟元素节点
*6.getPreAll获取指定标签名ele下面的所有标签名为tagName的哥哥元素节点
*7.siblings获取指定元素的所有兄弟节点（哥哥节点和弟弟节点相加的思路）
*8.getSiblings获取指定元素的所有兄弟节点（取到父节点后再取父节点下子节点的思路）
*9.getEleChildren获得元素ele下指定标记名为tagName的所有子元素（第二个参数可选）
*10.getLastEle在所有的元素节点集eles中找出最后元素节点
*11.getFirstEle在所有的元素节点集eles中找出第一个元素节点
*12.insertAfter把要插入的元素newEle追加在目标元素oldEle的后面
*13.prepend把newNode这个节点,当成第一个子节点追加给parentEle元素
*14.text获取或设置元素节点文本值（只传第一个参数是获取，传两个参数是设置）
*15.getElesByClass获取具有多个类名的目标元素
*16.getEle获取只有一个类名的目标元素（处理正中不能写多个类名的情况）
*17.addClass增加类样式的方法
*18.removeClass移除类的方法
*19.hasClass判断某元素上是不是有某个类
*20.getIndex获取元素的索引值（从父元素往下逐一判断的思路）
*2I.getIndexNum获取元素的索引值（获取哥哥元素个数的思路）
*22.1istToArray将nodeList类型转化为数组
*23.getPos获取元素相对于屏幕距离
*24.getCss获取网页元素的CSS属性值
*25.setCss给元素设置CSS属性的方法
*26.setGrounpCss批量设置css属性的方法
*/
*1、函数名称：getEleChildren()
*功能描述：获取指定元素下的所有指定元素节点，当第二个参数不传时则返回obj下的所有子元素节
点
*思路：获取所有节点，判断是否是元素节点，标签名是否为指定标签名
**/
functiongetEleChildren(obj,node){
vara=[];
varoChild=obj.childNodes;
if(node&&node.tagName==1){
for(vari=0;i<oChild.length;i++){
if(oChildfi].nodeType==l&&oChild[i].tagName==node.toUpperCase()){
a.push(oChild[i]);
}
)
returna;
)
else{〃如果第二个参数没传，则将obj下的所有元素节点获取并返回
for(vari=0;i<oChild.length;i++){
if(oChild[i].nodeType==1){
a.push(oChild[i]);
)
)
returna;
*2、函数名称：getNextEle（）功能同下一个方法，思路不同
*功能描述：获取指定元素的下一个兄弟节点
*思路：利用递归思路，循环调用方法本身，直到查找到下一个兄弟节点
*/
functiongetNextEle(node){
varnode=node.nextSibling;
if(node.nodeType==1){
returnnode;
)
if(node.nextSibling){
returnarguments.callee(node);//递归一下，就是再调用自己去运算。不要忘了return
)
returnnull;//如果一个方法应该有返回值，但又无法计算出结果，则应该返回nulL
*3、函数名称：getNextOne()功能同上一个方法，思路不同
*功能描述：获取指定元素的下一个兄弟元素节点
*思路：利用循环方法，直到查找到下一个兄弟元素节点
**/
functiongetNextOne(ele){
varnext=ele.nextSibling;
while(next){
if(next.nodeType===1){
returnnext;
)
next=next.nextSibling;
)
returnnull;
*4、函数名称：getNextAll()
*功能描述：获取指定标签名ele下面的所有标签名为tagName的弟弟元素节点，
*思路：
*
functiongetNextAll(ele,tagName){
vara=[];
varnext=getNextOne(ele);〃调用公共方法，获得此元素的下一个(弟弟)元素节点
if(tagName&&typeoftagName=='string,){
while(next){
if(next.tagName.toLowerCase()==tagName.toLowerCase()){
a.push(next);
)
next=getNextOne(next);
}
}else{
while(next){
a.push(next);
next=getNextOne(next);
returna;
*5、函数名称:getPreEleO
*功能描述：获取指定元素的上一个兄弟元素节点
*思路：利用递归思路，循环调用方法本身，直到查找到上一个兄弟元素节点
**/
functiongetPreEle(preNode){
preNode=preNode.previousSibling;
if(preNode){
if(preNode.nodeType===1){
returnpreNode;
}else{
returnarguments.callee(preNode);
)
}else{
returnnull;
*6、函数名称：getPreAII()
*功能描述：获取指定标签名ele下面的所有标签名为tagName的哥哥元素节点,
*思路：
**/
functiongetPreAll(ele,tagName){
vara=[];
varpre=getPreEle(ele);
if(tagName&&typeoftagName==,string,){
while(pre){
if(pre.tagName.toLowerCase()==tagName.toLowerCase()){
a.push(pre);
)
pre=getPreEle(pre);
)
}else{
while(pre){
a.push(pre);
pre=getPreEle(pre);
)
)
returna;
*7、函数名称：siblings。
*功能描述：获取指定元素的所有兄弟节点，
*思路：先获取哥哥元素节点，存进数组后反转，保证顺序正常，再获取所有弟弟元素节点，拼接
即可
*________________*/
functionsiblings(ele){
vara=[];
varprevious=ele.previousSibling;
while(previous){
if(previous.nodeType===1){
a.push(previous);
)
previous=previous.previousSibling;
}
a.reverse();〃如果用unshift方法，则不用反转
varnext=ele.nextSibling;
while(next){
if(next.nodeType===1){
a.push(next);
)
next=next.nextSibling;
)
returna;
*8、函数名称：siblings。
*功能描述：获取指定元素的所有兄弟节点，
*思路：先获取指定元素节点的父节点，再往下取该父元素下除本元素外的所有子节点
*________________
functionsiblings(objName){
vara=[];
varsib=objName.parentNode.children;
for(vari=O;i<sib.length;i++){
if(sib[i]!=objName&&sib[i].nodeType==l){
a.push(sib[i]);
)
)
returna;
*9、函数名称：getEleChildren()
*功能描述：获得元素ele下指定标记名为tagName的所有子元素，第二个参数可选，表示的是指定标
签名的子元素
*思路：
*________________*/
functiongetEleChildren(ele,tagName){
if(ele&&ele.nodeType&&ele.nodeType===1){
if(tagName&&typeoftagName=='string'){
tagName=tagName.toUpperCase();
vara=[];
varch=ele.childNodes;
for(vari=O;i<ch.length;i++){
if(ch[i].nodeType===l&&ch[i].tagName==tagName){
a.push(ch[i]);
}
)
returna;
}else{〃如果第二个参数没有传
vara=[];
varch=ele.childNodes;
for(vari=O;i<ch.length;i++){
if(ch[i].nodeType===1){
a.push(ch[i]);
)
)
returna;
)
}else{〃判断第一个参数
alert('argumentserror!');
*10、函数名称：getLastEle()
*功能描述：在所有的元素节点集eles中找出最后元素节点，在引用此方法时注意取获得的数组的第一个
值
*思路：调用判断最后元素的方法，循环判断后将最后一个元素放进数组中返回
**/
functiongetLastEle(eles){
if(eles&&eles.length&&eles.length>O){
vara=[];
for(vari=O;i<eles.length;i++){〃先判断这一组元素里，有没有不是元素节点
if(eles[iJ&&eles[iJ.nodeType&&eles[i].nodeType===1){//获取当前元素的下一个弟弟元素
varele=getNextOne(eles[i]);
if(ele==null){〃如果它不存在弟弟，则说明它就是老小
a.push(eles[i]);
)
}else{
alert，参数中的第，+i4个对象，不符合条件！)；
thrownewError。参数中的第，+i+，个对象，不符合条件！,);
)
)
returna;
)
11、函数名称:getFirstEle()
*功能描述：在所有的元素节点集eles中找出第一个元素节点,在引用此方法时注意取获得的数组的第一
个值
*思路：判断元素的哥哥节点是否存在，如果不存在，即是第一个元素节点
**/
functiongetFirstEle(eles){
if(eles&&eles.length&&eles.length>O){
vara=[];
for(vari=O;i<eles.length;i++){
if(eles[i]&&eles[i].nodeType&&eles[i].nodeType===l){
varele=getPreEle(eles[i]);
if(ele==null){〃如果它不存在弟弟，则说明它就是老小
a.push(eles[i]);
)
)else{
aler(参数中的第二i4个对象，不符合条件！)
thrownewError，参数中的第四+，个对象，不符合条件！,);
returna;
)
*12、函数名称：insertAfter。
*功能描述：此方法和appendChild方法对应，把要插入的元素追加在目标元素的后面,oldEle会被移除
*思路：
**/
functioninsertAfter(oldEle,newEle){
if(oldEle&&oIdEle.nodeType&&oldEle.nodeType===l&&newEle&&newEle.nodeType&&newEle.node
Type===l){
if(oldEle.nextSibling){//如果okiEle对象有弟弟节点，则追加在它弟弟的前面
oldEle.parentNode.insertBefore(newEle,oldEle.nextSibling);
}else{
oldEle.parentNode.appendChild(newEle);
)
}else{
thrownewError('参数错误')；
*13、函数名称：prepend()
*功能描述：此方法和nsertBefore功能对应，把newNode这个节点插入到parentEle元素前面
*思路：
**/
functionprepend(newNode,oldEle){
varchild=oldEle.firstChild;
if(child){
oldEle.insertBefore(newNode,oldEle.firstChild);
}else{
oldEle.appendChild(newNode);
*14、函数名称：text。
*功能描述：获取或设置网页元素节点文本值的方法，只传ele参数是获取ele元素中的文本值，传str
是设置ele的文本值
*思路：主要处理火狐不支持innerText这个属性的问题
**/
functiontext(ele,str){〃如果第一个参数是元素类型
if(ele&&ele.nodeType&&ele.nodeType===1){//如果第二个参数没有传过来
if(str===undefined){〃判断浏览器是否支持textContent属性，若支持则此属性的类型为string,
否则为undefined
if(typeofele.textContent=-string1){
returnele.textContent;//标准浏览器都支持，DOM2的属性
}else{
returnele.innerText;//火狐不支持
)
)
elseif(typeofstr=='string,){
〃如果传了第二个参数，并且第二个参数的类型正确，则给此元素设置文本值
if(typeofele.textContent=-string1){
ele.textContent=str;
}else{
ele.innerText=str;
)
}else{
alert('第二个参数str有误')；
thrownewError,第二个参数str有误')；
)
}else{
alert('M一个参数ele误！)；
thrownewError('第二个参数str有误')；
*15、函数名称：getElesByClass()
*功能描述：解决IE6/7/8不支持document.getElementsByClassName,通过此方法可以获取指定元素ele
下具有多个类名的目标元素
*思路：此方法运用正则匹配类名，再获取对应元素。这是用两个方法来实现的，是为了降低难度
**/
functiongetElesByClass(sti-Class,ele){
varregl=/Ns+|\s+$/g;〃此正则去首尾空格，就是把首属多余的空格去掉，以免下面的循环有空操作
strClass=strClass.replace(reg1
ele=ele||document;〃判断ele参数是否传了，如果没传ele,则让ele为docuemtn
if(ele.getElementsByClassName){
returnele.getElementsByClassName(strClass);
}else{
varaClass=strClass.split(八s+/);〃以空格为格为分隔符，把各个类名字符串分解到成数组
vareles=ele.getElementsByTagName(**');//
vara=[];
for(vari=O;i<aClass.length;i++){
eles=getEle(aClass[i],eles);〃调用getEle方法循环筛选满意条件的元素。其实就是
找到类名的交集。这个方法在下面定义的
)
returneles
*16、函数名称：getEleO这个方法仅供上面的getElesByClass方法用。是独立出来的核心模块
*功能描述：在一组DOM对象集合(参数：eles)里通过单一类名(参数strClass)获取元素。
*思路：注意获取后的目标元素是放在一个数组中，使用时应注意
*_______________*/
functiongetEle(strClass,eles){
vara=[];
for(vari=0,1en=eles.length;i<len;i++){〃注意这个正则不要定义在循环外边
varreg=newRegExp("(？”|)"+strClass+"(?:|$)");〃这个iE贝!J是修正之后的
if(reg.test(eles[i].className)){〃满意这个正则验证的，说明此元素中类名中肯定有strClass这个
变量指定的类名，则放到数组里
a.push(eles[i]);
returna;
*17、函数名称：addClass()
*功能描述：增加类样式的方法
*思路：每个新增加的类名都是一个字符串，用空格将其和前名的类名隔开就好
*_______________*/
functionaddClass(ele,className){
if(ele&&ele.nodeType&&ele.nodeType===l&&className&&typeofclassName==,string,){
〃判断参数类型对不对前三个是判断第一个参数是否正确，后两个是判断第二个参数是否正确
varreg=newRegExp("(?:八|)"+strClass+"(?:|$)");〃这个正则是修正之后的
if(!reg.test(ele.className)){〃如果原来没有这个类样式，则加上
ele.className+=""+className;〃注意这里是在空格后再累加上此类名。前名是空格，不是
空字符串
)
*18、函数名称：removeClass()
*功能描述：移除类的方法
*思路：定义一个正则表达式，将正则匹配到的单词，用空字符串替换掉
*_______________*/
functionremoveClass(ele,className){
if(ele&&ele.nodeType&&ele.nodeType===1&&className&&typeofclassName==,string,){
varreg=newRegExp(M(?:A|)"+strClass+"(?:l$)"Jg"):〃这个正则是修正之后的。注意第二个参数g
//定义一个匹配单词边界的正则，并且是全文匹配(加了模式符g)
ele.className=ele.className.replace(regJ);
*19、函数名称：hasClass()
*功能描述：判断某元素上是不是有某个类
*思路：用正则表达式匹配类型，判断元素的类名和传入的字符串是否一致即可判断
*_______________*/
functionhasClass(ele,strClass){〃确定传入的ele为元素，strClass为字符串
if(ele&&ele.nodeType==l&&(typeofstrClass=='string')){
varreg=newRegExp"?:八|)"+strClass+"(?：|$)");〃这个正则是修正之后的
if(reg.test(ele.className)){
returntrue;
}else{
returnfalse;
)
*20、函数名称：getlndex()【第一种思路】
*功能描述：获取元素的索引值的方法
*思路：先得到这个元素父元素的所有元素节点，逐一比较并让计数器加1,如果有和自己相同的元
素，则返回当前的记数
*_______________*/
functiongetlndex(ele){
if(ele&&ele.nodeType&&ele.nodeType===1){
varparent=ele.parentNode;〃获得此元素的父亲节点
vareles=getEleChildren(parent);〃获得包括自己在内的所有兄弟节点
for(vari=O;i<eles.length;i++)
{//一一对比，如果发现自己和某个节点对比是一样的，那么当前的i就是自己的索引值
if(ele==eles[i]){
returni;
)
)
}else{
alert('argumenterror!');
*21、函数名称：getIndexNum()【第二种思路】
*功能描述：获取元素的索引值的方法
*思路：通过获取哥哥元素节点的方法来获取当前元素索引值
**/
functiongetlndexNum(ele){
vam=0;
varpre=ele.previousSibling;
while(pre){〃总是去判断有没有哥哥
if(pre.nodeType==1){〃如果哥哥是个元素
n++;〃则n累加一下
)
pre=pre.previousSibling潍续判断下一个哥哥
)
returnn;
*22、函数名称：listToArray。
次功能描述：将nodeList类型转化为数组
*思路：
**/
functionlistToAnay(eles){
try(
returnAtotype.slice.call(eles,0);
〃或用[].slice.caH(eles,0)这样的方式。
}catch(e){
在IE/6/7里，DOM集合不是JS对象，不能用n.slice.call(eles,O)这样的操作，会出异常
vara=[];
for(vari=O;i<eles.length;i++){
a.push(eles[i])
)
returna;
*23、函数名称：getPos()
*功能描述：获取元素相对于屏幕距离
*思路：
**/
functiongetPos(ele){
varx=ele.offsetLeft;
vary=ele.offsetTop;
varp=ele.offsetParent;//一定要理解好offsetParent是什么
while(p&&p!=document.body){〃解决IE8中的BUG
if(window.navigator.userAgent.indexOf('MSIE{〃判断是不是IE8
x+=p.offsetLeft;
y+=p.offsetTop;
}else{
x+=p.offsetLeft+p.clientLeft;//clientLeft是左这框的宽。偏移量不包括边框的宽，所以要加进
去(IE8除外)
y+=p.offsetTop+p.clientTop;
)
p=p.offsetParent;
)
varobj={);
obj.x=x;
obj.y=y;
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 道德与法治四上变废为宝有妙招课时人教公开课教案教学设计
- 牛津英语6B册语法重点及练习题
- 飞花令经典诗词20字合集
- 安全监理日常巡视记录表格模板
- 山东省济宁市汶上一中2026届化学高二上期末联考模拟试题含答案
- 服装品牌营销策划方案范例
- 2026届安徽省合肥庐阳高级中学化学高三上期末预测试题含解析
- 外贸业务合同风险防控措施
- 医院康复医学科建设管理方案
- 餐饮业节能降耗措施方案
- 盒马鲜生财政报告分析
- 《百年孤独》专用课件
- 将配偶追加为被执行人申请书
- 厂房施工方案包括
- 煤矿井下零星工程管理制度
- 退耕还林工程
- 省纸打印版：法国 纪录片《家园》(Home)中英字幕
- 抗菌药物的合理应用
- GB/T 18380.11-2022电缆和光缆在火焰条件下的燃烧试验第11部分：单根绝缘电线电缆火焰垂直蔓延试验试验装置
- DB4113T 021-2022 南阳艾 艾绒标准
- 冬季安全生产培训PPT冬季安全生产注意事项PPT课件（带内容）
评论
0/150
提交评论