prototype原型的總結：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>PrototypeDemo</title>
<meta name="description" content="" />
<meta name="author" content="Administrator" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body>
<div>
<header>
<h1>PrototypeDemo</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div>
<script type="text/javascript">
function Person(){
}
/*
Person.prototype.name = "kinger";
Person.prototype.age = 29;
Person.prototype.job = "Software Enginner";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.name = "lonpo";
// alert(person1.name);
person1.sayName(); //先查詢實例person1是否有sayName（）方法，然後再找Person.prototype是否有該方法。
var person2 = new Person();
// person2.sayName();
// alert(person1.hasOwnProperty("name"));
// alert(person1 instanceof Person);
// alert(person1.constructor == person2.constructor); //true
// alert(person1.constructor == Person);
// alert(Person.prototype.isPrototypeOf(person1));
*/
/*
* 如果var person1 = new Person();
var person2 = new Person();放在前面定義，則alert（person1.name)就會出錯，undefined。
如果放在後面就沒有任何問題。
*/
// var person1 = new Person();
// var person2 = new Person(); //無法訪問Person.prototype中的屬性
Person.prototype = {
constructor : Person,
name : "kinger",
age : 29,
job : "software Engineer",
sayName : function(){
alert(this.name);
}
}
var person1 = new Person();
var person2 = new Person();
//alert(person1.name);
//alert(person1.constructor == Person);
/*
//組合繼承，集合了原型鏈和借用構造函數
function SuperType(){
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(){
SuperType.call(this);
}
SubType.prototype = new SuperType();
//下面的這條語句必須放在SubType.prototype = new SuperType();之後
SubType.prototype.sayAge = function(){
alert(this.age);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);
var instance2 = new SubType();
alert(instance2.colors);
*/
/*
//寄生組合式繼承，借用構造函數和寄生式繼承
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
}
*/
function createFunctions(){
var result = new Array();
for(var i = 0; i < 10; i++){
result[i] = i;
}
return result;
}
var funcs = createFunctions();
for(var i = 0; i < funcs.length; i++){
document.write(funcs[i] + "<br />");
}
var name = "The window";
var object = {
name : "My Object",
/*
getNameFunc : function(){
return function(){
return this.name;
}
}
*/
getNameFunc : function(){
return this.name;
}
}
alert(object.getNameFunc());
</script>
</div>
<footer>
<p>
© Copyright by Administrator
</p>
</footer>
</div>
</body>
</html>
DOM1，DOM2、DOM3總結：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Demo</title>
<style type="text/css">
#myCss{
background-color: red;
border: 1px solid black;
}
</style>
<link rel="stylesheet" href="mycss.css" />
</head>
<body>
<div id="myDiv" class="id" title="Body" lang="en" dir="rtl">Hello world!</div>
<input type="text" name="myElement" value="Text field">
<div id="myElement">A div</div>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="myCss" style="background-color: blue; width: 10px; height: 1200px;"></div>
<script type="text/javascript">
var html = document.documentElement; //取得<html>元素
//alert(html === document.childNodes[0]);
//alert(html === document.firstChild);
var body = document.body; //取得<body>元素
// alert(body === document.firstChild.childNodes[1]);
// alert(body === document.firstChild.lastChild);
var doctype = document.doctype; //取得對<!DOCTYPE>的引用
var originalTitle = document.title;
document.title = "New page Title";
var e = document.getElementById("myelement");
var hasXmlDom = document.implementation.hasFeature("HTML", "1.0");
// alert(hasXmlDom);
var element = document.getElementById("myDiv");
var id = element.attributes.getNamedItem("id").nodeType;
var className = element.attributes["class"].nodeName;
// alert(id);
// alert(className);
// alert(document.nodeName);
var myDiv = document.getElementById("content");
//myDiv.innerText = div.innerText; //去掉了所有的HTML標籤
//myDiv.innerText = "Hello World";
//myDiv.innerText = "Hello & welcome, <b>\"reader\"!<\/b>";
//firefox支持textContent，其他瀏覽器都支持innerText
function getInnerText(element){
return (typeof element.textContent == "string")? element.textContent : element.innerText;
}
function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
//setInnerText(myDiv, "Hello World");
//alert(getInnerText(myDiv));
//在IE中的innerHTML添加<script defer>和<style>元素
//myDiv.innerHTML = "<script defer>alert('hi');</scr"+"ipt>";
//myDiv.innerHTML = "_<script defer>alert('hi');</scr"+"ipt>"; //影響視覺，前面添加了_
//myDiv.innerHTML = "<div> </div><script defer>alert('hi');</scr"+"ipt>";
//myDiv.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');</scr"+"ipt>";
//針對opera、firefox和IE
//myDiv.innerHTML = "_<style type=\"text/css\">body{background-color: red;}</style>";
//取得第一個子節點的值由很多種div.childNodes.item(0).data，div.firstChild.nodeValue
//alert(myDiv.childNodes.item(0).data);
//alert(myDiv.firstChild.nodeValue);
//alert(myDiv.childNodes[0].nodeValue);
myDiv.removeChild(myDiv.firstChild);
//針對safari和chrome
//document.getElementsByTagName("head")[0].appendChild(div.firstChild);
myDiv.style.cssText = "width: 100px; height: 100px; background-color: green";
//alert(myDiv.style.length); //
var myCss = document.getElementById("myCss");
//alert(myCss.style.backgroundColor);
//myCss.style只包括了<div id="myCss" style="background-color: blue; width: 10px; height: 25px;"></div>定義的
//style樣式，但是不包括<head>定義的嵌入樣式，和外部樣式
//var computedStyle = document.defaultView.getComputedStyle(myCss, null);//FireFox,chrome,safari,opera
//var computedStyle = myCss.currentStyle; //IE
//alert(computedStyle.borderLeftWidth);
// alert(computedStyle.border);
var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
var supportsDOM2Views = document.implementation.hasFeature("Views", "2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");
var supportsDOM2Style = document.implementation.hasFeature("StyleSheets", "2.0");
var supportsDOM2Events = document.implementation.hasFeature("Events", "2.0");
var supportsDOM2Traversals = document.implementation.hasFeature("Traversal", "2.0"); //FireFox不支持
var supportsNodeInterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
alert("" + supportsDOM2Traversals + supportsNodeInterator + supportsTreeWalker);
//alert("" + supportsDOM2Core + supportsDOM3Core + supportsDOM2HTML + supportsDOM2Views + supportsDOM2XML + supportsDOM2Style+supportsDOM2Events);
//應該hasFeature（）函數的判斷，得出opera，chrome，firefox都支持DOM2.0，但是不支持3.0，而IE不支持任何DOM2.0,DOM3.0
var sheet = null;
//alert(document.styleSheets.length); //包含了<link>和<style>這2個樣式表
for(var i = 0, len=document.styleSheets.length; i < len; i++){
sheet = document.styleSheets[i];
//alert(sheet.href);
}
//是否位於頂部
function scrollToTop(){
var element = document.body;
if( element.scrollTop != 0){
element.scrollTop = 0;
}
}
//alert( document.compatMode == "BackCompat"); //混雜模式
</script>
<input type="button" οnclick="scrollToTop()" value="向上" />
</body>
</html>
