学习后的总结:
dom:document object model
关于dom的简介:
本文说的是html dom 的一些操作:
dom树:dom树将html文档体现为树状,dom树中有很多节点;
dom通过对节点的操作来操作文档,dom节点分为12种类型:https://blog.csdn.net/zhuwq585/article/details/52955890
常用的三种类型:元素节点,属性节点,文本节点;
通用属性在不同节点的情况:
获取节点操作:
它们的区别:https://blog.csdn.net/u013063153/article/details/52755991
存在差异性:主流浏览器:获取下一个节点(可能是文本节点)ie 6 7 8 :中变成了获取下一个元素节点
根据他们的不同的情况,可以写一个兼容:
<div id="box"> <p>111</p> <p>222</p> <p>333</p> </div> var obox = document.getelementbyid('box'); var op1 = obox.children[0]; function nsibling( obj ){ if ( obj.nextelementsibling ) //如果兼容主流浏览器 { nobj = obj.nextelementsibling; }else{ nobj = obj.nextsibling; }; //如果存在div下只有一个元素节点的时候,obj.nextelementsibling 返回undefined,这时候需要判断是否仍有一个元素节点; return nobj.nodetype!==1?null:nobj; };
firstchild 第一个子节点
lastchild 最后一个子节点
firstelementchild 第一个元素节点
lastelementchild 最后一个元素节点
parentnode 父节点
offsetparent 定位父节点 :https://www.jb51.net/article/45555.htm ;
上述链接定位父节点分三种情况分析:1子节点父节点都没有定位,2父节点有定位,3父节点的兄弟节点有定位。
创建、插入节点
小案例:创建元素节点
<div id="box"> <p id='goudan'>pppp</p> </div> var obox = document.getelementbyid('box'); var oa = document.createelement('a'); oa.href = 'http://tanzhouedu.com'; oa.innerhtml = '我是添加的a标签'; oa.classname = 'dachui'; oa.id = 'aa'; obox.appendchild( oa ); //createelement只是创建了个节点,还需要通过appendchild 来加到dom树上
删除子节点
<div id="box"> <p id='p1'>苹果</p> <p id='p2'>香蕉</p> <p id='p3'>梨子</p> </div> var obox = document.getelementbyid('box'); var op2 = document.getelementbyid('p2'); obox.removechild( op2 );
完毕...
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论