web前端--JavaScript（三）对象、函数、DOM&BOM

最新推荐文章于 2024-10-02 21:42:33 发布

前端小窝

最新推荐文章于 2024-10-02 21:42:33 发布

阅读量205

点赞数 1

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/weixin_44105459/article/details/102670305

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

根据上一篇博客思路，js从对象、函数、DOM和BOM再到jQuery入手。今天总结前三者，最后的DOM还没学完，再更。

一、js对象

(一)js对象创建方法：
1、使用对象文字–属性：值(最常用)
2、使用关键词new
3、对象构造器，创建构造类型的对象
4、ECMAScript5中函数Object.create()

（二）访问对象属性
person.name
person[“name”]
x=name;person[x]
person.nationality = “English”;添加属性
delete person.age;删除属性和值
（三）方法
构造器函数，即在对象中，使用函数来创建属性
language: function(){ return this.age}
（四）对象访问器get和set
get lang() {
return this.language;
}

set先在对象中创建属性，值为空
在对象外赋值
language : “”,
set lang(lang) {
this.language = lang;
};
// 使用 setter 来设置对象属性：
person.lang = “en”;
（五）对象构造器
先定义function函数作为对象构造器函数（一般函数名首字母大写），再创建对象的时候，调用function方法 function Person{}
使用new来创建对象， bob=new Person{}; alice=new person{}
注意：不能为已有的对象构造器添加新属性（报错undefined）；
如需向构造器添加一个新属性，则必须把它添加到构造器函数，或者使用prototype，即Person.prototype.nationality = “English”;
了解：ECMAScript添加或更改对象属性值Object.defineProperty(person, “year”, {value:“2008”});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
    var person=new Object();
    person.name = "bob";
    var person2 = {
        name:"Alice",
        language:"en",
        get lang () {
            return this.language;
        }
    }

    document.getElementById("demo").innerHTML= "His name is "+person.name;
    //document.write("His name is "+person.name);

    var obj = {
        counter : 0,
        get reset() {
            this.counter = 3;
        },
        get increment() {
            this.counter++;
        },
        get decrement() {
            this.counter--;
        },
        set add(value) {
            this.counter += value;
        },
        set subtract(value) {
            this.counter -= value;
        }
    };

    // 操作计数器：
    obj.reset;
    obj.add = 5;
    obj.subtract = 1;
    obj.increment;
    obj.decrement;
    document.getElementById("demo").innerHTML=obj.counter;

</script>

</body>
</html>

二、函数

(一)声明函数的几种方式：
1、函数声明function myf{return ab；} 最常见，常用，结尾一般不加分号
2、函数表达式，匿名函数 var myf= function(a,b){return ab}；在结尾加分号
3、Function() 构造器通过new var myF = new Function(“a”, “b”, “return a * b”); 一般不用new
4、箭头函数（ES6） const x=(x,y) =>x*y;

（二）函数参数
函数不对参数进行检查
如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。
如果参数太多，使用argument来调用

（三）函数call()方法，使一个对象能调用另一个对象的方法
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
var person1 = {
firstName:“Bill”,
lastName: “Gates”,
};
person.fullName.call(person1); // 将返回 “Bill Gates” person的方法用于person1
person.fullName.call(person1, “Seattle”, “USA”); call带的参数根据方法来

（四）apply（）方法同call，区别：apply带参数时以数组形式带
person.fullName.apply(person1, [“Oslo”, “Norway”]);
注：js中对数组没有max(),采用Math.max()
闭包：嵌套函数中的子函数可以访问父函数的变量，子函数的变量相当于是私有的

三、DOM（文档对象模型）&BOM

（一）简介
DOM文档对象模型，通过DOM，js能创建动态html。简单说，HTML DOM能增删改查HTML元素。
DOM方法：在HTML上执行的动作，各种函数；DOM属性，改变元素的值。
如getElementById方法，innerHTML属性。

（二）document
DOM文档对象，通过document的方法对元素增删改查。
增：
document.createElement(“demo2”)创建 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.write(text) HTML 输出显示
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序
删：
document.removeChild(element) 删除 HTML 元素
改：
element.attribute = new value 改变 HTML 元素的属性值
document.replaceChild(element) 替换 HTML 元素
查：
document.getElementById(id) 通过元素 id 来查找元素，（最常用）
document.getElementsByTagName(name) 通过标签名来查找元素（a，p，h这些）
document.getElementsByClassName(name) 通过类名来查找元素
document.querySelectorAll(“p.class1”); 通过 CSS 选择器查找元素，

（三）修改HTML元素
document.write()，千万不要在文档加载后使用 document.write()，这么做会覆盖文档；
document.getElementById(id).innerHTML = 新内容
document.getElementById(id).attribute = 新值，
如document.getElementById(“myImage”).src = “landscape.jpg”;
document.getElementById(“p2”).style.color = “blue”;

（四）事件
onclick点击按钮，可以字体颜色变化等
onmouseover和onmouseout：鼠标移到、移开该位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">
        #container{
            width:400px;
            height: 400px;
            position: relative;
            background-color: darkcyan;
        }
        #small{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: coral;
        }
    </style>
</head>
<body>
<h1 id="id1">我是标题</h1>
<button type="button"  onclick=document.getElementById("id1").style.color="red">点我变色</button>
<button type="button"  onclick="move()">点我移动</button>

<div id="container">
    <div id="small">
    </div>
</div>
<p id="time1"></p>
<button type="button" onclick="displayDate()">点我显示时间</button>
<script>
    function move() {
        var elem=document.getElementById("small");
        var pos=0;
        var id=setInterval(frame, 5);
        function frame() {
            if (pos == 150){
                clearInterval(id);
            }else{
                pos++;
                elem.style.top = pos+ "px";
                elem.style.left = pos+ "px";
            }
        }
    }
    function displayDate() {
            document.getElementById("time1").innerHTML = Date();
    }

</script>

</body>
</html>

在这里插入图片描述
（五）节点
DOM中元素节点不包含文本教程节点为title，教程要通过innerHTML访问
var x= document.getElementById(“demo”).innerHTML;innerHTML=firstChild.nodeValue,
childNodes[0].nodeValue第一个子节点
对节点的操作：增删改查
增：var element = document.getElementById(“div1”);
element.appendChild(para);在div1中增加一个p节点
element.insertBefore(para, child);在div中，前面插入一个p
删：parent.removeChild(child);parent是div1，child是一个p
child.parentNode.removeChild(child);利用parentNode属性找到父，再删子
改：parent.replaceChild(para, child);
查：document.getElementById()
节点列表 var myNodeList = document.querySelectorAll(“p”);
通过querySelectorAll() chileNodes得到节点列表情况
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = “red”;
}改变所有p节点颜色

（六）BOM
Browser Object Model浏览器对象模型：允许js与浏览器对话
获取浏览器宽和高，适用所有浏览器
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;