js：面向对象，Document对象：查找元素对象，修改元素，事件

Posted 2021-12-12 406070989senlin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js：面向对象，Document对象：查找元素对象，修改元素，事件相关的知识，希望对你有一定的参考价值。

面向对象编程

面向对象的编程，那么是更符合人类所接触的世界的逻辑思维。

将一个系统划分为各个子系统，子系统又由各个模块构成，将每个模块，系统划分为一个个对象，给这些对象赋予某些角色（属性/功能/方法）。

伪面向对象编程语言 ---> 面向对象编程语言

1、创建对象的方式

(1) 字面量的方式

//字面量的形式

var student = {

name:"蔡徐坤",

type:"练习生",

like:"唱跳rap篮球",

rap:function(){

console.log("鸡你太美")

}

console.log(student)

student.rap()

优点：写起来简单方便

缺点：如果要生成大量的类似的对象，那么将会写一堆重复的代码

(2) 工厂模式

优点：可以快速生成批量的对象

缺点：对象的同样的方法（函数），每创建一个对象，都会生成一个一摸一样新的函数，所以会占内存

/工厂模式

function Student(name,type,like){

return {

name:name,

type:type,

like:like,

rap:function(){

console.log("鸡你太美")

}

var s1 = Student("蔡徐坤1","篮球运动员",‘篮球‘)

console.log(s1)

(3) 构造函数创建对象

//构造函数

function Teacher(){

this.name = "苍老师";

this.type = "老师";

/*this.movies = function(){

console.log("拍电影")

}*/

}

//设置创建对象的原型函数

Teacher.prototype.movies = function(){

console.log("拍电影1")

}

//如果不用new来构建函数，那么就是一个普通的函数调用,并且this的指向是window

//如果用了new,就会创建一个新的对象，并且将对象给到t1.

var t1 =new Teacher()

console.log(t1)

原型链：原型上不断继承原型，从而形成原型链。

(4) ES6的class写法

//语法糖,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的javascript的标准。

class Cat{

constructor(){

this.name = "波斯猫"

}

run(){

console.log("会跑")

}

say(){

console.log("喵喵喵")

}

var c1 = new Cat()

console.log(c1)

继承extends

class cxk{

rap(){

console.log("鸡你太美")

}

// var c1 = new Cat()

// console.log(c1)

class Cat extends cxk{

constructor(){

super()//super这个关键词，是调用继承的class的构造函数

this.name = "波斯猫"

}

run(){

console.log("会跑")

}

say(){

console.log("喵喵喵")

}

var c1 = new Cat()

console.log(c1)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1.字面量的形式
            var student={
                name:"杨超越",
                type:"101"    ,            
                like:"唱歌",
                rap:function(){
                    console.log("超越，超越，超越一切")
                }
            }
            console.log(student)
            student.rap()
            //2.工厂模式
            function student1(name,type,like){
                return{
                    name:name,
                    type:type,
                    like:like,
                    rap:function(){
                        console.log("宣仪，宣仪")
                    }
                }
            }
            var s1=student1("吴宣仪","歌手","跳舞")
            console.log(s1)
            s1.rap()
            
            
            //3.构造函数
            
            function student2(){
                this.name="孟美岐",
                this.like="唱歌"
            }
            //设置创建对象的原型函数(也就是上面)
            student2.prototype=s1
            
            student2.prototype.mo=function(){
                console.log("美岐，美岐")
            }
            //如果不用new来构建函数，那么就是一个普通的函数调用,并且this的指向是window
        //如果用了new,就会创建一个新的对象，并且将对象给到t1.
            var t1=new student2()
            console.log(t1)
            t1.mo()
            
            
            
            
            
            
            
            
            
            
            //语法,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的JavaScript的标准。
            class huojian101{
                constructor(){
                    this.name="杨超越"
                }
                run(){
                    console.log("会跑，会唱，会跳")
                }
                say(){
                    console.log("喵喵喵")
                }
            }
            
            
            
            var b1=new huojian101
            console.log(b1)
            b1.run()
            b1.say()
            
            
            class bo{
                rop(){
                    console.log("会啵啵啵")
                }
            }
            
            //继承
            class huojian1001 extends bo{
                
                constructor(){
                    super()
                    this.name="杨超越"
                }
                run(){
                    console.log("会跑，会唱，会跳")
                }
                say(){
                    console.log("喵喵喵")
                }    
            }
            var b2=new huojian1001()
            console.log(b2)
            b2.run()
            b2.say()
            b2.rop()
            
        </script>
    </body>
</html>

DOM对象

DOM对象，就是HTML页面的文档对象。整个网页的显示，都由Document对象文档对象构成。文档对象又有许多的元素对象构成。文档对象就有许多的属性和方法，用来操纵整个页面的显示，以及事件的处理。所有的元素对象最终组成庞大的dom树。

查找元素对象

//ES5以前查找元素的方式

//通过ID查找元素对象

var d1 = document.getElementById("d1")

console.log(d1)

//通过class查找元素对象

var abc = document.getElementsByClassName(‘abc‘)

console.log(abc)

//通过标签名称查找元素对象

var div = document.getElementsByTagName("div")

console.log(div)

//ES5以后的查找方式

//选择单个元素，document.querySelector,选择器的写法，直接使用css选择器的写法,选择器如果能够匹配过个元素，那么只选择第一个元素,

var div1 = document.querySelector("div")

console.log(div1)

var id1 = document.querySelector("#d1")

console.log(id1)

var abc1 = document.querySelector(‘body .abc‘)

console.log(abc1)

//选择多个元素,document.querySelectorAll()

var abc2 = document.querySelectorAll("#d1")

console.log(abc2)

for(var i =0 ;i<abc2.length;i++){

abc2[i].innerHTML +=i

abc2[i].style.background="green"

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="d1" class="abc">
            helloworld
        </div>
        <div id="d1" class="abc">
            helloworld
        </div>
        <script type="text/javascript">
            //ES5以前查找元素的方式
            //通过ID查找元素对象(只显示找到的第一个)
            var d1=document.getElementById("d1")
            console.log(d1)
            //通过class查找元素对象
            var abc=document.getElementsByClassName("abc")
            console.log(abc)
            //通过标签名称查找元素对象
            var div=document.getElementsByTagName("div")
            console.log(div)
            
            
            
            
            
            
            
            //ES5以后的查找方式
            //选择单个元素，document.querySelector,选择器的写法，直接使用css选择器的写法,选择器如果能够匹配过个元素，那么只选择第一个元素,
            var div1=document.querySelector("div")
            console.log(div1)
            var id1=document.querySelector("#d1")
            console.log(id1)
            var abc1=document.querySelector("body .abc")
            console.log(abc1)
            
            //选择多个元素,document.querySelectorAll()
            var abc2=document.querySelectorAll("#d1")
            console.log(abc2)
            
            //元素后面加i，改变元素背景颜色
            for (var i=0;i<abc2.length;i++) {
                abc2[i].innerHTML +=i
                abc2[i].style.background="green"
            }
            
            
            
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .list{
                width: 400px;
                position:absolute;
                left:-400px;
                top: 0;
                transition: :all 2s;
            }
            .listOut{
                width: 400px;
                position:absolute;
                left:0px;
                top: 0;
                transition: :all 2s;
            }
            .list img{
                width: 400px;
            }
            .btn{
                position: absolute;
                left: 20px;
                top: 20px;
                z-index: 1;
            }
            
            
            
            
            
            
        </style>
    </head>
    <body>
        <div class="main">
            <div class="btn">切换</div>
            <div class="list">
                <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/>
            </div>
        </div>
        
        <script type="text/javascript">
            var btn=document.querySelector(".btn")
            var list=document.querySelector(".list")
            //鼠标点击效果
            btn.onclick=function(){
                console.log(list.className)
                if (list.className=="list") {
                    list.className="listOut"
                } else{
                    list.className = "list"
                }
            }
            
            
            
            
            
            
            
            
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        .h{
            
            width: 50px;
            height: 50px;
            font-size: 50px;
        }
    </style>
    </head>
    <body>
<h1>helloworld</h1>
<script type="text/javascript">
    //1、获取对象
    var h1=document.querySelector("h1")
    //2、设置样式
//注意：凡是用-拼接的词组，都去掉-,然后首字母改为大写进行拼接成一个单词
h1.style.background="skyblue"
    h1.style.backgroundColor="yellow"
    
    
    
    
    //第二种方式修改dom的样式
//创建style标签，里面写好相对应的样式

//创建元素
var s1=document.createElement("style")
//设置s1的innerHTML的内容
s1.innerHTML="h1{color:red}"
document.body.appendChild(s1)
    
    
    
//第三种设置dom对象的类名
h1.className="h"
    

</script>
    </body>
</html>

事件

3种定义事件的方式

On事件名称：

优点：简单方便

缺点：只能一个事件调用1个函数。只有冒泡

h1.onclick = function(){

h1.style.backgroundColor = "deeppink"

}

AddEventlistener:

优点：同一事件可以调用多个函数，这个模式下，可以设置事件是捕获还是冒泡，默认是冒泡。

h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))

事件对象

每一个事件调用的执行函数，都会默认传入一个事件对象，这个对象会包含当次事件的相关信息。

冒泡事件

事件由最里面一层一层向上触发，直到HTML元素，那么这种事件模式就是冒泡事件。一般情况下就用冒泡。

捕获事件

由HTML开始一层一层向下出发，直到最小的子元素，那么这种事件模式就是捕获

点击事件 click单机，dblclick双击

鼠标事件

按键事件

手指的触屏事件

聚焦事件

文档的加载事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        .h{
            
            width: 50px;
            height: 50px;
            font-size: 50px;
        }
    </style>
    </head>
    <body>
            <!--这种写在html上的事件非常少用，因为html与js耦合在一起，尽量少的去创建全局变量-->
        <h1 onclick="abc()">helloworld</h1>

<script type="text/javascript">
var h1=document.querySelector("h1")
//h1.on事件名称 = 事件执行函数
//鼠标点击事件
h1.onclick=function(){
    h1.style.backgroundColor = "deeppink"
}



    //es5出的事件方式
    function abc(){
                console.log(123)
                h1.style.color = "skyblue"
            }

h1.addEventListener("click",abc)

//另一种写法----------------------------------------------
h1.addEventListener(‘click‘,function(e){
                h1.style.backgroundColor = "green"
            })






//冒泡(从里到外的执行顺序)
            var h1 = document.querySelector("h1")
h1.addEventListener("click",function(e){
                console.log(‘h1点击事件‘)
            },false)

var body =document.querySelector("body")
body.addEventListener("click",function(){
                console.log("body点击事件")
            },false)


             //捕获（从外到里的执行顺序）
            h1.addEventListener("click",function(){
                console.log(‘h1点击事件‘)
            },true)
            
            //var body = document.body
            var body = document.querySelector(‘body‘)
            body.addEventListener("click",function(){
                console.log("body点击事件")
            },true)




var h1 = document.querySelector(‘h1‘)
            h1.onclick = function(event){
                //事件对象会存放这一次事件的相关信息
                console.log(event)
            }

</script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <input type="text" name="input" id="input" value="" />
        
        <h1>helloworld</h1>
        <script type="text/javascript">
            var h1 = document.querySelector(‘h1‘)
            h1.onclick = function(event){
                //事件对象会存放这一次事件的相关信息
                console.log(event)
            }
            
            
            
            
            
                var input1=document.querySelector("#input")
            //键盘按下事件
        input1.onkeydown= function(event){
                console.log(event)
            }
            //键盘弹起事件
            input1.onkeyup = function(event){
                console.log(event)
            }
                //键盘按下press,按下加弹起为1个事件
            input1.onkeypress = function(event){
                console.log(event)
            }
            
        </script>

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<style type="text/css">
        h1{
                width: 500px;
                height: 400px;
                background: skyblue;
            }
            .circle{
                width: 20px;
                height: 20px;
                background: red;
                border-radius: 10px;
                position: absolute;
                
            }
</style>
    </head>
    <body>
        <h1>helloworld</h1>
        <script type="text/javascript">
        
        var h1=document.querySelector("h1")
        //鼠标移入某个元素
        
        h1.onmouseenter = function(event){
                console.log(event)
                h1.style.background = "green"
            }
            
            //鼠标移出某个元素
            h1.onmouseleave = function(event){
                console.log(event)
                h1.style.background = "purple"
            }
            
            //鼠标在某个元素上移动
            h1.onmousemove = function(event){
                console.log(event)
                
                var div = document.createElement(‘div‘)
                div.className = "circle"
                div.style.left = event.clientX + "px";
                div.style.top = event.clientY + "px";
                h1.appendChild(div)
                
            }
            
            //鼠标悬浮在某个元素上
            h1.onmouseover = function(){
                console.log("onmouseover")
            }
        

        </script>

    </body>
</html>

打字游戏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1{
                text-align: center;
            }
            .alert{
                width: 500px;
                height: 300px;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -250px;
                margin-top: -150px;
                background: orangered;
                color: #fff;
                text-align: center;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <h1></h1>
        <div id="djs">
            还剩：10s
        </div>
        <script type="text/javascript">
            var count = 0;
            
            var time = 10
            
            //可以随机生成26个字母到h1标签
            function createMathChar(){
                //随机生成1单词，26个字母里的一个
                var num = parseInt(Math.random()*26+97)  //Math.random()生成[0-1)的随机值,parseInt实现向下取整数
                //将随机值生成字母
                var mathStr = String.fromCharCode(num)
                //将字母放入h1标签
                var h1 = document.querySelector(‘h1‘)
                h1.innerHTML = mathStr
            }
            
            createMathChar()
            
            
            var body = document.body;
            body.onkeypress = function(event){
                var h1 = document.querySelector(‘h1‘)
                if (event.key == h1.innerHTML){
                    count ++;
                    console.log(count)
                    createMathChar()
                }
            }
            
            
            //间隔函数
            var interTime = setInterval(function(){
                time --
                var djs = document.querySelector(‘#djs‘)
                djs.innerHTML = "还剩："+time+"s";
                if(time==0){
                    clearInterval(interTime)
                    /*alert("您每分钟打字速度为"+count*6+"字！")*/
                    var d1 = document.createElement(‘div‘)
                    d1.className = "alert"
                    d1.innerHTML = "<h1>您每分钟打字速度为"+count*6+"字！</h1>"
                     //关闭事件

                    document.body.appendChild(d1)
                    body.onkeypress = null;
                }
            },1000)
            
            
            
            
            
        </script>
    </body>
</html>

以上是关于js：面向对象，Document对象：查找元素对象，修改元素，事件的主要内容，如果未能解决你的问题，请参考以下文章

JS的应用（document对象）

JS04 DOM 文档对象模型 P1 查找元素改变内容绑定事件

前端学习记录 JS DOM

[js高手之路] javascript面向对象写法与应用

Document对象

js知识汇总