javascript (六)DOM

2018-09-18 06:39:39来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

学习后的总结:

DOM:document object model

关于DOM的简介:http://www.w3school.com.cn/htmldom/dom_intro.asp

本文说的是HTML DOM 的一些操作:

DOM树:DOM树将HTML文档体现为树状,DOM树中有很多节点;

DOM通过对节点的操作来操作文档,DOM节点分为12种类型:https://blog.csdn.net/zhuwq585/article/details/52955890

常用的三种类型:元素节点,属性节点,文本节点;

  • 节点通用属性:nodeName -> 节点的名字 、  nodeType -> 节点的类型 、 nodeValue -> 节点的值

通用属性在不同节点的情况:https://blog.csdn.net/qingqingzijinxin/article/details/52244700

获取节点操作:

  • childNodes :获取某个节点的所有子节点
  • children : 获取某个节点的所有元素子节点

它们的区别:https://blog.csdn.net/u013063153/article/details/52755991

  • nextSibling 获取下一个节点。

存在差异性:主流浏览器:获取下一个节点(可能是文本节点)IE 6 7 8 :中变成了获取下一个元素节点

  • nextElementSibling  存在兼容性:主流浏览器:获取下一个元素节点, 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父节点的兄弟节点有定位。

 创建、插入节点

  • createElement( 标签名 ) 创建元素节点
  • createTextNode( 字符串 ) 创建文本节点
  • appendChild(节点名) 添加子节点
  • insertBefore( args1, args2 ) 往某个子节点之前添加一个兄弟
  1. 第一个参数:要添加的节点
  2. 第二个参数:添加在谁之前

小案例:创建元素节点

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

 删除子节点

  • removeChild(args)  
  1. args:要删除的节点
<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 );

 

完毕...

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:理解JavaScript中BOM和DOM的关系

下一篇:操作iframe 的方法与兼容性