m.lom599.com_手机版乐白家网址_乐百家手机首页登录

整理JavaScript对DOM中各种类型的元素的常用操作,

作者: 手机版乐白家网址  发布:2019-07-10

节点类型
**
nodeType
**以下是一对要害的nodeType的取值:
1: 元素element
2: 属性attr
3: 文本text
8: 注释comments
9: 文档document

抛出二个标题,其实所谓的耳濡目染原生JS,怎么样的程度才是熟悉呢?

Javascript具备多少个特别强大並且受开垦者心爱的函数:split 与join 俩对峙的函数。那俩函数能让string与array两系列型调换,也便是数组能被类别化为字符串,反之亦然。大家能把那俩函数发挥得彻底。下边就来探寻之中的一对交相辉映的采用, 首先介绍一下那七个函数:

nodeName,nodeValue

近些日子都在做原生JS领会的演练。。。

String.prototype.split(separator, limit) separator把字符串分割为数组,可选参数limit定义了生成数组的最大length。

节点关系 childNodes: 各类节点都有一个childNodes属性,个中保存着三个NodeList对象

用原生Js封装了一个Ajax插件,引进一般的连串,传传数据,认为依旧平价的。。。轻巧说说思路,如有不科学的地点,还望指正^_^

"85@@86@@53".split('@@'); //['85','86','53'];
"banana".split(); //["banana"]; //( thanks peter (-: )
"president,senate,house".split(',',2); //["president", "senate"]
Array.prototype.join(separator)

firstChild: 等同于childNodes[0]

一、Ajax核心,创建XHR对象

可选参数separator把数组调换为一个字符串。假若不提供separator,那么就能够把逗号做为那么些参数值(就跟数组的toString函数同样)。

lastChild: 等同于childNodes.length-1

Ajax本领的中坚是XMLHttpRequest对象(简称XHRubicon),IE5是率先款引进XHSportage对象的浏览器,而IE5中的XHENVISION对象是因此MSXML库中的一个ActiveX对象完成的,由此在IE中也许有3个版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0。所以创建XHXC90对象的时候要用兼容性写法:

["slugs","snails","puppy dog's tails"].join(' and '); //"slugs and snails and puppy dog's tails"
['Giants', 4, 'Rangers', 1].join(' '); //"Giants 4 Rangers 1"
[1962,1989,2002,2010].join();

再者通过动用列表中各样节点的previousSibling和nextSibling属性,能够访谈同一列表中的别的节点。

createXHR:function(){
 if(typeof XMLHttpRequest!='undefined'){
 return new XMLHttpRequest();
 }else if(typeof ActiveXObject!='undefined'){
 if(typeof arguments.callee.activeXString!='string'){
 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 for(i=0,len=versions.length;i<len;i  ){
 try{
  new ActiveXObject(versions[i]);
  arguments.callee.activeXString=versions[i];
  break;
 }catch(ex){
 }
 }
 return new ActiveXObject(arguments.callee.activeXString);
 }else{
 throw new Error("No XHR object available.");
 }
}

上面来看这几个使用:

操作节点
**
appendChild()**

二、XH昂Cora的主要性方法属性

replaceAll 那个大约的函数不像原生的replace函数,它能看做贰个大局的子字符串替换而无需选用正则表明式。

appendChild()方法用于向childNodes列表的末段增多三个节点。增添节点后,childNodes的新扩大节点、父节点及在此之前的末尾一个子节点的关联指针都会相应地获得更新。

方法:

String.prototype.replaceAll = function(find, replaceWith) {
  return this.split(find).join(replaceWith); 
}

"the man and the plan".replaceAll('the','a'); //"a man and a plan"

insertBefore() insertBefore()那么些措施接受七个参数:要插入的节点和当作参照的节点。

open()方法:接受3个参数,要发送的乞请的项目、央浼的U科雷傲L、是不是异步发送的布尔值

对此小的字符串,它比单个字符替换的原生函数品质要弱一些(这里指的是正则表明式的多个附加的函数),可是在mozilla下,假使那几个字符超越2个或3个字符话,这种利用函数要比正则表明式运营得更快。

// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成为第一个节点
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

send()方法:要作为央求主体发送的数码,假若无需通过伏乞主体发送数据,则必须传入null

occurences 该函数能取到子字符串匹配的个数。并且这种函数很直白没有供给正则。

repaceChild() repaceChild()接受八个参数,要插入的节点和要替换的节点

abort()方法:在接受到响应在此之前调用来撤消异步须要。

String.prototype.occurences = function(find, matchCase) {
  var text = this;
  matchCase || (find = find.toLowerCase(), text = text.toLowerCase());
  return text.split(find).length-1;  
}

document.body.innerHTML.occurences("div"); //google home page has 114
document.body.innerHTML.occurences("/div"); //google home page has 57
"England engages its engineers".occurrences("eng",true); //2
repeat
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

属性:

该函数是从prototype.js 借鉴而来:

removeChild() 只移除而非替换节点。

responseText:作为响应中央被再次回到的公文。

String.prototype.repeat = function(times) {
  return new Array(times 1).join(this);  
}

"go ".repeat(3)   "Giants!"; //"go go go Giants!"
var formerFirstChild = someNode.removeChild(someNode.firstChild);

status:响应的HTTP状态

它的上佳之处就在于join函数的选择。大旨就在那几个separator参数值,然后那几个基础数组仅仅富含了一些未定义的value值。为了更理解的验证这一点,大家来重造一下方面包车型大巴实例:

cloneNode()

statusText:HTTP状态表明

[undefined,undefined,undefined,undefined].join("go ")   "Giants

item 1
item 2
item 3

readyState:表示央浼/响应进度的目前移动阶段

铭记在join此前各个数组成分都会更改为一个字符串(这里就是一个空字符串)。这几个repeat函数的行使是透过数组字面量定义数组的少些的不可行的采取。

var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

取值分别为:

使用limit参数 自己很少使用split函数的limit可选参数,上面介绍二个应用这些limit的实例:

Document类型

0:未早先化。尚未调用open()方法

var getDomain = function(url) {
  return url.split('/',3).join('/');
}

getDomain("http://www.aneventapart.com/2010/seattle/slides/");
//"http://www.aneventapart.com"
getDomain("https://addons.mozilla.org/en-US/firefox/bookmarks/");
//"https://addons.mozilla.org"

Document节点具备下列特征:

1:运行。已经调用open()方法,但并未有调用send()方法

修改数值成员 如若大家将正则混合起来使用,join,split就能够很轻易的改造数组成员了。不过那个函数也未有想像的难,它的重大职能是去掉给定数组的种种member前边钦定的字符串。

  • nodeType的值为9;
  • nodeName的值为#document;
  • nodeValue的值为null;
  • parentNode的值为null;
  • ownerDocument的值为null;

2:发送。已经调用send()方法,但未接受到响应。

var beheadMembers = function(arr, removeStr) {
  var regex = RegExp("[,]?"   removeStr);
  return arr.join().split(regex).slice(1);
}

//make an array containing only the numeric portion of flight numbers
beheadMembers(["ba015","ba129","ba130"],"ba"); //["015","129","130"]

文书档案的子节点

3:接收。已经接受到有的响应数据

倒霉的是,这种函数在IE中失效,因为他俩从split中错误的去掉了第三个空成员。今后来纠正这种函数:

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:整理JavaScript对DOM中各种类型的元素的常用操作,

关键词: m.lom599.com

上一篇:纯JS代码实现气泡效果,入门手上
下一篇:没有了