javascript-02

Posted 2020-07-12

Document Object Model
<code>

    var nodes = document.body;   /*获取到body的所有节点元素*/
    //console.info(nodes);

    for(var i=0;i<nodes.childNodes.length;i++){      /*nodes.childNodes获取到body下面的所有子节点*/
        console.info(nodes.childNodes[i].nodeName);   /*获取到的第一个节点是文本节点，因为br*/
    }


    /*获取到第一个子节点*/
    var oul = document.getElementById("ul1");
    var fc = oul.firstChild;    /*火狐 谷歌  文本   IE或li元素*/
    //alert(fc.nodeName + "  "+fc.nodeType);   //   li    text
    //console.info(fc.nodeName + "  "+fc.nodeType);
    var elementChild = oul.firstElementChild;
    console.info(elementChild.nodeName +" "+elementChild.nodeType);

    /*兼容性问题*/
    var elem = oul.firstElementChild || oul.firstChild;


    elem.style.backgroundColor = "red";



    /*获取到最后一个子节点*/
     var lastc = oul.lastElementChild || oul.lastChild;
    console.info(lastc.innerhtml);


    /*前一个兄弟节点*/
    var preSi = oul.lastElementChild.previousElementSibling;
    console.info(preSi);

    /*后一个兄弟节点*/
    var nenxtS = oul.nextElementSibling;
    console.info(nenxtS);



    /*得到父节点*/
    var odiv2 = document.getElementById("div2");
    var parentn = odiv2.parentNode;
    console.info(parentn.id);

    var odiv3 = document.getElementById("div3");
    var offsetp = odiv3.offsetParent;
    console.info(offsetp.id);

    /*获取属性节点,获取到属性后加入到集合里面是倒叙*/
    var odiv1 = document.getElementById("div1");
    var attArr = odiv1.attributes;
    console.info(attArr.length);
    console.info(attArr[0]);
    console.info(attArr[1]);
    console.info(attArr[2]);

    console.info(odiv1.id);  /*直接通过对象获取到属性*/
    odiv1.title = "divmodel";   /*自定义属性*/
    odiv1.setAttribute("value","test");

    odiv1.removeAttribute(‘title‘);   /*删除属性*/

    /*nodevalue*/
    var op = document.getElementById("p1");
    var value = op.firstChild.nodeValue;   /*nodevalue只适用于文本节点*/
    console.info(value);

    /*创建一个节点，并且增加到网页里面*/
    var op1 = document.createElement("p");  /*创建好了p元素*/
    op1.innerHTML = "增加的p元素";

    odiv3.appendChild(op1);

    var ospan = document.getElementById("span1");
    //odiv3.insertBefore(op1,ospan);   /*指定放在那个元素的前面*/

    //var op2 = document.createElement("p");  /*创建好了p元素*/
    /*var otext = document.createTextNode("这是创建的文本内容");
    op1.firstChild.appendData(otext);
    odiv3.appendChild(op1);*/

</code>





<code>  

    var oul = document.getElementById("ul1");
    var oli = oul.firstElementChild;
    var text = document.createTextNode("今天赢球了");
    oli.firstChild.appendData("今天赢球了");   /*默认增加内容放在后面*/
    oli.firstChild.insertData(2,"##");   /*增加文本内容放在指定的位置*/
    oli.firstChild.deleteData(0,4);   /*删除文本内容，第一个参数指定了参数的位置，第二个参数指定删除长度*/
    oli.firstChild.replaceData(0,0,"**");  /*第一个参数是起始位置，第二个参数长度，第三个参数替换内容*/
    console.info(oli.firstChild);

    var textNode = document.createTextNode("这是创建的文字");  /*这是创建的文本节点*/
    oli.appendChild(textNode);
</code>