webAPI5

1.innerText和innerHTML的区别
  <input type="button" value="设置" id="btn">
    <div id="dv">
        哈哈
        <p>呵呵</p>
    </div>

    <script src="common.js"></script>
    <script>
        //  innerText  设置文本内容  只能获取文本
        //  innerHTML  设置文本内容  可以解析标签  能获取元素内所有的内容(文本, 标签)

        my$("btn").onclick = function () {
            // my$("dv").innerText = "被修改了"
            // my$("dv").innerText = "<h1>被修改了</h1>"

           // my$("dv").innerHTML = "被修改了"
           // my$("dv").innerHTML = "<h1>被修改了</h1>"

            console.log(my$("dv").innerText);
            console.log(my$("dv").innerHTML);

        }

    </script>
2.自定义属性
 <ul>
     <li score="1">马路路的成绩</li>
     <li score="2">柯聪聪的成绩</li>
     <li score="-5" class="aa">贺成成的成绩</li>
     <li score="10">方成成的成绩</li>
 </ul>
 <script src="common.js"></script>
 <script>
     // html标签没有这个属性, 我自己加的属性 --->自定义属性 (为了储存数据)
     //  获取自定义的属性 :  getAttribute("自定义属性的名字")
     //  设置自定义的属性 :  setAttribute("自定义属性的名字", 设置的内容)
     //  移除自定义的属性 :  removeAttribute("自定义属性的名字")   也可以移除元素自带的属性
     var list = document.getElementsByTagName("li");

     for (var i = 0 ; i < list.length; i++) {
         //设置
         list[i].setAttribute("score", parseInt(Math.random()*10));
         list[i].onclick = function () {
             //alert(this.score);
             //alert(this.getAttribute("score"));//获取
             this.removeAttribute("score");
             this.removeAttribute("class");
             //this.setAttribute("score", "");

         }
     }

 </script>
3.节点的介绍
 <div id="dv">
        <p>哈哈</p>
        <span></span>
        <a href=""></a>
        <input type="text">
    </div>
    <script src="common.js"></script>
    <script>
        /*
        * 顶级对象 : 文档的对象 document
        * 元素: 页面上所有的标签  element
        * 节点: 页面上所有的内容(标签, 属性, 文本(文字, 换行, 空格))  node
        * 根元素:  html标签
        *
        * 节点的属性
        *    .nodeType : 节点的类型 :  1--标签   2-属性   3-文本
        *    .nodeName:  节点的名字: 大写的标签名字-->标签节点   小写的属性名字--->属性的节点
        *                               #text---> 文本的节点
*            .nodeValue:  节点的值  :  null--->标签节点  属性的值--->属性节点  文本的内容-->文本节点
        * */

        // 获取div里面的每一个子节点
        var dv = my$("dv");
        for( var i = 0 ; i <dv.childNodes.length; i++){
           // console.log(dv.childNodes[i]);
            var node = dv.childNodes[i];
            //console.log(node.nodeType+"===="+node.nodeName+"====="+node.nodeValue);
        }

        // 获取子节点
        console.log(dv.childNodes);
        //获取子元素
        console.log(dv.children);
        //获取父节点
        console.log(dv.parentNode.parentNode.parentNode.parentNode);
        //获取父元素
        console.log(dv.parentElement)
</script>
4关于节点
<div id="dv">
   <span>这是div中的第一个span标签</span>
    <p>这是第二个元素, 一个p</p>
    <ul id="uu">
        <li>杨树林</li>
        <li>神仙水</li>
        <li>纪梵希</li>
        <li>雅诗兰黛</li>
    </ul>
    <div>我是div</div>
</div>
<script src="common.js"></script>
<script>
    //12行代码:  都是获取节点和元素的
    var u = my$("uu");
    //获取父节点
    console.log(u.parentNode);
    //获取父元素
    console.log(u.parentElement);
    //获取子节点
    console.log(u.childNodes); // 在ie8中获取的是子元素
    //获取子元素
    console.log(u.children);

    console.log("================================================")

    //第一个子节点
    console.log(u.firstChild); //  在ie8中 显示的是第一个子元素
    //第一个子元素
    console.log(u.firstElementChild);  //  在ie8中 不支持
    //最后一个子节点
    console.log(u.lastChild);//  在ie8中 显示的是最后一个子元素
    //最后一个子元素
    console.log(u.lastElementChild);//  在ie8中 不支持

    console.log("================================================")

    //获取前一个兄弟节点
    console.log(u.previousSibling) ; //  在ie8中 显示的是前一个兄弟元素
    //获取前一个兄弟元素
    console.log(u.previousElementSibling);  //  在ie8中 不支持
    //获取后一个兄弟节点
    console.log(u.nextSibling);  //  在ie8中 显示的是后一个兄弟元素
    //获取后一个兄弟元素
    console.log(u.nextElementSibling); //  在ie8中 不支持

    /*
    * 总结:  凡是获取元素和节点, 在谷歌和火狐 都支持
    *        从子节点和兄弟节点开始, 获取节点的代码 在ie8中 得到的元素
    *        获取元素的代码, 得到的是undfined
    */