JavaScript - DOM文档对象模型

一 . 节点属性

1-1. childNodes/children

        1：.childNodes：获取子节点集合(类数组)

                -包含文本节点、元素节点

        2：.nodeType：节点类型，共12种；检测时返回对应数字

            1-元素节点

            2-属性节点

            3-文本节点

        3：.nodeName：获取节点名称

        4：.children：获取子元素结合(类数组)，只包含元素节点，只包含子集

<div id="box">
    <p>hello<p>
</div>
 
var obj = document.getElementById('box');
 
//获取子节点集合
console.log(obj.childNodes);
==> [text,p,text]
--> 由 文本节点 元素节点 文本节点 组成
 
//检测节点类型，返回对应的数字
console.log(obj.childNodes[0].nodeType);
==> 3
--> 意思为文本节点
console.log(obj.childNodes[1].nodeName);或者
console.log(obj.childNodes[1].tagName);
==> p

 

1-2. 获取设置属性

        1：.getAttributeNode( ... ); 获取属性节点

        2：var node = document.createAttribute( ... ); 

              和 node.value='...'

              和.setAttributeNode( ... ); 设置属性节点

<div id="box" aaa="123">
    <p>hello<p>
</div>
 
var obj = document.getElementById('box');
 
//获取属性节点
console.log(obj.getAtttributenode('aaa'));
==> 123
 
//设置属性节点
var node = 
documen.createAttributeNode('bbb');
node.value = '666';
obj.setAttributeNode(node);
==> <div id="box" aaa="123" bbb="666">

 

1-3. -获取节点，注意不用打括号

        -获取第一个子节点

        1：.firstChild 包含文本节点、元素节点

        2：.firstElementChild 只包含元素节点

 

        -获取最后一个子节点

        1：.lastChild 包含文本节点、元素节点

        2：.lastElementChild 只包含元素节点

 

        -获取下一个子节点

        1：.nextSibling下一个兄弟节点

        2：.nextElementSibling下一个元素兄弟节点

 

        -获取上一个子节点

        1：.prevSibling下一个兄弟节点

        2：.prevElementSibling下一个元素兄弟节点

 

        -获取父级节点

        1：.parentNode 获取父节点

        2：.offsetParent 获取最近定位父节点，若没有获取 body；定位：position : relative;

 

 

二 . 创建节点

2-1. 创建/插入节点

        1：.documen.createElement( ... );：创建节点

        2：.obj.appendChild( ... ) ; ：在 obj 中插入 ...

        3：new Image

                图片 img 标签特有的创建方式

<div id="box">
    <p>hello<p>
</div>
 
var obj = document.getElementById('box');
 
//创建节点  创建p标签
var oP = documen.createElement('p');
//设置节点的 文本内容
oP.innerHTML = 'hello666';
 
//在 obj 中插入节点(p标签)
obj.appendChild(oP);
 
//图片有特殊的创建方式
var oImage = new Image;
oImage.src = '...';
obj.appendChild(oImage);

 

        4：documen.createDocumentFragment( ); ：创建文档碎片

<div id="box">
    <p>hello<p>
</div>
 
...
for(var i=0;i<10;i++){
    var p = document.createElement('p');
    p.innerHTML = 'hello' + i;
    obj.appendChild(p);
}
--> 这样会渲染多次(这里是10次)，不太好！
 
//改进 该方法只渲染一次
var frag = doxumen.createDocumentFragment();
for(var i=0;i<10;i++){
    var p =document.createElement('p');
    p.innerHTML = 'hello' + i;
    frag.appendChild(p);
}
obj.appendChild(frag);

 

        5：documen.createTextNode( ); ：创建文本节点

...
//改进 该方法只渲染一次
var frag = doxumen.createDocumentFragment();
for(var i=0;i<10;i++){
    var p =document.createElement('p');
    var text = documen.createTextNode('666');
    p.appendChild(text);
    frag.appendChild(p);
}
obj.appendChild(frag);
--> 效果同第4点

 

三 . DOM节点操作

3-1. 插入节点

        1：obj.appendChild( ...  );：在 obj 尾部中插入子节点 ...

        2：obj.insertBefore( ... , childNode  );：在 childNode 前面中插入节点 ...

        3：obj.removeChild( ...  );：移除子节点 ...

        4：obj.replaceChild( ... , childNode  );：把子节点 childNode 替换成 ...

...
 
var oUl = documen.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByClassName('li');
 
//创建
var newLi = document,createElement('li');
newLi.innerHTML = 'newLi';
 
//插入
oUl.appendChild(newLi);
--> 在ul中的尾部插入newLi
oUl.insertBefore(newLi,aLi[2]);
--> 在ul中的第3个li前面插入newLi
 
//移除
oUl.removeChild(aLi[1]);
--> 移除ul中的第2个li
 
//替换
oUl.replaceChild(newLi,aLi[2]);
--> 把ul中的第3个li替换成newLi

 

四 . 补充

4-1. 克隆

        1：.cloneNode(  );：克隆节点

                括号里的值：true - 克隆后代

                                   false - 克隆自身( 默认 )

        2：克隆的对象事件属性不能克隆

...
var p = documen.getElementByTagName('p')[0];
var newP = p.cloneNode();
obj.appendChild(newP);