• 第十章—DOM(0)—NODE类型


    DOM1定义了一个node接口,该接口由DOM的所有节点类型实现。

    所有的节点都存在这样或那样的关系。在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素。

    这里要注意一个概念:nodeList

    输出:

    如下例子:

    复制代码
     1 <div id="myDiv"> </div><!-- 此处有空格 -->
     2  <script>
     3     var div = document.getElementById('myDiv');
     4     var test = div.firstChild;
     5     if (test.nextSibling === null) {
     6         alert('good');//输出good
     7     }
     8     if (test.previousSibling === null) {
    9 alert('bad');//输出bad 10 }
    复制代码

     

    操作节点

    加入到文档中

    复制代码
     1     <style>
     2         #test {font-size: 20px;background: red;height: 100px;}
     3         #myDiv {color:red;}    
     4     </style>
     5 </head>
     6 <body>
     7   <ul id="test">
     8       <li>1</li><li>2</li><li>3</li>
     9   </ul>
    10  <script>
    11    var oul = document.getElementById('test');
    12    var deep = oul.cloneNode(true);
    13    alert(deep.childNodes.length);//7
    14    oul.parentNode.insertBefore(deep,oul);
    15    var shallow = oul.cloneNode(false);
    16    alert(shallow.childNodes.length);//0
    17    oul.parentNode.insertBefore(shallow,deep);
    18 
    19  </script>
    复制代码

    输出:

  • 相关阅读:
    小程序 新建项目底部tabbar
    HBuild 连接安卓手机
    jquery tab切换
    VUE 项目运行
    VUE 创建element项目
    VUE环境搭建、创建项目、vue调试工具
    HBuild 连接苹果手机
    javascript五种基本类型
    SASS 简单实用
    redis基础02-redis的5种对象数据类型
  • 原文地址:https://www.cnblogs.com/ydaimee/p/6753743.html
Copyright © 2020-2023  润新知