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

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

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

body中添加 html

    <ul id="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
    </ul>

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

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

// 声明一个构造函数
function User(name, email) {
    this.name = name;
    this.email = email;
}
// 构造函数的原型上添加属性和方法
// 原型属性
User.prototype.nation = "China";
// 原型方法
User.prototype.show = function () {
    return {
        name: this.name,
        nation: this.nation,
        gender: this.gender,
    };
};
// 实例对象的原型从构造函数的原型继承成员(属性/方法)
// 实例对象的原型指向它的构造函数的原型
const user1 = new User("a");
// 示例对象的原型
user1.__proto__.gender = "男";
// 实例对象的原型指向它的构造函数的原型
// 返回 true
console.log(user1.__proto__ === User.prototype);
// 继承构造函数原型的属性 nation 和方法 show
const user2 = new User("b");
// 返回 China {name: "b", nation: "China", gender: "男"}
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

// css 选择器
// 获取满足条件的所有元素
const lis = document.querySelectorAll("#list>.item");
lis.forEach(item => console.log(item));
// 获取满足条件的第一个元素
const li = document.querySelector("#list>.item");
console.log(li);

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

• 增

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

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

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

• 删

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

• 改

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

• 查

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