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. 如果是调用方法就报错。该对象不是一个函数。
DOM相关知识点以及原型的更多相关文章
- DOM相关知识点
内容待补充... DOM相关注意题目: DOM的最小组成单位叫做 //节点 Node DOM 有自己的国际标准,目前的通用版本是 //DOM 3 DOM 树的根节点 //HTML 元素 Element ...
- http及浏览器相关知识点归纳
http是应用层协议,采用请求/响应模型 1.浏览器地址栏输入URL地址后发生了什么? 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步 浏览器对此URL进行缓存检查: ...
- React其它相关知识点
React其它相关知识点 一,解释一下React Fiber? 简单来说,核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈,和虚拟dom一样,这个虚拟调用栈也是在内存中的,这个虚拟调用栈就类 ...
- UITableView相关知识点
//*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...
- Android开发涉及有点概念&相关知识点(待写)
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
- IOS开发涉及有点概念&相关知识点
前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...
- IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结
添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...
- 学习记录013-NFS相关知识点
一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...
- TCP/IP 相关知识点与面试题集
第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...
随机推荐
- CGContextTranslateCTM: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
最近在测试的过程中, 发现了SpringBoar的一个问题: SpringBoard[53] <Error>: CGContextTranslateCTM: invalid context ...
- WEBAPP开发技巧(手机网站开发注意事项)
以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...
- WampServer64提示You don't have permission to access
由于配置了php后,这里的“Deny from all”已经拒绝了一切连接.把该行改成“allow from all”,修改后的代码如下,问题解决. <Directory /> O ...
- ISTool5.3.1汉化版使用教程
ISTool是帮助你创建由Jordan Russell制作的Inno Setup编译器脚本的工具.Inno是一个出色的编译器,即使对于某些专业的安装制作程序,它唯一的缺点就是它的脚本必须手动编写. 这 ...
- 【AngularJS】—— 12 独立作用域
前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...
- layout_weight详解
注:LinearLayout中的TextView按比例显示的时候,layout_width="0dp"或者layout_height="0dp" 在androi ...
- Android系统目录介绍
src目录:完成对java代码的编写 assets目录: 资源目录 res目录: 图片,布局文件和字符串,菜单等文件 bin目录:输出文件夹 如生成的apk安装文件 project.propertie ...
- Head插件——学习Elasticsearch的锋刃利器!
在学习Elasticsearch的过程中,必不可少需要通过一些工具查看es的运行状态以及数据.如果都是通过rest请求,未免太过麻烦,而且也不够人性化. 此时,head可以完美的帮助你快速学习和使用e ...
- Entity Framework想说爱你不容易,这么多的报错,这么多的限制,该如何解决?
首先看一下采用MODEL FIRST的方式设计的实体模型对象关系图: 注意:EntityOne中有导航属性:EntityTwo 在如下代码中的几种情况进行新增操作,均会报错,新增都不会成功: stat ...
- MySQL5.7(5.6)GTID环境下恢复从库思(qi)路(yin)方(ji)法(qiao)
要讨论如何恢复从库,我们得先来了解如下一些概念: GTID_EXECUTED:它是一组包含已经记录在二进制日志文件中的事务集合 GTID_PURGED:它是一组包含已经从二进制日志删除掉的事务集合 ...