构造函数|对象原型-dom获取-增删改查
- 举例说明构造函数的原型与对象原型之间的区别与联系;
- 举例演示获取dom元素的常用方法;
- 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
- html:
// 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);