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. 如果是调用方法就报错。该对象不是一个函数。

时间: 2024-08-07 20:19:51

DOM相关知识点以及原型的相关文章

HTML DOM相关知识点Ⅰ

㈠什么是DOM? 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式."   ㈡分类 W3C DOM 标准被分为 3 个不同的部分: ⑴核心 DOM - 针对任何结构化文档的标准模型 ⑵XML DOM - 针对 XML 文档的标准模型 ⑶HT

垂直搜索的相关知识点总结

垂直搜索引擎大体上需要以下技术 1.Spider 2.网页结构化信息抽取技术或元数据采集技术 3.分词.索引 4.其他信息处理技术 垂直搜索引擎的技术评估应从以下几点来判断 1.全面性 2.更新性 3.准确性 4.功能性 垂直搜索的进入门槛很低,但是竞争的门槛很高.没有专注的精神和精湛的技术是不行的.行业门户网站具备行业优势但他们又是没有技术优势的,绝对不要想像着招几个人就可以搞定垂直搜索的全部技术,作为一个需要持续改进可运营的产品而不是一个项目来说对技术的把握控制程度又是垂直搜索成功的重要因素

Jsoup代码解读之二-DOM相关对象

Jsoup代码解读之二-DOM相关对象 之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多.这篇文章会说明Jsoup的DOM结构,DOM的遍历方式.在下一篇文章,我会并结合这两个基础,分析一下Jsoup的HTML输出功能. DOM结构相关类 我们先来看看nodes包的类图: 这里可以看到,核心无疑是Node类. Node类是一个抽象类,它代表DOM树中的一个节点,它包含: 父节点parent

博客6:磁盘以及创建文件系统的相关知识点

1.linux磁盘的相关知识点  (1)I/O ports:I/O设备地址,实质上是一个缓冲器  (2)块设备:Block,存取单位是"块",例如:磁盘  (3)字符设备:char,存取单位是"字符",例如:键盘  (4)设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信(仅有元数据,而无数据)  (5)设备号码:              主设备号:major number,表示设备类型              次设备号:minor number

图像处理程序框架—MFC相关知识点

CDC:Windows使用与设备无关的图形设备环境(DC :Device Context) 进行显示 . MFC基础类库定义了设备环境对象类----CDC类.CDC与CGdiObject的关系 说道CDC类就不能不提一下GdiObject---图形对象类. 在Windows应用程序中,设备环境与图形对象共同工作,协同完成绘图显示工作.就像画家绘画一样,设备环境好比是画家的画布,图形对象好比是画家的画笔.用画笔在画布上绘画,不同的画笔将画出不同的画来.选择合适的图形对象和绘图对象,才能按照要求完成

libgdx相关知识点

Gdx.graphics.setContinuousRendering(false); 设置图像为非连续自动渲染. libgdx相关知识点,布布扣,bubuko.com

Android开发涉及有点概念&相关知识点(待写)

前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由于Android是基于Linux,而Linux又是用c山寨Unix的,但是为什么Android不用开发App,其实我也不懂,我想可能是java比较简单. 同样的,IOS为啥没用java,这个我也想可能是因为IOS是封闭的吧..晕,又废话了..好,开始吧,不过这次很多要查资料了,很多名词.单词不会啊! 首先还

<c:url>标签相关知识点

一. <c:url>标签的作用主要用来产生字符串类型的url,而不是产生一个超链接,注意url(统一资源定位符)与超链接两个含义的区别. <c:url value="http://www.baidu.com" />在JSP页面中的输出形式如下: 可以看出来这在页面中就是个字符串,不是一个能点击的超链接. --------------------------------------------------------------------------------

学习记录013-NFS相关知识点

一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -arv 可以通过加载配置生效,也可以通过命令直接共享目录,越过/etc/exports,但是重启失效/usr/sbin/showmount 常用来在客户端,查看NFS配置及挂载结果的命令/var/lib/nfs/etab NFS配置文件的完整参数设定的文件注意:如果需要读写共享,一定要让本地目录被NF