DOM模型 一

一 dom文档对象模型

dom节点：document/element/attribute/text

父节点：parentNode（上级）

子节点：childNodes（下级）

同级节点：sibling

提取节点：document.getElementById('p');

document.createTextNode('text')(可创一个文本)

二 特征相关属性

Node.textContent

返回当前节点和它的后代节点的文本内容，该属性是可读写的。

Node.nextSibling

返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。

Node.previousSibling

返回当前节点前面的，距离最新的一个同级节点。

Node.parentNode

返回当前节点的父节点。父节点只可能包括三种类型：element节点、document节点、documentfragment节点

childNodes

返回一个nodelist集合，成员包括当前节点的所有子节点。

输出所需要的节点内容：

div id="asia">
        <span id="china">china</span>
        <span id="japan">japan</span>
        <span id="india">india</span>
    </div>
    <script>

        var asia = document.getElementById('asia');
        console.log(asia.childNodes);
        for (var i = 0; i < asia.childNodes.length; i++) {
            if (asia.childNodes[i].nodeName == 'SPAN') {
                console.log(asia.childNodes[i].textContent);
            }
        }
    </script>

firstChild/lastChild

返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。

三 节点对象的方法

Node.appendChild()

接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

<input type="text" id="coffes" value="">
    <button οnclick="addcoffe2()">用户输入</button>
    <div id="coffetype">
        <span id="moka">摩卡</span>
        <span id="suro">速溶</span>
        <span id="usA">美式</span>
        <span id="nt">拿铁</span>
    </div>

function addcoffe() {
            var cinput = document.getElementById('coffes');                                  //提取input标签
            var inputvalue = cinput.value;                                                                //将输入的赋值给inputvalue
            var cspan = document.createElement('span');                                       //创建一个新span标签
            cspan.innerHTML = inputvalue;                                                             //新标签的内容为输入的inputvalue
            cspan.setAttribute('id',inputvalue);                                                        //在新标签内加入id值
            console.log(cspan);
            Tcoffetype.appendChild(cspan);                                                        //父节点接受一个对象节点为参数插入当前节点
        }
         //此方法为创造节点对象  

        function addcoffe() {
            var cinput = document.getElementById('coffes');                                //提取input节点
            var inputvalue = cinput.value;                                                              //将输入的值赋值给inputvalue
            var cspan = '<span id="'+inputvalue+'">'+inputvalue+'</span>';    //定义一个新标签按标签格式写
            var oldel = coffetype.innerHTML;                                                         //把老的标签的内容提取出来
            var addele = oldel + cspan;                                                                   //最后新的内容为老标签内容加新标签内容
            coffetype.innerHTML = addele;                                                             //父节点的新内容addele
        }
         //此方法为字符串拼接

Node.removeChild()

方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

button οnclick="replacecoffe()">click</button>
    <div id="coffetype">mika
        <span id="moka">摩卡</span>
        <span id="suro">速溶</span>
        <span id="usA">美式</span>
        <span id="nt">拿铁</span>
    </div>

function removecoffe() {
            var removetype = document.getElementById('moka');                             //将标签节点提取出来
            coffetype.removeChild(removetype);                                                        //进行该节点的移除
        }

Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

function replacecoffe() {
            var newtype = document.createElement('SPAN');                                      //创造一个新标签span                                         newtype.innerHTML = '我爱你';                                                                   //为新标签赋值
            var replacetype = document.getElementById('moka');                               //将要替换的标签提取出来
            coffetype.replaceChild(newtype,replacetype);                                            //第一个为新节点，第二个为将被替换
        }