今天完成的事情：今天学了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 = 0; i < myCollection.length; i++) {
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: 50, eyecolor: "blue" }
document.write(person.firstname + " is " + person.age + " years old.");
</script>
运行结果同样的
使用对象构造器使用函数来构造对象：
<script>
function person(firstname, lastname, age, eyecolor) {
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(firstname, lastname, age, eyecolor) {
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(first, last, age, eye) {
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(first, last, age, eye) {
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(first, last, age, eye) {
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(first, last, age, eye) {
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(first, last, age, eye) {
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>
运行结果
明天回顾一下前面的内容然后继续后面的部分
返回列表
评论