（13）JavaScript之[HTML DOM元素][JS对象]

元素

/**
* HTML DOM 元素（节点）*/

//创建新的HTML元素
var para = document.createElement('p');
var node = document.createTextNode('这是一个新段落');
para.appendChild(node);

var box = document.getElementById('box');
box.appendChild(para);

//删除已有的HTML元素
box.removeChild(para);

对象

/***
 * 对象：带有属性和方法的特殊数据类型
 * 内建对象：String、Date、Array
 *
 * 创建对象的方法：
 * 1.创建直接的实例或literals模式
 * 2.使用对象构造器
 *
 * JavaScript 基于 prototype，而不是基于类的。
 */

//创建直接的实例
var person = new Object();
person.firstName = 'Liu';
person.lastName = 'QiuChen';
person.age = 100;
person.favorite = 'animals';

console.log(person);

//literals模式
var rabbit = {
    firstName: 'Er',
    lastName: 'Bao',
    age: 18,
    favorite: 'lqc'
};

console.log(rabbit);

//使用对象构造器
function Obj(firstName, lastName, age, favorite) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age =age;
    this.favorite = favorite;

    this.f = function () {
        console.log('这是构造函数里的方法');
    };
}


var obj1 = new Obj('Hua', 'Dou', 50, 'family');
console.log(obj1);

//遍历对象
for(var variable in obj1) {
    console.log(variable + ": " + obj1[variable]);
}