正文

JS对DOM节点操作整理

IP云
IP云V管理员/0 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

获取节点： 

//按照ID获取

document.getElementById('element');

//按照节点名称获取，返回类数组对象

document.getElementsByTagName('element');

//按照name名称获取，返回类数组对象

document.getElementsByName('element');

// 按照className获取，返回类数组对象,IE8及以下并不支持；

document.getElementsByClassName('className')

//html5提供的新接口，类似jq的选择器，可以使用层叠关系，多选，返回值为第一个元素

document.querySelector('.element')  //根据class  querySelector在IE7以下不支持，IE8支持

document.querySelector('#element')  //根据id

document.querySelector('#element .div')  //层叠关系

document.querySelector('.div,.div2')  //多选

document.querySelector("div.test > p:first-child");  //子选择器

document.querySelector("div.test + p");  //兄弟选择器

document.querySelector("div[type=qq]")   //属性选择器;

//使用方法同上，也是html5提供的新接口，这个返回类数组对象

document.querySelectorAll('.element')

获取子节点： 

//元素子节点集合，这个有兼容性问题，在IE9以下，会忽略文本节点，比如换行符，空格，文字，而IE9以上，包括现代浏览器会获取文本节点，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

element.childNodes

//元素子节点集合，这个不返回文本节点，直接获取元素节点，也是最常用的，兼容性也不错，只是在IE9以下，会包含注释节点，只要div里面不写注释也就没啥大问题

element.children

获取第一个子节点： 

//获取元素的第一个子节点，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会

element.firstChild

//同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。

element.firstElementChild  

//我们可以通过下面的写法获取第一个子节点，来兼容所有浏览器。

var firstChild = ele.firstElementChild || ele.firstChild

alert(firstChild)

获取最后一个子节点： 

//获取元素的最后一个子节点，同firstChild一样，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会

element.lastChild

//同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。

element.lastElementChild  

//我们可以通过下面的写法获取最后一个子节点，来兼容所有浏览器。

var lastChild = ele.lastElementChild || ele.lastChild

alert(lastChild)

获取父元素： 

//获取元素的父元素

element.parentNode

//获取元素的父元素，据说这个只支持IE，但是测试了一下貌似Firefox和chrome也支持，大部分情况下还是用parentNode来取代parentElement

element.parentElement

获取上一个兄弟元素： 

//获取上一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会

element.previousSibling

//同样获取上一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。

element.previousElementSibling   

//我们可以通过下面的写法获取上一个兄弟元素，来兼容所有浏览器。

var prevEle = ele.previousElementSibling || ele.previousSibling

alert(prevEle)

获取下一个兄弟元素： 

//获取下一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会

element.nextSibling

//同样获取下一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。

element.nextElementSibling   

//我们可以通过下面的写法获取下一个兄弟元素，来兼容所有浏览器。

var nextEle = ele.nextElementSibling || ele.nextSibling

alert(nextEle)

获取上下兄弟元素： 

var siblings = Array.prototype.slice.call(el.parentNode.children);

for (var i = siblings.length; i–;) {

    if (siblings[i] === el) {

        siblings.splice(i, 1);

        break;

    };

};

;[].forEach.call(el.parentNode.children, function(child){

    if(child !== el);

});

获取元素或者属性节点的标签名称： 

element.nodeName

获取元素的内容(包含HTML标签)： 

element.innerHTML

获取元素的纯文本内容(不包含HTML标签)： 

element.innerText   //Firefox不认识这个

element.textContent //Firefox用这个

设置元素的属性节点： 

element.setAttribute(Name,Value);

获取元素的属性节点： 

element.getAttribute(Name);

删除元素的属性节点： 

element.removeAttribute(Name);

创建元素： 

document.createElement('element');  //创建元素节点：

document.createTextNode('text');   //创建文本节点：

document.createAttribute('attribute'); //创建属性节点：

删除节点（必须从父层开始删除）： 

parentNode.removeChild(ele);

插入节点： 

//插入到父节点的尾部

parentNode.appendChild(ele);

//插入到已存在节点的前面；

parentNode.insertBefore(newNode,ele)

克隆节点： 

node.cloneNode(true)     //传入true为深度复制

替换节点： 

parentNode.replaceChild(newNode,oldNode);

循环节点： 

[].forEach.call(ele,function(el,i){

    //xxx

});

for(var i = 0;i < ele.length;i ++){

    //ele[i]

}

以下是HTML5提供的新方法： 

ele.classList  //元素的class对象  IE9及以下不支持

ele.classList.add('xxx')   //添加class

ele.classList.remove('xxx')   //删除class

ele.classList.toggle('xxx')   //切换class

ele.classList.contains('xxx')   //是否包含class

以下是利用原生js实现对class的添加删除和判断： 

//添加class

function addClass(_object,_clsname){

    var _clsname = _clsname.replace(".","");

    if(!hasClass(_object,_clsname)){

        _object.className = _object.className+(" "+_clsname);

    };

}

//判断是否存在已有class

function hasClass(_object,_clsname){

    var _clsname = _clsname.replace(".","");

    var _sCls = " "+(_object.className)+" ";

    return (_sCls.indexOf(" "+_clsname+" ") != -1) ? true : false;

}

//删除class

function delClass(_object,_clsname){

    var _clsname = _clsname.replace(".","");

    if(hasClass(_object,_clsname)){

        _object.className = _object.className.replace(new RegExp("(?:^|\\s)"+_clsname+"(?=\\s|$)","g")," ");

    };

}

相关阅读

目录[+]