zoukankan      html  css  js  c++  java
  • 操作DOM对象(重点)

    核心

    浏览器网页就是一个DOM树形结构

    ·更新:更新DOM节点

    ·遍历DOM节点:得到DOM节点

    ·添加DOM节点

    ·删除DOM节点

    要操作一个DOM节点,首先就要获取这个DOM节点

     1 <div id = "father">
     2     <h1>标题一</h1>
     3     <p id="p1">p1</p>
     4     <p class="p2">p2</p>
     5 </div>
     6 
     7 <script>
     8     var p1 = document.getElementById("p1");
     9     var h1 = document.getElementsByTagName("h1");
    10     var p2 = document.getElementsByClassName("p2");
    11     var father = document.getElementById("father");
    12 </script>

    这是原生代码,之后我们都尽量使用jQuery

    更新节点

    1 <div id="id1">
    2 
    3 </div>
    4 
    5 <script>
    6   var id1 = document.getElementById('id1')
    7 </script>

    操作文本

    ·id1.innerText='123'  修改文本的值

    ·id1.innerHTML = '<strong>123</strong> 可以解析HTML文本标签

    操作css

    1 id1.style.color = "yello"; // 属性使用字符串包裹
    2 id1.style.fontSize = '20px'; // - 转 驼峰命名问题
    3 id1.style.padding = '2em';

    删除节点

    删除节点的步骤:先获取父节点,再通过父节点删除自己

     1 <div id = "father">
     2     <h1>标题一</h1>
     3     <p id="p1">p1</p>
     4     <p class="p2">p2</p>
     5 </div>
     6 
     7 <script>
     8    var self = document.getElementById('p1');
     9    var father = self.parentElement;
    10    father.removeChild(self);
    11    
    12    //删除是一个动态的过程,这样是错误的
    13     father.removeChild(father.children[0]);
    14     father.removeChild(father.children[1]);
    15     father.removeChild(father.children[2]);
    16     
    17 </script>

    注意:删除多个节点的时候,children是时刻变化的,删除节点的时候一定要特别注意

    插入

  • 相关阅读:
    三种方式循环打印1-100的值
    线程中put(None)和主函数中put(None)的区别和用法
    进程、线程这篇博客,让你傻傻的一次就能记清楚
    单生产者进程和单消费者进程
    队列
    初始线程
    常见面试题之*args
    常见面试题之*args 和 **kwargs 的使用
    闭包函数之函数加括号和不加括号的意义
    仓鼠找sugar II
  • 原文地址:https://www.cnblogs.com/YXBLOGXYY/p/14738033.html
Copyright © 2011-2022 走看看