抛开jQuery，拾起原生JS的DOM操作

常用的JS-DOM操作与jQuery的对比

jQuery用多了，还是需要来熟练熟练原生JS的操作，不然写JS都快离不开jQuery了

目录

1. 获取DOM

2. 创建DOM

3. 添加DOM

4. 删除DOM

5. 添加class

6. 是否存在class

7. 删除class

8. 实现 JQ 的toggleClass

9. 获取DOM的css样式

10. 给DOM设置css样式

11. 删除DOM的css样样式

12. DOM的查找(遍历)，例如查找父级，子级，兄弟等节点

13. 获取DOM的属性

14. 给DOM设置，添加和删除属性

15. 修改元素的文本值

16. 原生ajax和JQ的ajax

---

获取DOM

• jq:

//通过id：

$("#box");

//通过class名：

$('.box');

//通过标签名：

$('img');

• js:

//  通过id：

document.getElementById('box');

document.querySelector("#box");

//  通过class名：

document.getElementsByClassName('box');

document.querySelector(".box");

document.querySelectorAll('.box');

//  通过标签名：

document.getElementsByTagName('img');

//  通过元素的name属性：例:获取input的name属性值为passWd的元素，得到的也是一个元素集合

//  也可以通过非表单元素的name属性来获取该DOM

document.getElementsByName('passWd')

---

创建DOM

• jq:

var jq_obj=$("<div class='box'>123</div>");

• js:

var box_obj=document.createElement('div');//创建div元素

var box_txt=document.createTextNode('456');//创建文本节点

box_obj.appendChild(box_txt);//向div中添加文本节点

//  或者是：box_obj.innerText='456';可以替换上面两步

//  或者是：box_obj.innerHTML='<h4>123</h4>';

box_obj.setAttribute('class','box');//设置class名

---

添加DOM

- jq:

var jq_obj=$('.box');

var str='<span>我是ppppp</span>';//需要添加的内容

jq_obj.append(str);//添加指定内容到所有的jq_obj里面的末尾

$(str).appendTo(jq_obj);//向所有的jq_obj元素里面的末尾添加指定内容

jq_obj.prepend(str);//添加指定内容到所有的jq_obj里面的前面

jq_obj.after(str);//在所有的同级的jq_obj之后插入指定内容

jq_obj.before(str);//在所有的同级的jq_obj之前插入指定内容

$(str).insertAfter(jq_obj);//在所有的同级的jq_obj之后插入指定内容

$(str).insertBefore(jq_obj);//在所有的同级的jq_obj之前插入指定内容

• js:

//第一种方式

var obj=document.getElementsByClassName('box');

var node=document.createElement('span');

node.innerHTML='<h4>123</h4>';

//  或者 node.innerText='打工是不可能打工的'

obj[0].appendChild(node);//将节点node添加到obj里面的结尾。

obj[0].parentNode.insertBefore(node,obj[0]);//将node节点添加到同级的obj之前

//  第二种方式，例：在class名为test的div中添加下面的内容：

var txt='<div>123123</div>';

document.getElementsByClassName('test')[0].innerHTML=txt;

//  当然，这种以字符串添加的方式，只能用innerHTML,不能用innerText。

//  相当于是把里面的内容重新赋值，所以最好添加的时候确保test里面没有内容否则会被覆盖

//  要想不覆盖，也可以先获取原来的内容，然后再累加需要添加的内容即 innerHTML += txt

//  下面的例子1：容易错误的点：请看第8条说明

for(var i=0;i<2;i++){

    obj[0].appendChild(node);

    // obj[0].parentNode.insertBefore(node,obj[0]);

}

//  例子2，全部节点都添加指定内容

for(var i=0;i<2;i++){

    var node2=document.createElement('span');

    node2.innerHTML='<h4>22222</h4>';

    obj[0].appendChild(node2);

    // obj[0].parentNode.insertBefore(node2,obj[0]);

}

---

删除DOM

• jq:

$(".div1").remove();

$(".div1").empty();

$('.div1').detach();

//  detach与remove的不同：

var del=$('.div1').detach();//这里div1已经被删掉了，但是，还可以通过赋值来达到其它的操作目的

$('body').append(del);

• js:

//  第一种，

parent.removeChild(child);

//  第二种

child.parentNode.removeChild(child);

---

添加class

• jq：

$('.box').addClass('active');//添加一个

$('.box').addClass('box2 box3');//添加多个

• js:

//  第一种，这种的缺点是只能设置一个class，并且会覆盖原来的class

document.getElementsByClassName('box')[0].setAttribute('class','box');

//  第二种，可以连续添加多个，但是兼容性不太好，可以看看这个兼容性列表  https://caniuse.com/#search=classList

//  classList有5个方法，具体的用途可自行查找

document.getElementsByClassName('box')[0].classList.add('act1','act2');//添加多个的写法要加逗号

//  第三种，这种的缺点和第一种一样

document.getElementsByClassName('box')[0].className='box2';

//  第三种累加版，注意加入的类名前面有空格，有空格，有空格，不然会导致加入的类名和原来的类名连接在一起

//  这种的缺点是并不会判断本身有没有当前加入的类名。即原来有box2，再次加入box2时，整个class就是 box2 box2了。

document.getElementsByClassName('box')[0].className +=' box2'+' box3';//注意单引号与class名之间的空格

//  第三种进阶版，这种的缺点是当添加多个class时，也不能判断是否存在相同.只能一次添加一个

//  例：假如原本有box3，执行addClass(eleObj,'box3 box4')之后box的class名变成了box3 box3 box4

var eleObj=document.getElementsByClassName('box')[0];

addClass(eleObj,'box3')

function addClass(ele,cls){

    var reg=new RegExp('(^|\\s)'+cls+'(\\s|$)');

    var e_statu=reg.test(ele.className);//返回的是布尔值

    //  或者是直接用下面match的方法

    //  var e_statu=ele.className.match(RegExp('(^|\\s)'+cls+'(\\s|$)'));//返回的是一个数组，并不是布尔值

    if(!e_statu){

        ele.className+=' '+cls;

    }else{

        alert('有相同的class');

    }

}

---

是否存在class

• jq

$('.box').hasClass('active');

• js

var eleObj=document.getElementsByClassName('box')[0];

HasClass(eleObj,'box3');

function HasClass(ele,cls){

    var regs=new RegExp('(^|\\s)'+cls+'(\\s|$)');

    var e_statu=regs.test(ele.className);

    if(e_statu){

       alert('存在这个class');

    }else{

    	alert('没有这个class')

    }

}

---

删除class

• jq

$('.box').removeClass('active');

• js

//  第一种方法，类似添加class，把class名全部覆盖掉就能达到效果。

//  这种的缺点也是不能把所需的删掉

document.getElementsByClassName('box')[0].setAttribute('class','');

//  第二种方法,使用classList的remove方法,还是兼容性的问题

document.getElementsByClassName('box')[0].classList.remove('box3');

document.getElementsByClassName('box')[0].classList.remove('box3','box4');//也可以同时删多个

// 第三种方法：和添加一个道理

var eleObj=document.getElementsByClassName('box')[0];

delClass(eleObj,'box3');

function delClass(ele,cls){

    var regs=new RegExp('(^|\\s)'+cls+'(\\s|$)');

    var e_statu=regs.test(ele.className);

    if(e_statu){

       ele.className = ele.className.replace(regs,' ');//用空格来替换之后再重新赋值

    }else{

    	alert('没有这个class')

    }

}

---

实现 JQ 的toggleClass

var eleObj=document.getElementsByClassName('ul')[0];

eleObj.onclick=function(){

	TogClass(this,'active');

}

//  toggleClass函数

function TogClass(element,_class){

    if(HasClass(element,_class)){

        DelClass(element,_class);

    }else{

        AddClass(element,_class);

    }

}

//是否存在该class

function HasClass(ele,cls){

    var regs=new RegExp('(^|\\s)'+cls+'(\\s|$)');

    var e_statu=regs.test(ele.className);

    if(e_statu){

        //alert('存在这个class');

        return true;

    }else{

    	//alert('不存在这个class');

        return false;

    }

}

//  添加class

function AddClass(ele,cls){

    if(!HasClass(ele,cls)){

         ele.className+=' '+cls;

    }

}

//  删除class

function DelClass(ele,cls){

    var regs=new RegExp('(^|\\s)'+cls+'(\\s|$)');

    if(HasClass(ele,cls)){

        ele.className = ele.className.replace(regs,' ');

    }

}

---

获取DOM的css样式

• jq

$('.box').css('color');

$('.box').width();

$('.box').height();

• js

var obj=document.getElementsByClassName('box')[0];

var _color=obj.style.color;//这种获取的方式 只能 获取到元素的行内样式，行内样式，行内样式

var hei=obj.currentStyle.height;//这是 IE 专属获取非行内样式的方法。

var wid=window.getComputedStyle(obj，null/伪类).width;//这是获取元素所有样式的方法。第二个参数为可选

var wid=window.getComputedStyle(obj，null/伪类)['width'];//这种写法也可以，不用驼峰写法，直接原来的css名称

var txt=window.getComputedStyle(obj，':before').content;//这是伪类的获取方式

var txt=window.getComputedStyle(obj，':before')['content'];

//  如果要获取obj本身的样式，后面的参数就是null，如果是obj的伪类，则第二个参数就是伪类

// getPropertyValue的用法

var wid=window.getComputedStyle(obj，null/伪类).getPropertyValue('width');

var wid=obj.style.getPropertyValue('width');// 只要是通过style获取的都是行内样式

//  在ie9以下：

var idObj=document.getElementById('test');

var bg=idObj.currentStyle.getAttribute('backgroundColor');

---

给DOM设置css样式

• jq

$('.box').css({

    'height':100, //jq设置css样式是可以不用加单位的,会自动给你加上。

    'width':100

})

• js

//  第一种，直接设置单个样式

//  使用querySelector和getElementsByClassName来设置

var obj=document.getElementsByClassName('box')[0];

var obj2=document.querySelector('.box>p');

obj.style.width='100px';

obj2.style.height="200px";

//  都可以通过 DOM.style.property="值"来设置，

//  property有哪些属性可以查看 http://www.w3school.com.cn/htmldom/dom_obj_style.asp了解

//  第二种，设置style的cssText,可以像行内样式一样连着写

obj.style.cssText='width:100px;background:red;font-size:18px';

//  但是这个也有缺点，一个是DOM.style.cssText，只能获取行内样式，只能获取行内样式，只能获取行内样式

//  还有就是会覆盖原来已经有的行内样式，例：<div style="display:none"></div>

//  当给该div设置cssText='color：red;font-size:14px;'等属性之后，原来的display就没有了。。而且ie6,7,8会出现一些坑：

//  1. 属性名全部都是大写，属性值没变还是小写。

//  2. 最后一个样式末尾无分号。

//  3. 复合属性名会被拆分，比如border会被拆分成border-top,border-left等等。。。

//  解决覆盖的办法是:先获取原来的样式，再把需要添加的样式累加上去。例：

var obj=document.getElementById('box');

var oldCss=obj.style.cssText;

var newCss='color:skyblue;font-size=14px;';//记住添加的css样式末尾要加入“；”号，

obj.style.cssText=newCss + oldCss ;//newCss加在原样式前就不用担心末尾无分号导致累加的样式出问题。

---

删除DOM的css样式

• jq

$('.box').css('width','');//这是把指定的一个属性置为空，就实现删除的功能了。

$('.box').removeAttr('style');//这个方法是把所有的 行内样式 全部删除

• js

var obj=document.getElementById('box');

obj.style.width='';//注意，这只能删除 行内样式

obj.style.cssText='';//同上

obj.style.removeProperty('color');//同上

obj.removeAttribute('style');//删除所有 行内样式

---

DOM的查找(遍历)，例如查找父级，子级，兄弟等节点

• jq

//  下面的selector都是是匹配元素的选择器表达式

//  查找父级节点，而且只查到父级。selector可以不设置

$('.box').parent(selector);

//  查找祖先节点，查找到是哪个祖先节点是根据selector

//  如果不设置selector则最终会查找到HTML

$('.box').parents(selector);

//  查找兄弟节点，查找到哪个兄弟节点是根据selector

//  如果不设置selector则是全部兄弟节点

$('.box').siblings(selector);

//  查找同级节点紧邻的前一个节点。注意，是紧邻的，而且只查找这一个

//  selector可以不设置。

$('.box').prev(selector);

//  查找被选元素之前的所有同级元素,selector可以不设置

$('.box').prevAll(selector);

//  查找被选元素的后一个同级元素。注意，是紧邻的，而且只查找这一个

//  selector可以不设置。

$('.box').next(selector);

//  查找被选元素之后的所有同级元素,selector可以不设置

$('.box').nextAll(selector);

//  查找被选元素的后代元素。通过selector来筛选查找哪些

$('.box').find(selector);

//  查找被选元素的第一个元素

$('.box').first(selector);

//  例：$(".box p").first();    查找第一个class为box下面的第一个p标签

//  查找带有被选元素的指定索引号的元素

$(".box").eq(number)；

//  例：$(".box").eq(1)；   选取class名为box并且索引值为1的节点

//  查找被选元素的所有儿子元素。selector用于筛选是哪些儿子元素。注意只是儿子节点。只是儿子节点。只是儿子节点

//  要查子孙节点或其他后代可考虑用find

$('.box').children(selector);

• js

var obj=document.getElementById('box');

//  查找被选元素的全部子节点

var a = obj.childNodes;//返回obj对象所有的子元素，包括子孙节点或其他后代

//  查找被选元素的全部子节点，对滴，js中也有children的用法。

var a = obj.children;//返回obj对象所有的子元素，不包括，不包括，不包括子孙节点或其他后代

//  查找被选元素的父节点，只是父节点，不能查祖先元素，如果没有父节点，则返回null

var b = obj.parentNode;

//  查找被选元素紧邻的下一个兄弟节点

var c = obj.nextSibling;

//  查找被选元素紧邻的上一个兄弟节点

var d = obj.previousSibling;

//  查找被选元素的第一个子节点

var _e = obj.firstChild;

//  查找被选元素的最后一个子节点

var f = obj.lastChild;

---

获取DOM的属性

• jq

$('.box').attr('data-id');

• js

var obj=document.getElementById('box');

//  getAttribute(属性名)

obj.getAttribute('data-id');//获取data-id的属性值

//  getAttributeNode(属性名)

obj.getAttributeNode('data-id').value;//获取data-id这个属性节点的值

---

给DOM设置，添加和删除属性

• jq

//  attr(属性名，属性值)，添加属性

$('.box').attr('data-id','1');//添加data-id属性

//  removeAttr(属性名)，删除属性

$('.box').removeAttr('data-id');//删除data-id属性

• js

var obj=document.getElementById('box');

//  setAttribute(属性名，属性值)，添加或修改属性。将属性值设置为undfined也相当于删除该属性

obj.setAttribute('data-id','1');

//  不能通过setAttribute直接设置css样式，必须通过style属性来设置：

//  例：obj.setAttribute('style','background: skyblue;color: white;');

//  也可以一次性删除css样式,也必须通过style属性：obj.setAttribute('style','')

//  removeAttribute(属性名)。删除属性。

obj.removeAttribute('data-id');

//  setAttributeNode(属性名)添加属性节点。假设我定义了一个class为active的样式 .active{background:skyblue;}

var atr=document.createAttribute('class');//创建一个class节点

atr.nodeValue='active';//节点的值是刚才创建的 active名

obj.setAttributeNode(atr);//向obj对象添加该class

//  removeAttributeNode(属性名)，删除指定的属性节点，ie不支持，ie不支持，ie不支持。

var nodeAttr=obj.getAttributeNode('data-id');

obj.removeAttributeNode(nodeAttr);

---

修改,获取元素的文本值

• jq

//  非表单元素 text(内容)，html(内容)，如果内容为空，表示获取，如果内容是 "" 表示清空内容

$('.box').text('修改了');

$('.box').html('<span>又修改了</span>');

//  表单元素 val(内容)

$('#name').val('123')

• js

var obj=document.getElementById('box');

//  获取

console.log(obj.innerHTML);//非表单

console.log(obj.innerText)

console.log(obj.value);//表单元素

console.log(obj.firstChild.nodeValue);//通过节点来获取节点的值

console.log(obj.childNodes[0].nodeValue);//通过父节点来获取节点的值

//  设置

obj.innerHTML='<span>修改了</span>';

obj.innerText='又修改了哦';

obj.value='123';//这是input等表单元素的修改方式

---

原生ajax和JQ的ajax

• jq

$.ajax({

	type:"get",//

	url:"...",

	async:false,//表示设置为同步请求，默认true

	success:function(){

		...

	},

	error:function(){

		...

	}

})

• js

//  创建XMLHttpRequest对象

var xmlhttp=new XMLHttpRequest();//IE6及以下使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function(){

    if (xmlhttp.readyState===4 && xmlhttp.status===200){

        ...

    }

}

xmlhttp.open(method,url,async);//三个属性的具体值下面会提及

xmlhttp.send();

//  document.getElementById("box").innerText=xmlhttp.responseText;//open第三个参数为false时，可省略掉onreadystatechange函数

//  来一个封装好的ajax例子

function getAjax(method,url,isAsync,backFn){

    var xhr=null;

    if(window.XMLHttpRequest){

        xhr=new XMLHttpRequest();

    }else if(window.ActiveXObject){

        xhr=new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6及以下

    }

    xhr.open(method,url,isAsync);

    xhr.send();

    if(isAsync){

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4&&xhr.status===200){

                backFn(xhr.responseText)

                //xhr.status;状态数值

                //xhr.statusText;状态数值说明

                //xhr.responseText;返回的内容,是字符串

            }

        }

    }else{

        backFn(xhr.responseText)

    }

}

//  调用的时候

getAjax(method,url,isAsync,function(data){

    console.log(JSON.parse(data));//JSON.parse，JSON.stringify不支持IE7及以下，不支持IE7及以下，不支持IE7及以下

})

---