JavaScript系列之操作DOM对象/面向对象

DOGIOOH 2020-11-13 01:49:48
javascript DOM 对象 系列 操作


JavaScript系列之操作DOM对象/面向对象

01 操作DOM对象

  • DOM : Document Object Model ( 文档对象模型 )

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。


  • 获取DOM节点

    • 在操作一个DOM节点之前,先要获取到这个DOM节点。最常用的方法有document.getElementById() document.getElementsByTagName(),以及CSS选择器document.getElementsByClassName()

    • document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。

  • 节点属性

    parentNode //返回节点的父节点
    childNodes //返回子节点集合
    childNodes[i]//返回子节点集合中的i个节点
    firstChild//返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
    lastChild //返回节点的最后一个子节点
    nextSibling //下一个节点
    previousSibling//上一个节点
    
  • 元素属性

    firstElementChild // 返回节点的第一个子节点,最普遍的用法是访问该元
    素的文本节点
    lastElementChild //返回节点的最后一个子节点
    nextElementSibling //下一个节点
    previousElementSibling //上一个节点
    

  • 更新DOM

    拿到一个DOM节点后,我们可以对它进行更新。

    • 更新节点的文本有两种办法:

      • 修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树。
      • 修改innerText或textContent属性,但是该方式无法设置任何HTML标签。
    • 更新CSS样式的方法:

      • DOM节点的style属性对应所有的CSS,可以直接获取或设置。
      //先获取节点ele,再通过style属性更新CSS样式
      ele.style.fontsize = '50px';
      

  • 插入DOM
    • 先获取一个DOM节点,如果该DOM节点为空,例如,<div></div>,那么,直接使用innerHTML = <span>child</span>就可以修改DOM节点的内容,相当于“插入”了新的DOM节点。
    • 如果这个DOM节点不是空的,有以下两种方式进行插入
      • A.appendChild(B),把B节点添加到A节点的最后一个子节点。
      • insertBefore( A,B ),把A节点插入到B节点之前

  • 创建DOM
    • createElement( tagName), 创建一个标签名为tagName的新元素节点.

  • 删除DOM

    • 要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉。

      // 获取想要移除的节点:
      var self = document.getElementById('to-be-removed');
      // 获取待移除节点的父节点:
      var parent = self.parentElement;
      // 删除:
      var removed = parent.removeChild(self);
      //注意事项:删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置。
      

  • 替换DOM

    • 要替换一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的replaceChild把自己替换掉。

      // 获取想要替换的节点:
      var old = document.getElementById('to-be-replaced');
      // 获取待移除节点的父节点:
      var parent = self.parentElement;
      // 创建新的节点
      var new=document.createElement("img");
      // 给新节点设置属性
      new.setAttribute("src","images/f03.jpg");
      // 替换:
      parent.replaceChild(new,old);
      

02 面向对象

JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。

  • 创建对象

    • 方式1:通过new Object();
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    //创建一个对象,通过new Object();
    var person = new Object();
    //给对象设置属性 对象.属性名 = 属性值;
    person.name = "John";
    person.age = 18;
    person.sex = '男';
    //给对象设置方法 对象.方法名 = function(){};
    person.showName = function () {
    alert(this.name);
    };
    //调用方法
    person.showName();
    </script>
    </body>
    </html>
    
    • 方式2:使用花括号
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    //使用花括号定义一个对象
    //注意点:
    //1.使用冒号赋值
    //2.多个属性之间使用逗号隔开
    //3.最后一个属性或者方法不需要加逗号;
    var student = {
    name:"John",
    age:20,
    sex:'男',
    showName:function () {
    document.write(this.name)
    }
    };
    console.log(student);
    </script>
    </body>
    </html>
    
    • 方式3:使用构造函数(构造函数的首字母必须大写)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <script>
    //使用构造函数创建多个同类型的对象
    function person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.showName = function () {
    alert(this.name)
    }
    }
    var student1 = new person("John",23,'男');
    var student2 = new person("Snow",24,'女');
    var student3 = new person("Lily",25,'女');
    console.log(student1);
    console.log(student2);
    console.log(student3);
    </script>
    </body>
    </html>
    

  • 原型对象

    • JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。

    ​ 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined

    • 每个函数都有一个prototype属性,这个属性是一个指针,可以将一个对象的原型指向一个对象。

    • 以创建对象方式三中的代码为例,用new Person()创建的对象还从原型上获得了一个constructor属性,它指向函数Student本身,它的原型链如下:
    student1
    student2 -→ Person.prototype ----> Object.prototype ----> null
    student3
    
    • 如果我们通过new Person()创建了很多对象,这些对象的showName函数实际上只需要共享同一个函数就可以了,这样可以节省很多内存。要让创建的对象共享一个showName函数,根据对象的属性查找原则,我们只要把showName函数移动到student1student2这些对象共同的原型上就可以了,也就是Person.prototype.修改代码如下:
    function person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex
    }
    }
    Person.prototype.showName = function () {
    alert(this.name);
    };
    

  • 原型继承

    一个原型对象是另一个原型对象的实例。相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链。

    JavaScript的原型继承实现方式就是:

    1. 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this
    2. 借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;
    3. 继续在新的构造函数的原型上定义新方法。

版权声明
本文为[DOGIOOH]所创,转载请带上原文链接,感谢
https://blog.csdn.net/yinyanyao1747/article/details/94404998

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple