zoukankan      html  css  js  c++  java

  • JS中级

    1元素属性

     

    1.1childNodes


    返回元素的一个子节点的数组

    （不推荐，建议用非标准children代替）
    提醒：只包含一级子节点，不包含后辈孙级别以下节点。


    children：返回元素的一个子节点的数组（同childNodes区别，只返回Element（元素） 类型节点，不返回 Text 节点）



    1.2nodeType

    返回节点类型

    1.3attributes

    返回节点属性

    <!DOCTYPE html>
    <HTML LANG="en">

    <HEAD>
      <META CHARSET="UTF-8">
      <TITLE>Document</TITLE>
    </HEAD>
    <BODY>
      <UL ID="uid" STYLE="border:1px solid black">
        <LI>1111</LI>
        <LI>2222</LI>
        <LI>3333</LI>
        <LI>4444</LI>
      </UL>
      <script type="text/javascript">
        var uid =  document.getElementById('uid');

        /*
         *只读属性：childNodes：
         *返回元素的一个子节点的数组
         */
        for (var i = 0; i < uid.childNodes.length; i++) {
          /*只读属性：
           * [element.nodeType]
           * @有12种不同的节点类型，不同的节点类型也可以有不同的子节点类型： 
           * @Node常用类型 :
           * 1 ELEMENT_NODE
           * 2 ATTRIBUTE_NODE
           * 3 TEXT_NODE
           */
           if (uid.childNodes[i].nodeType=="1") {
            uid.childNodes[i].style.background ='red';
           }

          }

        //只读属性：attributes  数组
        document.write("attributes:"+uid.attributes.length);
        document.write("<br>");
        document.write("attributes:"+uid.attributes[1]);
        document.write("<br>");
        document.write("[attributes.name]:"+uid.attributes[1].name+",[attributes.value]:"+uid.attributes[1].value);
      </script>
    </BODY>
    </HTML>
     
    如果这里使用chilren，就不需要判断uid.childNodes[i].nodeType=="1"
    如下图：

    1.4firstChild

    返回元素的第一个子节点

    标准下，会包含文本节点（IE9）
    非标准下，只包含元素节点（IE8及以下）
     

    1.5firstElementChild

     
    标准下，获取元素类型的子节点

    //这样非标准和标准的情况下都会选择第一个元素节点
    var oFirst =uid.firstElementChild||uid.firstChild;
    其实最好的写法应该是
    oFirst = uid.children[0];
    这样都可以获取元素第一个子节点。
     

    1.6lastChild

    返回的最后一个子元素

    和firstChild差不多

    var oLast = uid.lastElementChild||uid.lastChild;
     

    1.7nextSibling

    返回该元素紧跟的一个元素

    nextElementSibling
    标准下,返回该元素紧跟的一个元素
          /*
          下一个兄弟节点
           */
          var oNext = uid.nextElementSibling||uid.nextSibling;


    1.8previousSibling

    返回某个元素紧接之前元素

    previousElementSibling
          /*
          上一个兄弟节点
           */
          var oPrev = uid.previousElementSibling||uid.previousSibling;
     

    1.9parentNode

    返回父级节点

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script type="text/javascript">
        window.onload=function () {
          var uid =  document.getElementById('uid');
          var aA =  document.getElementsByTagName('a');
          for (var i = 0; i < aA.length; i++) {
            aA[i].onclick = function (){
            /**
             * 元素.parentNode：当前节点的父节点
             */
             this.parentNode.style.display='none';
            }
          }
        }
      </script>
    </head>
    <body>
      <ul id="uid" style="border:1px solid black">
        <li>
          1111
          <a href="javascript:;">隐藏</a>
        </li>
        <li>
          2222
          <a href="javascript:;">隐藏</a>
        </li>
      </ul>

    </body>
    </html>
     
    点击隐藏，<li style="display: none;">
     

    1.10offsetParent

    返回元素的偏移容器(离当前元素最近的，有定位的父节点)
    如果没有postion定位，返回 body
     
      <style type="text/css">
        div{ padding: 40px 50px; }
        #div1 {background: red;position: relative;}
        #div2{background: blue;}
        #div3 {background: orange}
      </style>
      <script type="text/javascript">
        window.onload=function () {
          var oDiv3 =  document.getElementById('div3');
         console.log(oDiv3.parentNode.id); //div2
         
         /**
          * 元素.offsetParent:离当前元素
          * （最近的一个有定位）的父节点
          */
         console.log(oDiv3.offsetParent.id);
         //#div1有position的css样式，所以这个时候结果：div1
         //如果都没有position样式，那结果：body1
        }
      </script></head>
      <body id="body1">
        <div id='div1'>
          <div id="div2">
            <div id="div3"></div>
          </div>
        </div>
      </body>
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    window.onload=function () {
                var oDiv3 =  document.getElementById('div3');
     
                var p = getPos(oDiv3);
     
                console.log(p)
                //alert(p.left) //108
            }
             
            //封装绝对位置getPos
            function getPos(obj) {
                var pos={left:0,top:0};
                while(obj)  {
                    pos.left +=obj.offsetLeft;
                    pos.top +=obj.offsetTop;
                    obj=obj.offsetParent;
                }
                return pos;
            }

    1.11offsetLeft、offsetTop

     offsetLeft

    返回当前元素的相对水平偏移位置的偏移容器
    当前元素到定位父级的距离（偏移值）
    到当前元素到offsetParent的距离
    offsetTop
    返回当前元素的相对垂直偏移位置的偏移容器
     
      <style type="text/css">
        div{ padding: 40px 50px; }
        #div1 {background: red;position: relative;}
        #div2{background: blue;}
        #div3 {background: orange;position: relative;}
      </style>
      <script type="text/javascript">
        window.onload=function () {
          var oDiv3 =  document.getElementById('div3');
          /**
           * offsetLeft[Top]：当前元素到定位父级的距离（偏移值）、
           * 到当前元素到offsetParent的距离
           */
          console.info("oDiv3.offsetParent.id:"+oDiv3.offsetParent.id+",offsetLeft:"+oDiv3.offsetLeft+",offsetTop:"+oDiv3.offsetTop);
          //[oDiv3.offsetParent.id]:div1,[offsetLeft]:100,[offsetTop]:80
        }
      </script></head>
      <body id="body1">
        <div id='div1'>
          <div id="div2">
            <div id="div3"></div>
          </div>
        </div>
      </body>
     
     

    1.12clientWidth、offsetWidth

    offsetWidth
    返回元素的宽度，包括边框和填充，但不是边距
    （样式宽 + padding + border）
    clientWidth
    在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
    （样式宽 + padding）
      <script type="text/javascript">
      window.onload =function(){
        var divv = document.getElementById("divv");
        
        /**
         * style.width 样式宽
         * clientWidth（可视宽）：样式宽 + padding
         * offsetWidth（占位宽）：样式宽 + padding + border
         */
        console.log(divv.style.width) //100px
        console.log(divv.clientWidth) //120
        console.log(divv.offsetWidth) //122
      }

    </script>
    </head>
    <body>
      <div id="divv" style=" 100px;height: 100px;
      border: 1px solid red;
      padding: 10px;margin: 10px;"></div>
    </body>
     
     

    2元素的操作（创建、插入、删除、替换）

    2.1创建DOM元素

    createElement(标签名) 创建一个节点
    appendChild(节点) 追加一个节点
      var btn=document.createElement("BUTTON");
      var t=document.createTextNode("CLICK ME");
      btn.appendChild(t);
      document.body.appendChild(btn);
     

    2.2插入元素

    insertBefore(节点, 原有节点) 在已有元素前插入
    <!DOCTYPE html>
    <html>
    <body>

    <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>

    <p id="demo">Click the button to move an item from one list to another</p>

    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction()
    {
    var node=document.getElementById("myList2").lastChild;
    var list=document.getElementById("myList1");
    list.insertBefore(node,list.childNodes[0]);
    }
    </script>

    </body>
    </html>
     

    2.3删除DOM元素

    removeChild(节点) 删除一个节点
    例子：删除留言
     

    2.4替换DOM元素

    replaceChild(节点, 已有节点) 替换节点
     
    例子：留言板插入内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload=  function () {
                var oText = getId('text1');
                var oBtn =getId('btn');
                var oUl = getId('ul1');
     
                oBtn.onclick = function () {
                    var oLi =  document.createElement('li');
                     oLi.innerHTML = oText.value;
                     /*
                      *  删除
                      */
                     var oA =  document.createElement('a');
                     oA.innerHTML = '删除';
                     oA.href = 'javascript:;';
                     oA.onclick =function(){
                        /**
                         * 父级.removeChild(要删除的元素)
                         */
                        oUl.removeChild(this.parentNode);
                     }
                     oLi.appendChild(oA);
                     /*
                      *  替换
                      */
                     var oAreplce =  document.createElement('a');
                     var textnode= document.createTextNode("11111111111");
                     oAreplce.innerHTML = '替换';
                     oAreplce.href = 'javascript:;';
                     oAreplce.onclick =function(){
                        /**
                         * 父级.removeChild(要删除的元素)
                         */
                        this.parentNode.replaceChild(textnode, this);
                     }
                     oLi.appendChild(oAreplce);
                      
     
                    /**
                     *  父级.appendChild(要添加的元素) 追加子元素
                     */
                    //oUl.appendChild(oLi);
     
                    /**
                     * 父级.insertBefore(新的元素，被插入的元素)  在指定的元素前面插入新元素
                     * 在IE下如果第二个参数节点不存在，会报错
                     * 其他浏览器如果第二个参数不存在，则会以appendChild替代
                     */
                     if (oUl.children[0]) {
                        oUl.insertBefore(oLi,oUl.children[0]);
                     }
                     else{
                        oUl.appendChild(oLi);
                     }
                    }
     
     
                    function getId(id) {
                        var dw = document.getElementById(id);
                        return dw;
                    }
                }
     
     
            </script>
        </head>
        <body>
            <input type="text" id='text1'/><input type="button" value="留言" id="btn"/>
            <ul id="ul1"></ul>
        </body>
        </html>
     
     
     
     
  • 相关阅读:
    关于基础排序算法的思考--插入排序
    关于购物车的多层复选全选
    随便写写
    第一篇小博文
    C# 遍历目录下所有文件方法
    C#驱动MongoDB官方中查询条件Query用法
    mongodb 修改远程连接
    Python 爬虫练习低调163疫情数据辽宁地图
    jquery easyui datagrid drop事件执行顺序
    https request报错 ServicePointManager.SecurityProtocol 搞定
  • 原文地址：https://www.cnblogs.com/tangge/p/5715100.html
Copyright © 2011-2022 走看看