构造函数和dom操作 - js - php中文网博客

首页 > 博客列表 > 构造函数和dom操作

博主信息

博文 37

粉丝 0

访问量 44345

专题推荐

更多>

构造函数

构造一个函数都有一个原型属性：prototype
本质上构造函数跟普通函数是没有区别。
构造函数的特征：

prototype对于普通函数没用，对构造函数才有用
构造函数是对象工厂，是用来创建对象的
对象也叫实例，实际案例
js中没有类的概念，他是基于原型的语言，所以可以简单的将构造函数当成类
构造函数必须使用new 来调用，普通函数不用
new的过程就是类的实例化过程，就是创建一个对象的过程
创建对象的过程就叫类的实例化

//声明一个构造函数
function User(name,email){
this.name=name;
this.email=email;
}
const user=new User("小红","12@qq.com");
user.__proto_num=123;
console.log(user.num);
console.dir(User.prototype);

可以发现构造函数的prototype内也有一个num属性。
实例的原型永远指向它的构造函数的原型，实例的原型从构造函数的原型继承成员(属性或方法);
user.__proto__===User.prototype;
注意：需要被所有实例共享的成员，应该写到构造函数的原型上
User.prototype.salary="123";
属性通常不应该共享的，他是区分不同对象的标志，方法更适合共享

User.prototype.show=function(){
  return {name:this.name,email:this.email};
}

es6中的类

es6中的类特点

使用class声明类
构造方法使用constructor
静态方法无需实例调用，类就可直接调用，使用static声明
私有成员，不能被外界调用，子类也不可以使用 #声明。如果想拿到私有成员可以使用访问器属性来调用

class User2{
        //代表构造方法
  constructor(name,email){
            this.name=name;
            this.email=email;
        }
//原型方法
   show(){
return {name:this.name,email:this.email}
}
 //静态方法：不需要通过对象调用，直接用类调用就行
static fetch(){
  return this.hello(this.userName);
}
  static userName="小明";
 static hello(name){
     return name;
}
 // 私有成员，只能再本类中使用，类外，子类不能调用
        #age=20;
        set age(num){
           this.#age=num;
        }
        get age(){
            return this.#age;
        }
    }
const user1=new User("累累","12@qq.com");
console.log(user1.show());
console.log(User2.fetch());
user1.age=30;
console.log(user1.age);

类的继承

子类继承父类，需要注意this的指向，使用super来调用父类的构造

class Child extends User2{
       //子类继承父类的功能，可以拥有自己的属性或方法
       //子类不饿能访问父类的私有成员
       constructor(name,email,gender){
        //调用父类构造方法，确定this指向
           super(name,email);
           this.gender=gender;
       }
       show(){
           return {name:this.name,email:this.email,gender:this.gender};
       }
   } 
  const child=new Child("工人","123@qq.com",'男');
  console.log(child.show());

dom操作

dom元素获取

1.querySelectorAll获取全部元素返回数组。
2.querySelector获取单个元素

<body>
  <ul id="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
  </ul>
    <script>
        // 1.获取dom元素 返回所有li
        const lis=document.querySelectorAll("#list li");
        // lis是一个类数组
        let lisArr=Array.from(lis);//改为数组
        console.log([...lis]);//转为数组
        //lis类数组可以直接使用forEach()遍历
        lis.forEach(function(item){
            console.log(item);
        });
     //2.返回一个
     let first=document.querySelector("#list li");

快速获取某个元素

获取html元素
document.documentElement;
获取head元素
document.head;
获取body元素
document.body;
获取title
document.title;
获取表单
document.froms[0]或者document.froms.item(0);

dom的增删改查

//创建一个元素

        const body=document.body;
        const ul=document.createElement("ul");
        ul.classList.add("list");
        body.appendChild(ul);
        const li=document.createElement("li");
        li.innerHTML="item1";
        ul.appendChild(li);
        //将html字符串直接解析为dom元素
        let htmlStr='<i style="color:red">item2</i>';
        //htmlStr也可以写入多条语句
        ul.insertAdjacentHTML("beforeEnd",htmlStr);
        //如果大量添加元素应该使用文档片段完成
        const frag=new DocumentFragment();
        for(let i=0;i<5;i++){
            const li=document.createElement("li");
            li.textContent="item"+(i+1);
            frag.append(li);
        }

更新

       let h3=document.createElement("h3");
       h3.innerHTML="你好！";
       document.querySelector("li:nth-of-type(1)").replaceWith(h3);
       //父类操作
       ul.replaceChild(h3,document.querySelector("li:last-of-type"));

删除

  ul.removeChild(document.querySelector(".list h3"));

查询

    //查询
    // 获取所有子元素
console.log(ul.children);
// 获取子元素数量
console.log(ul.children.length);
console.log(ul.childElementCount);
//第一个元素
console.log(ul.firstElementChild);
//最后一个
console.log(ul.lastElementChild);
//父节点
console.log(ul.lastElementChild.parentElement);
//前一个兄弟
const er=document.querySelector(".list li:nth-of-type(2)");
console.log(er.previousElementSibling.innerHTML);
//后一个兄弟
console.log(er.nextElementSibling.innerHTML);

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html的基本标签介绍

2020-12-09 11:43:07