js基础(面向对象编程、BOM、DOM)

文章介绍了JavaScript中的面向对象编程,包括原型和类class的继承方式。同时,讲解了BOM(浏览器对象模型)中的window对象、navigator对象、screen对象、location对象和history对象。此外,还详细阐述了DOM(文档对象模型)的操作,如获取、更新、删除和添加DOM节点的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

面向对象编程

面向对象:js,Java,c++

类 class :模板
对象:实例


js存在区别,可以使用原型套前边一样的模板,也可以使用class继承

①原型

格式:对象._proto_

如下,小明的原型是person,继承了person的方法和属性

        var person = {
            name:"mimo",
            age:5,
            run:function(){
                console.log('run'+this.name);
            }
        }

        var xiaoming = {
            name:'xiaoming',

        }

        xiaoming.__proto__ = person;

xiaoming也有了run()方法

② class继承

class关键字在es6引入

  • 定义一个学生的类
        //定义一个学生的类
        class student{
                    constructor(name){
                        this.name=name;
                    }
                    hello(){
                        alert('hello');
                    }
                }
        var xiaoming = new student('xiaoming');

在这里插入图片描述

  • 继承class B extends A
    super访问父类的属性和方法
    super(name)
    super.hello()
        class student{
                    constructor(name){
                        this.name=name;
                    }
                    hello(){
                        alert('hello');
                    }
                }
        
        class xiaoxuesheng extends student{
            constructor(name,grade){
                super(name);
                this.grade=grade;
            }
            mygrade(){
                alert('me');
            }
        }
        var xiaoming = new student('xiaoming');
        var xiaoqing = new xiaoxuesheng('xiaoming',1);

原型链:每个个构造函数都有一个对象原型,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。

原型链

2.操作BOM对象

B:浏览器
BOM:浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。


  • window
    window代表 浏览器窗口

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

  • Navigator 对象包含有关浏览器的信息。
    https://www.runoob.com/jsref/obj-navigator.html

  • screen
    Screen 对象包含有关客户端显示屏幕的信息

      screen.width
      screen.height
    
  • location
    代表当前页面的URL信息

  • document
    代表当前页面,HTML DOM文档树

可以获取具体的文档树节点
获取网页的cookie,从而获取本地信息

document.cookie

服务器端可以设置cookie:httpOnly保证信息安全

  • history
    代表浏览器的历史记录

      history.back();  //后退
      history.forward();  //前进
    

3.操作DOM对象

DOM:文档对象模型

核心:浏览器网页是一个DOM树形结构

四个操作:

  • 更新:更新DOM节点
  • 遍历:遍历DOM节点,得到DOM节点
  • 删除:删除一个节点
  • 添加:添加一个新的节点

①要操作一个DOM节点需要先获得DOM节点
获得节点如下

<script>

        var a = document.getElementsByTagName('h1');
        var b = document.getElementById('p1');
        var c = document.getElementsByClassName('p2');
        
        var father=document.getElementsByClassName('father');
        var children = father.children;
        
</script>
<body>

    <div class="father">
        <h1>biaoti</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    
</body>

②更新节点

js代码写在后边防止意外

<body>
    <div id="id1">
        
    </div>
</body>

<script>

    var id1 = document.getElementById('id1');
    
 </script>

给id1设置内容

	id1.innerText='123' 

在这里插入图片描述

解析html文本,插入标签内容

id1.innerHTML='<strong>123</strong>' 


在这里插入图片描述

样式操作

属性使用字符串包裹
在这里插入图片描述
③ 删除节点

删除节点的步骤:先获取父节点,然后再通过父节点删除自己

<body>
    <div id="father">
        <h1>标题</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    
</body>

<script>

    var self = document.getElementById("p1");
    var father = document.getElementById("father");
    
 </script>
father.removeChild(p1) 

删除子节点p1 ^

p1.parentElement 

找到p1的父节点^

father.children[0]

找到第一个孩子^

father.children

找到所有孩子^

如果想要删除所有子节点,想当然觉得可以如下步骤删除

father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

删除的js操作删除是一个动态的删除,完成第一条后就只剩两条,此时就没有father.children[2]了,所以会报错

④插入节点

我们获得了某个DOM节点后,
假设节点为空,就可以通过innerHTML增加一个元素
假设节点已经存在元素可,再用innerHTML就会覆盖原来的元素,出问题了

追加操作

  • 操作一:将已经存在的元素追加到需要的地方

代码如下,我们通过对list运用

list.appendChild(js)

将div外的p元素追加到div内做子元素

<body>
    <p id="js">js</p>
    <div id="list">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>
    
</body>

<script>

    var js = document.getElementById("jd");
    var list = document.getElementById("list");
    
 </script>


在这里插入图片描述

在这里插入图片描述
操作二:将新节点追加到需要的地方

    var js = document.getElementById("js");
    var list = document.getElementById("list");
    //创建一个新的p元素
    var newp = document.createElement("p");
    newp.id = "newp";
    newp.innerText="hello";
    
list.appendChild(newp) 

效果:
在这里插入图片描述方法三:通过setAttribute(" qualifiedname “,” value");可以给增添的元素设置任何属性

如下:给list父元素下增添type="./js/qj.js"的元素

    myscript.setAttribute("type","./js/qj.js");
    var myscript = document.createElement("script");
    myscript.setAttribute("type","./js/qj.js");

完成元素的创造后通过appendchild增添在list下

所得如图:

在这里插入图片描述

方法四:把一个元素查到另一个元素的某一个子节点的前面

    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    list.insertBefore(js,ee);

将js元素插入到ee的前面

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值