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/ ...
随机推荐
- 13.首先,编写一个类ChongZai,该类中有3个重载的方法void print();其次, 再编写一个主类来测试ChongZai类的功能。
package java1; //计算器 public class Jisuanqi { //属性 //型号,品牌等 //重载 //1.方法同名不同参 //2.返回类型和重载无关 //3.多态的一种表 ...
- ASP.NET MVC中简单使用Autofac
项目中引入Autofac的目的是为了实现控制反转,即IoC,Inversion of Control.控制反转可以有效的降低类之间的相互依赖关系,增加架构的弹性,降低软件复杂度. 示例代码: IPro ...
- javascript类型系统——数组array
× 目录 [1]创建 [2]本质 [3]稀疏[4]长度[5]遍历[6]类数组 前面的话 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javascript中的数组与 ...
- CSS旧版flex及兼容
× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...
- javascript严格模式下的8点规则
[作用] [1]消除js语法的一些不合理.不严谨.不安全问题,减少怪异行为并保证代码运行安全 [2]提高编译器效率,增加运行速度 [使用] [1]整个脚本启用严格模式,在顶部执行:"use ...
- 希望有兴趣的加入,共同为项目智能化管理jar包而努力 第二篇
想听听大家对于我这个想法的一些看法,喷也好,赞也罢,希望留下您宝贵的建议! 有共同想法并且想实现的请入群 2500261120 在使用autort插件时,首先要到autort服务器下载所有 ...
- JS中的原型继承机制
转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...
- Android进程间通信之LocalSocket通信
LocalSocket,在Unix域名空间创建的一个套接字(非服务端). 是对Linux中Socket进行了封装,采用JNI方式调用,实现进程间通信. 具体就是Native层Server和Framew ...
- 使用ajax提交form表单,包括ajax文件上传
前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...
- SQL Server 存储(4/8):理解Page Free Space (PFS) 页
我们已经讨论了GAM与SGAM页,数据页(Data Page) ,现在我们来看下页面自由空间页(Page Free Space (PFS) ). PFS在数据文件里是第2页(页号1,页号从0开始),接 ...