发表于: 2020-02-22 22:09:50

1 1535


今天完成的事情:今天学了js的HTML DOM 集合和HTML DOM 节点列表以及对象和prototype相关
明天计划的事情:继续学习js的后续内容

遇到的问题:概念比较难懂,后续会在看一下详细了解一下
收获:

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。

以下代码获取文档所有的 <p> 元素:


<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
    var myCollection = document.getElementsByTagName("p");
    document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>

运行结果

HTMLCollection 对象 length 属性

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
    var myCollection = document.getElementsByTagName("p");
    document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";
</script>

运行结果

修改所有 <p> 元素的背景颜色:


<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
    function myFunction() {
        var myCollection = document.getElementsByTagName("p");
        var i;
        for (i = 0i < myCollection.lengthi++) {
            myCollection[i].style.color = "red";
        }
    }
</script>


运行结果

点击之后

注意

HTMLCollection 不是一个数组!

HTMLCollection 看起来可能是一个数组,但其实不是。

你可以像数组一样,使用索引来获取元素。

HTMLCollection 无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

定义并创建对象的实例

使用函数来定义对象,然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

<script>
    var person = new Object();
    person.firstname = "John";
    person.lastname = "Doe";
    person.age = 50;
    person.eyecolor = "blue";
    document.write(person.firstname + " is " + person.age + " years old.");
</script>

运行结果


替代语法(使用对象 literals):

<script>
    person = { firstname: "John"lastname: "Doe"age: 50eyecolor: "blue" }
    document.write(person.firstname + " is " + person.age + " years old.");
</script>

运行结果同样的

使用对象构造器使用函数来构造对象:

<script>
    function person(firstnamelastnameageeyecolor) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.eyecolor = eyecolor;
    }
    myFather = new person("John""Doe"50"blue");
    document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>


运行结果同样的

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

<script>
    function person(firstnamelastnameageeyecolor) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.eyecolor = eyecolor;
        this.changeName = changeName;
        function changeName(name) {
            this.lastname = name;
        }
    }
    myMother = new person("Sally""Rally"48"green");
    myMother.changeName("Doe");
    document.write(myMother.lastname);
</script>

运行结果

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x;
        var txt = "";
        var person = { fname: "Bill"lname: "Gates"age: 56 };
        for (x in person) {
            txt = txt + person[x];
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>

运行结果

点击

JavaScript prototype(原型对象)

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
    function Person(firstlastageeye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    var myFather = new Person("John""Doe"50"blue");
    var myMother = new Person("Sally""Rally"48"green");

    document.getElementById("demo").innerHTML =
        "我的父亲年龄是 " + myFather.age + "。我的母亲年龄是 " + myMother.age
</script>


运行结果


一个已存在的对象构造器中是不能添加新的属性的:例如


<h2>JavaScript 对象</h2>

<p>你无法给构造函数添加新的属性。</p>

<p id="demo"></p>

<script>
    function Person(firstlastageeye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    Person.nationality = "English";

    var myFather = new Person("John""Doe"50"blue");
    var myMother = new Person("Sally""Rally"48"green");

    document.getElementById("demo").innerHTML =
        "我父亲的国籍是 " + myFather.nationality
</script>


运行结果


要添加一个新的属性需要在在构造器函数中添加:

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
    function Person(firstlastageeye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.nationality = "English";
    }

    var myFather = new Person("John""Doe"50"blue");
    var myMother = new Person("Sally""Rally"48"green");

    document.getElementById("demo").innerHTML =
        "我父亲的国籍是 " + myFather.nationality + "。我母亲的国籍是 " + myMother.nationality;
</script>


运行结果

prototype 继承

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法:

Date 对象从 Date.prototype 继承。

Array 对象从 Array.prototype 继承。

Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外,有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性:

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
    function Person(firstlastageeye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    Person.prototype.nationality = "English";

    var myFather = new Person("John""Doe"50"blue");
    document.getElementById("demo").innerHTML =
        "我父亲对国籍是 " + myFather.nationality
</script>

运行结果

当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法:

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
    function Person(firstlastageeye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    Person.prototype.name = function () {
        return this.firstName + " " + this.lastName
    };

    var myFather = new Person("John""Doe"50"blue");
    document.getElementById("demo").innerHTML =
        "我对父亲是 " + myFather.name(); 
</script>

运行结果

明天回顾一下前面的内容然后继续后面的部分


返回列表 返回列表
评论

    分享到