js基础例子dom+原型+oop基础知识记录01

//oo:概念是计算机中对于现实世界的理解和抽象的方法
//由计算机利用编程技术发展到现在的产物
//面向对象几要素
//对象：由属性和方法组成的集合
//属性：保存数据，存储在对象内存空间中的唯一的地方集合
//方法：在类外，函数叫函数，在类中，函数叫方法，用于完成想要的功能
//成员：属性与方法的统称
//创建方法3种方法
//1:直接量:语法{key:value};
//例1:

var object1={name:'python',age:25,
sex:'hello',
f1:function () {
console.log(this.sex);// hello
console.log(this);//这个this指向当前对象object1
}
};
//调用
object1.f1();
//实例化创建与调用
var obj1=new Object();
obj1.name1='hello';
obj1.age1=24;
obj1.fun1=function () {
console.log(this.age1);//24
};
obj1.fun1();
//    for(var a in obj1){
//        console.log(a+obj1[a])
//    }
// 如果程序叫创建的对象少时，建议使用var obj={}
//通过构造函数创建
function Add(a,b) {
this.a=a;
this.b=b;
this.c=function () {
console.log(this.a+this.b)
}
}
var add=new Add(3,4);
add.c();
//dom的操作:操作结构化文档的一组api(即xml/html)
//核心 dom操作页面中所有结构化文档（增，删，改，查）
//核心dom缺点：繁琐但功能全面
//html dom操作页面简化了流程 ，但无法完成功能
//document所有页面中<最大的老大>
//分以下几大类(根据级别来分，从小到大)
//标签:1> 属性:2>文本:3>document:9;
//dom对象类型
//nodeType:对象
//nodeValue:值
//nodeName:名称
//bom包含document
//原始类型比较使用2个等号
//引用类型比较使用3个等号
//&非短路逻辑  A&B  A为假 ，继续执行B，最终结果为false
//a||b a为真 b不会继续执行
//a|b A为真，继续执行B， 结果为true
//nodeName
//1:元素 标签 ，返回大写
//2:文本     #text
//3:document    #document
//假设判断是否是对应的类型
//if(node.nodeName=='BUTTON')
//nodeValue
//1:元素  null
//2:文本 文本内容
//dom树的关系
//父子关系
/*node
parentNode  每个节点最多可能有一个父节点
childNodes   返回子节点集合
firstChild   第一个子节点
lastChild    最后一个子节点
*
* 兄弟
*   previousSibling   上一个平级兄弟
*   nextSibling        下一个平级兄弟
*   注意：parentNode以外，都会受到空格，换行，制表符
*   干扰
*   解决方式：节点树   jq
*其他方式的dom树获取
* 父子
*    parentElementsNode;
*    children  --ie8
*    firstElementChild
*    lastElementChild
* 兄弟
*   nextElementSibling 下一个兄弟
*   previousElementSibling 上一个兄弟
*   递归调用:对相同数据进行操作时，使用递归函数内调用自身
*对象在内部访问其他方法和属性时，使用this
* 对象在外部访问对象方法与属性时，使用对象名
* 原型：父对象
* 父对象中的方法与属性子对象直接使用
* ，每个函数对象有一个prototype属性，指向对象{原型}
* 子对象都有一个属性__proto__指向对象{原型}
* 优点：节省内存空间
*       一次修改，处处生效，便于维护
*
* 原型链
*   一个对象有一个原型对象(也有一个原型对象)
*   判断一个对象类型
*   typeOf([]);Array
*   typeOf({});Object
*   []空数据-->Array--null
*   {}空对象-->Object--null
*   判断父对象是否在子对象原型链
*   父对象.prototype.isPrototypeOf(子对象),如果是返回true,否则是false
*   每一个对象都有原型，原型对象有一个属性__proto__
*   重载（js不支持）,但可以模拟，通过arguments[index]来进行重载
*   oop特点
*       封装：将属性和方法集中定义在一个对象中
*       继承：父对象中的成员，子对象中可以直接使用
*       多态：在不同情况下表现出不同状态
*
*       dom
*           html属性查找
*               id
*                   document.getELementById('id');//速度快
*               下面3个都返回的是一个数组集合
*               标签
*                   getElementsByTagName(标签)
*                   动态集合（代理），并非实际节点
*               name
*                   getElementsByName(name)
*               class
*                   getElementsByClassName(class)
*
*                css选择器查找
*                   querySelector(css选择器)(查找一个)
*                   querySelectorAll(css选择器)（查找多个）
*
*                   修改元素内容
*                       获取设置元素开始和结束间标签所有代码
*                       innerHTML
*                       删除
*                       innerHTML=''
*                       添加
*                       innerHTML='value'or'html代码'
*                       textContent
*                           功能与innerHTML类似
*                           它只能获取和修改文本内容
*                           低版本ie不支持
*                       innerText(ie浏览器的)
*                       与textContext一样
*                      innerText 火狐支持    textContent ie不支持
*
*                       获取属性值
*                           getAttribute(value)
*                       修改
*                           setAttribute(value,'新值')
*                        简单方式
*                           node.value
*                           node.id
*                        node.attributes[下标/属性名]
*                        或者
*                        node.attributes[下标/属性名]=value
*                        hasAttribute(属性)，如果属性存在返回true,否则false
*                        删除属性
*                           removeAttribute(属性)
*                     自定义属性
*                           例子
*                               <input type='text' id='d1' data-ac1='value'>
*                                   语法 data-attr=value
*                      简洁方式
*                       node.dataset.attr
*
*                       js修改css样式
*                           内联
*                               获取node.style.attr
*                               修改node.style.attr=value
*                               清除node.style.attr=''
*                               清除所有node.style.cssText='';
*                               内联样式使用如下方式
*                                   background-color(css里面的)
*                                   js中需要使用如下
*                                       backgroundColor
*
*                                获取元素最终样式
*                                   var strle=getComputedStyle(node)
*                                       它是计算后的
*                                           style.attr
*                                      ie8 node.currentStyle;
*                                 创建和删除节点
*                                   var node=document.createElement(标签名)
*                                   设置元素属性
*                                   node.id=value
*                                   node.innerHTML=''
*                                   新元素追加到现有节点上
*                                       追加appendChild(node)
*                                       添加insertBefore(node,oldNode)
*                                       替换replaceChilde(node,oldNode)
*                                追加子元素appendChild(node);
*                                添加       insertBefore(node,old)
*                                在新元素添加到旧元素前
*                                替换       replaceChild(node,old)
*                                将新元素替换成旧元素的值
*
*                                文档片段（提升效率）
*                                var d=document.createDocumentFragment()创建
*                                添加 d.appendChild(document.createElement(标签))
*                                一次性添加多个
*                                document.body.appendChild(d)
*                                删除元素
*                                     removeChild(子元素)
*
*
*
*
*
*
* */

var sum=0;

for(var i=0;i<101;i++){
if(i%3!=0){
sum+=i
}
}
console.log(sum);
//跳出多重循环
//自定义 标签名,例子
//    fu: for(var s=0;s<100;s++){
//        for(var b=0;b<100;b++){
//            break fu;
//        }
//    }