ITPub博客

首页 > 应用开发 > IT综合 > JavaScript DOM进阶方法

JavaScript DOM进阶方法

原创 IT综合 作者:kfdsia115 时间:2015-04-13 17:34:49 0 删除 编辑
一 DOM类型


类型名                        说明
Node                 表示所有类型值的统一接口,IE不支持;
Document             表示文档类型;
Element              表示元素节点类型;
Text                 表示文本节点类型;
Comment              表示文档中的注释类型;
CDATASection         表示CDATA区域类型;
DocumentType         表示文档声明类型;
DocumentFragment     表示文档片段类型;
Attr                 表示属性节点类型;


1.Node类型


 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现;
 这个Node接口在JavaScript中是作为Node类型实现的;
 除IE之外,在其他所有浏览器中都可以访问到这个类型;


2.Document类型




// Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签;
document; // document;
document.nodeType; // 9;类型值;
document.childNodes[0]; // DocumentType;第一个子节点对象;
document.childNodes[1]; // HTMLHtmlElement; 对象;


// 如果想直接得到标签的元素节点对象HTMLHtmlElement,可以直接使用documentElement即可;
document.documentElement; // HTMLHtmlElement;


// 很多时候需要得到标签,之前常用的是:document.getElementsByTagName('body')[0];
document.body; // HTMLBodyElement;


// 在之前还有一个文档声明:会作为浏览器的第一个节点来处理;
document.doctype; // DocumentType;


// 在Document中有一些遗留的属性和对象集合,可以快速的帮助我们精确的处理任务;
// 属性
document.title; // 获取和设置标签的值;<br /> document.URL; // 获取URL路径;<br /> document.domain; // 获取域名;<br />     // 当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了;<br />     // 由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信;<br />     // 而通过将每个页面的document.domain设置为相同的值,这些页面就可以相互访问对方的JavaScript对象了;<br /> document.referrer;          // 保存着链接到当前页面的那个页面的URL;<br /> // 对象集合<br /> document.anchors; // 获取文档中带name属性的<a>元素集合;<br /> document.links; // 获取文档中带href属性的<a>元素集合;<br /> document.forms; // 获取文档中<form>元素集合;<br /> document.images; // 获取文档中<img>元素集合;<br /> <br /> <br /> 3.Element类型<br /> <br /> <br /> <br /> <br /> // Element类型用于表现HTML中的元素节点.在上一章中,介绍了对元素节点进行查找/创建等操作;<br /> // 元素节点的nodeType为1;nodeName为元素的标签名;<br /> // 元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型;<br /> 元素名                     类型<br /> HTML             HTMLHtmlElement;<br /> DIV              HTMLDivElement;<br /> BODY             HTMLBodyElement;<br /> P                HTMLParamElement;<br /> <br /> <br /> 4.Text类型 <br /> // Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3; // 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点;   var box = document.createElement('div');   var text1 = Document.createTextNode('Mr');   var text2 = Document.createTextNode('Lee!');   box.appendChild(text1);   box.appendChild(text2);   document.body.appendChild(box);   alert(box.childNodes.length);    // =>2;两个文本节点;   // 把两个同邻的文本节点合并在一起,使用normalize()即可;   box.normalize();          // 合并成一个节点;   // 将一个节点实现分离;   box.firstChild.splitText(3);    // 分离一个节点;   // Text还提供一些别的DOM操作的方法   var box = document.getElementById('box');   box.firstChild.deleteData(0,2);       // 删除从0位置开始的2个字符;   box.firstChild.insertData(0,'Hello');    // 从0位置开始添加指定字符;   box.firstChild.replaceData(0,2,'Miss');   // 从0位置替换掉2个指定字符;   box.firstChild.substringData(0,2);      // 从0位置获取2个字符,直接输出;   alert(box.firstChild.nodeValue);       // 输出操作后的结果; <br /> <br /> <br /> 5.Comment类型<br /> <br /> <br />  Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;<br />      var box = document.getElementById('box');<br />      alert(box.firstChild);                        // Comment;<br /> <br /> <br /> 6.Attr类型<br />  Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;<br /> <br /> <br /> 二 DOM扩展<br /> 1.呈现模式<br /> <br /> <br /> <br /> <br /> ?12345678 // 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat;   if(document.compatMode == 'CSS1Compat'){     alert(document.documentElement.clientWidth);   }else{     alert(document.body.clientWidth);   } <br /> <br /> <br /> 2.滚动<br /> <br /> <br />  DOM提供了一些滚动页面的方法<br />    document.getElementById('box').scrollIntoView();        // 设置指定可见;<br /> <br /> <br /> 3.children属性<br /> <br /> <br />  由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;<br />      var box = docuemnt.getElementById('box');<br />      alert(box.children.length);                             // 得到有效子节点数目;<br /> <br /> <br /> 4.contains()方法<br /> <br /> <br />  判断一个节点是不是另一个节点的后代,可以使用contains()方法;<br />     var box = document.getElementById('box');<br />     alert(box.contains(box.firstChild));                    // =>true;<br /> <br /> <br /> 三 DOM操作内容<br /> 1.innerText属性<br /> <br /> <br /> <br /> <br /> ?1234567891011121314 document.getElementById('box').innerText;        // 获取文本内容(如有html直接过滤掉);   document.getElementById('box').innerText = 'Mr.Lee';  // 设置文本(如有html转义);   // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent;   // 兼容方法   function getInnerText(element){     return (typeof element.textContent == 'string')?element.textContent:element.innerText;   }   function setInnerText(element,text){     if(typeof element.textContent == 'string'){       element.textContent = text;     }else{       element.innerText = text;     }   } <br /> <br /> <br /> 2.innerHTML属性<br /> <br /> <br />  innerHTML属性可以解析HTML;<br />      document.getElementById('box').innerHTML;                   // 获取文本(不过滤HTML);<br />      document.getElementById('box').innerHTML = '<b>123</b>';    // 加粗的123;<br />  虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;<br />     box.innerHTML = "<script>alert('Lee');</script>";           // <script>元素不能被执行;<br />     box.innerHTML = "<style>background:red;</style>";           // <style>元素不能被执行;<br /> <br /> <br /> 3.outerText<br /> <br /> <br />  outerText在取值的时候和innerText一样,同时Firefox不支持;<br />  而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;<br />      var box = document.getElementById('box');<br />      box.outerText = '<b>123</b>';<br />      alert(document.getElementById('box'));                       // =>null; 不建议使用;<br /> <br /> <br /> 4.outerHTML<br /> <br /> <br /> // outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去;   var box = document.getElementById('box');   box.outerHTML = '123';   alert(document.getElementById('box'));           // null;   // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多; // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多; // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内;   for(var i=0; i<10; i++){     ul.innerHTML = '<i>item</i>';      // 避免频繁;   }   // 完善   for(var i=0; i<10; i++){     a = '<li>item</i>';            // 临时保存;   }   ul.innerHTML = a; <br /> <br /> <br /> 四 小结<br /> <br /> <br /> <br /> <br /> DOM是语言中立的API,用于访问和操作HTML和XML文档;<br /> DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;<br /> <br /> <br /> DOM由各种节点构成,简要总结如下:<br /> <br /> <br /> 1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;<br /> 2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;<br /> 使用document对象,有很多种方式可以查询和获取节点;<br /> 3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;<br /> 4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;<br /> 文章:codego.net<br /> <br /> </div> <p style="clear:both;"></p> <p class="translate"> 来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/30187653/viewspace-1572201/ ,如需转载,请注明出处,否则将追究法律责任。 </p> <!-- --> </div> </div> <div class="preview-footer clearfix"> <!--已点赞、收藏--> <div class="icon-praise" id="praise" onclick="blogObj.praise($(this),'/praise/')"><span class="text"></span><span class="num">0</span></div> <div class="icon-collect" id="collect" onclick="blogObj.praise($(this),'/favour/')"><span class="text"></span><span class="num">0</span></div> <div class="share-group fr"> <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1522216707615"> <span class="fl">分享到:</span> <a href="javascript:;" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="javascript:;" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a> <a href="javascript:;" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="javascript:;" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div> <script> window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdDesc": "", "bdMini": "", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {"bdSize": 16} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; if ($(window).width() < 1320) { if ($(window).width() < 1200) { $(".sideslip").css({ "left": "20px", "margin-left": 0 }) } else { $(".sideslip").css({ "margin-left": "-590px" }) } }</script> </div> </div> <div class="article-context"> <div class="fl"> <span class="color77">上一篇:</span> <a href="https://blog.itpub.net/30187653/viewspace-1509080/">PHP加密解密函数Authcode()</a> </div> <div class="fr"> <span class="color77">下一篇:</span> 没有了~ </div> </div> <input type="hidden" id="blogId" name="blogId" value="1572201"> <!--评论开始--> <div class="blog-comment"> <div class="new-comment"> <input type="hidden" id="hid" name="hid" value="1572201"> <input type="hidden" name="_token" value="FdYOPLCLwhl89omaXBoLgdEnt4xIsqbjs2wV2dqR"> <a class="avatar" href="javascript:;"> <img src="/images/user_pic_default.png"></a> <!--用户未登录--> <div class="sign-container"> <span>请登录后发表评论</span> <a class="btn btn-sign"> <a class="layui-btn ml30" onclick="blog.login(event)">登录</a> </a> </div> <!--用户已登录--> <textarea placeholder="请写下你的评论…" onfocus="blogObj.textareaFocus($(this),200)" maxlength=200></textarea> </div> <div class="comment-list"> <div class="top-title"><span class="all-comment">全部评论</span> <span class="colorbb ml20"></span> </div> <div class="comment-items" id="comment_items"> <script type="text/template" id='blog_template'> <%for(var i=0;i <items.length;i++){%> <div class="comment-item"> <div class="author"> <a target="_blank" href="/<%=items[i].uid%>" class="avatar"> <img src="<%=items[i].headimg%>" alt=""> </a> <div class="info"> <div class="name"><a target="_blank" href="/<%=items[i].uid%>"><%=items[i].username%></a> <span class="fr reply-btn" onclick="blogObj.newComment($(this),'<%=items[i].username%>',<%=items[i].id%>)">回复</span> </div> <div class="time colorbb"><%=items[i].createtime%></div> </div> </div> <p class="comment-wrap"><%=items[i].content%></p> <%if(items[i].items.items.length) { %> <div class="sub-comment-list"> <%for(var j=0;j <items [i].items.items.length;j++){%> <div class="sub-comment"> <div class="color77 time-reply"> <span class="time"><%=items[i].items.items[j].createtime%></span> <span class="reply-btn fr" onclick="blogObj.newComment($(this),'<%=items[i].items.items[j].username%>',<%=items[i].items.items[j].id%>)">回复</span> </div> <p><a href="/<%=items[i].uid%>"><%=items[i].items.items[j].username%></a>   回复   <a href="/<%=items[i].touid%>"><%=items[i].items.items[j].tousername%></a>: <span class="content"><%=items[i].items.items[j].content%></span></p> </div> <%}%> <%if(items[i].items.total > 5) { %> <div class="more-comment"><span class="sub-comment-count">还有<i class="count"><%=items[i].items.total-5%></i>条评论</span><span class="more-comment-btn" onclick=blogObj.loadSubComment($(this),<%=items[i].id%>) data-count=1 data-flag=true>点击查看</span> </div> <%}%> </div> <%}%> </div> <%}%> </script> </div> </div> </div> <!--评论结束--> </div> <script> </script> <div class="fr w290"> <!--作者信息开始--> <!--作者信息开始--> <div class="author-info right-fixed "> <div class="head-img"> <a href="https://blog.itpub.net/30187653/"><img src="http://account.itpub.net/api/avatar.php?uid=30187653" alt=""></a> </div> <div class="author-name"><a href="https://blog.itpub.net/30187653/">kfdsia115</a></div> <div class="author-intro"> </div> <p class="register-time"><span class="color77">注册时间:</span>2015-04-02</p> <ul class="tree-list clearfix"> <li> <div class="item-tt">博文量</div> <a href="https://blog.itpub.net/30187653/"><span class="item-num blognum">3</span></a> </li> <li> <div class="item-tt">访问量</div> <div class="item-num blogviewnum">10939</div> </li> </ul> </div> <!--作者信息结束--> <script> var data = {uid: 30187653}; $._ajax({ url: '/getAuthorInfo/', data: data, type: 'get', dataType: 'json', success: function (data) { if (data.code == 200) { var data = data.data; $(".blognum").text(data.blognum); $(".blogviewnum").text(data.visitednum); } } }); </script> <!--作者信息结束--> <!--博文推荐开始--> <div class="blog-choice right-fixed"> <h3 class="choice-title">最新文章</h3> <ul class="newul"> <li class="new-item"> <a href="https://blog.itpub.net/30187653/viewspace-1509080/" class="clearfix"> PHP加密解密函数Authcode() </a> </li> <li class="new-item"> <a href="https://blog.itpub.net/30187653/viewspace-1484646/" class="clearfix"> 规定区域内字体大小自适应php代码 </a> </li> <ul> </div> <!--大牛精选结束--> </div> </div> <div class="icon-back-top" onclick="$('html,body').animate({scrollTop:0},'slow');"></div> <!--main部分结束--> <!--百度推送--> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--footer部分开始--> <div class="blog-footer"> <div class="w1200 pr"> <div class="footer-links"> <a class="icon-blog icon-wx mr30"> <div class="wx-qrcode"> <img src="/images/qrcode.jpg" alt=""> </div> </a> <a href="https://weibo.com/itpub2001?from=myfollow_all" class="icon-blog icon-wb" target="_blank"></a> </div> <p class="footer-nav"> <a href="http://www.it168.com/bottomfile/it168.shtml" target="_blank">支持我们</a> <a href="http://www.it168.com/bottomfile/tgzn.shtml" target="_blank">作者招募</a> <a href="http://www.it168.com/bottomfile/sytk.shtml" target="_blank">用户协议</a> <a href="//blog.itpub.net/31509949/viewspace-2157750/" target="_blank">FAQ</a> <a href="http://edu.itpub.net/contactus.html" target="_blank">Contact Us</a> <script src="https://s22.cnzz.com/z_stat.php?id=1274521965&web_id=1274521965" language="JavaScript"></script> </p> <p>北京盛拓优讯信息技术有限公司. 版权所有  <a style="color:#777777;" target="_blank" href="http://beian.miit.gov.cn">京ICP备16024965号-8</a> 北京市公安局海淀分局网监中心备案编号:11010802021510 niuxiaotong@pcpop.com 17352615567 <a style="color:#777777;" target="_blank" href="http://www.it168.com/jubao.html"> 未成年人举报专区</a></p> <p>广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员</p> <p>违法和不良信息举报电话:18101376593</p> </div> </div> <!--footer部分结束--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5016281862f595e78ffa42f085ea0f49"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?540bee2c1a1b922df9e0a0b922440b73"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- END STAT PV --> </body> </html>