PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 构造函数|对象原型-dom获取-增删改查

构造函数|对象原型-dom获取-增删改查

葡萄枝子
葡萄枝子 原创
2021年01月07日 00:19:56 614浏览

构造函数|对象原型-dom获取-增删改查

  1. 举例说明构造函数的原型与对象原型之间的区别与联系;
  2. 举例演示获取dom元素的常用方法;
  3. dom元素的增删改查常用操作,全部实例演示,并配图

body中添加 html

  1. <ul id="list">
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. </ul>

1. 举例说明构造函数的原型与对象原型之间的区别与联系

实例对象的原型指向它的构造函数的原型
实例对象的原型从构造函数的原型继承成员(属性/方法)

  1. // 声明一个构造函数
  2. function User(name, email) {
  3. this.name = name;
  4. this.email = email;
  5. }
  6. // 构造函数的原型上添加属性和方法
  7. // 原型属性
  8. User.prototype.nation = "China";
  9. // 原型方法
  10. User.prototype.show = function () {
  11. return {
  12. name: this.name,
  13. nation: this.nation,
  14. gender: this.gender,
  15. };
  16. };
  17. // 实例对象的原型从构造函数的原型继承成员(属性/方法)
  18. // 实例对象的原型指向它的构造函数的原型
  19. const user1 = new User("a");
  20. // 示例对象的原型
  21. user1.__proto__.gender = "男";
  22. // 实例对象的原型指向它的构造函数的原型
  23. // 返回 true
  24. console.log(user1.__proto__ === User.prototype);
  25. // 继承构造函数原型的属性 nation 和方法 show
  26. const user2 = new User("b");
  27. // 返回 China {name: "b", nation: "China", gender: "男"}
  28. console.log(user2.nation, user2.show());

构造函数与对象原型

2. 举例演示获取dom元素的常用方法

  • css 选择器
    • document.querySelectorAll() 获取满足条件的所有元素
    • document.querySelector() 获取满足条件的第一个元素
  • 传统方法
    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByName()
    • document.getElementsByClassName()
  • 快捷方式
    • html: document.documentElement
    • head: document.head
    • body: document.body
    • title: document.title
    • forms
      • document.forms[0]
      • document.forms.item(0)
    • images
      • document.images
    • anchors
      • document.anchors
  1. // css 选择器
  2. // 获取满足条件的所有元素
  3. const lis = document.querySelectorAll("#list>.item");
  4. lis.forEach(item => console.log(item));
  5. // 获取满足条件的第一个元素
  6. const li = document.querySelector("#list>.item");
  7. console.log(li);

css选择器

3. dom元素的增删改查常用操作,全部实例演示,并配图

  1. // 开头增加一个
  2. ul.insertAdjacentElement("afterbegin", document.createElement('li')).innerHTML = 'item0';
  3. ul.insertAdjacentHTML("afterbegin", '<li>item-1</li>');

开头增加一个

  1. // 末尾增加一个
  2. ul.appendChild(document.createElement('li')).innerHTML = 'item4';
  3. ul.insertAdjacentElement("beforeend", document.createElement('li')).innerHTML = 'item5';
  4. ul.insertAdjacentHTML("beforeend", '<li>item+1</li>');

末尾增加一个

  1. // 增加多个
  2. const frag = document.createDocumentFragment();
  3. for (let i = 0; i < 2; i++) {
  4. frag.appendChild(document.createElement('li')).textContent = 'item+'+(i+2);
  5. }
  6. ul.appendChild(frag);

增加多个

  1. // 删除第3个
  2. ul.removeChild(document.querySelector('#list>.item:nth-of-type(3)'));

删除

  1. // 修改第3个
  2. const replaceItem = document.createElement('li');
  3. replaceItem.innerHTML = 'item2-2';
  4. document.querySelector('#list>.item:nth-of-type(3)').replaceWith(replaceItem);

修改

  1. // 第一个子元素
  2. console.log(document.querySelector('#list').firstElementChild);
  3. // 最后一个
  4. console.log(document.querySelector('#list').lastElementChild);
  5. // 父节点
  6. console.log(document.querySelector('li:first-of-type').parentElement);
  7. // 第7个元素
  8. const seven = document.querySelector("#list>li:nth-of-type(7)");
  9. // 前一个兄弟
  10. console.log(seven.previousElementSibling.innerHTML);
  11. // 后一个兄弟
  12. console.log(seven.nextElementSibling.innerHTML);

查找元素

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议