javascript （六）DOM

学习后的总结：

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 -> 节点的值

通用属性在不同节点的情况：

获取节点操作：

• 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 );

 

完毕...