DOM相关知识点以及原型

DOM(增删改查);

查询

1.获取元素
1.1标准DOM API
    document.getElementById
    document.getElementsByTagName
    document.getElementsByName
    document.getElementsByClassName
    document.querySelectorAll
 1.2亲属访问
 1.3属性获取
    getAttribute
    getAttributeNode
  2.获取属性值
    var attrNode=node.getAttributeNode("属性名");
    attrNode.nodeValue;
    //简化
      node.gatAttribute("属性名")

增加

1.创建
    document.createElement创建元素节点
    document.createTextNode创建文本节点
    document.createAttribute属性节点
    innerHTML
    innerText
    cloneNode
 2.加入
    appendChild追加到结尾处
    innerHTML
    insertBefore将元素插入到某一个元素的前面
        列:父元素.insertBefore(新元素,旧元素);
        //将新元素插入到旧元素的前面

删除

        1.删除元素
            removeChild
            removeAttributeNode
        1.2删除子元素
            //从node中删除一个div
            node.removeChild(div);
            //如果div变量不存在
            var div=document.getElementById("...");
            node.removeChild(div);
            //假设node节点中只有一个元素div
            node.innerHTML="";
            2.删除属性
            **创建时,里面属性名一定要加双引号;添加时,里面的属性一定不要加双引号。
            var attrNode=node.getAttributeNode("属性名");

修改

       1.修改节点
            删除节点再加入
        2.修改样式
            style.xxx=vvv;
            setAttribute;
        3.修改文本
            innerHTML
            innerText
            节点操作
            nodeValue
         4.修改属性
            .xxx=vvv
            setAttribute

对面字面量和json对象的区别

json对象有两种说法:一种是传统的json对象,一个是符合json协议的对象 符合json协议的对象要求所有的属性名必须带有引号,表示字符串 所有的键必须使用双引号括起来 、、、 html首尾换行的字节点不算

proto

以前要访问原型,必须使用构造函数来实现,无法直接使用实例对象来访问原型。 火狐最早引入属性proto表示使用实例对象引用原型。但是早期是非标准的。通过该属性可以允许使用实例对象直接访问原型 function Person(){} //神秘对象那个就是Person.prototype //那么只有使用构造函数 才可以访问它 var o=new Person(); //以前不能直接使用o来访问神秘对象 //现在有了proto后 //o.proto也可以直接访问神秘对象(两个下划线) //那么o.proto===Person.prototype 1.神秘对象中默认都有一个属性constructor,翻译为构造器。表示该原型是与什么构造函数练习起来的。 2.proto有什么用? .可以访问原型 .由于在开放中除非特殊要求,不要使用实例去修改原型的成员。因此属性开发时使用较少。 .但是再调试过程中非常方便,可以轻易的访问原型进行查看成员。 3.如果在早期的浏览器中使用实例需要访问原型如何处理? .可以使用实例对象访问构造器,然后使用构造器访问原型 var o=new Person(); o.constructor.prototype 4.如果给实例继承自原型的属性赋值 function Foo(){} Foo.prototype.name="test"; var o1=new.Foo(); var o2=new.Foo(); o1.name="张三";//不是修改原型中的name而是自己增加了一个name属性 console.log(ol.name+","+o2.name);

继承

1.最简单的继承就是将憋的对象的属性强加到我的身上,那么我就有这个成员了。 2.利用原型也可以实现继承,不需要在我身上添加任何成员,只要原型有了,我也有了。 结论:将属性,方法等成员利用混入的办法,加到构造函数的原型上,那么构造函数的实例就都具有该方法了。

混合式继承复杂描述

1.new DivTag()用来创建div对象 2.appenTo加到某元素上 3.扩展 img p span a 4.无论方法怎么写,方法是谁调用的,this就是谁 、、、

细节

使用点语法给原型添加成员与使用直接替换修改原型对象有什么区别? 1.原型指向发生了变化。 2.构造函数所创建的对象所继承的原型不同 3.新增的对象默认是没有constructor属性 注意:在使用替换的方式修改原型的时候,一般都会添加constructor属性 function Person(){} Person.prototype={ constructor:Person }; function Person(){} var o={} o.constructor=Person; Person.prototype=o; Person=123; 、、、

原型与继承

1.什么是原型? 神秘对象对于构造函数是原型属性,有构造函数就有一个原型属性, 2.如何使用原型? 利用点添加成员 直接替换添加成员 3.什么是原型继承? 实例对象是继承自原型对象的 一般的开发方式: 4.如何实现? 混合 function mix(o1,o2){ for(var key in o2){ o1[key]=02[key]; } } 直接替换原型对象 function ITcast(){}; ITcast.prototype=[]; *属性搜索原则 1.原型链 2.属性搜索原则 所谓的属性搜素原则,就是对象在访问属性或方法时,首先在当前对象当中查找; 如果当前对象中存储该属性或方法到,就停止查找,直接使用该属性或方法。 如果当前对象当中没有,就去当前原型中查找。 如果当前原型对象当中存储该属性或方法,就停止查找,直接使用该属性或方法。 如果原型中没有,就去原型的原型当中查找。 如此往复,直到object.prototype没有,就返回undefined. 如果是调用方法就报错。该对象不是一个函数。

原文地址:https://www.cnblogs.com/wu770880chuan/p/5731302.html