javascript高级程序设计总结之四
来源：互联网 发布：caxa线割编程 编辑：程序博客网 时间：2024/06/05 03:23
prototype原型的总结：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove 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，其他浏览器都支持innerTextfunction 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.0var 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" onclick="scrollToTop()" value="向上" /></body></html>
