JS对DOM节点操作整理
2024-10-20 16:08:32
获取节点:
//按照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")," ");
};
}
最新文章
- 04.ubuntu下kvm 命令行安装64位ubuntu报";Couldn&#39;t find hvm kernel for Ubuntu tree.";的问题
- hdfs client access the hdfs cluster not in one domain
- python :开关,开灯关灯
- 将Vim改造为强大的IDE—Vim集成Ctags/Taglist/Cscope/Winmanager/NERDTree/OmniCppComplete(有图有真相)(转)
- 【K8s】Kubernetes 最近正在看的资料
- [原创]自定义view之:快速开发一款Material Design风格的dialog的开源项目MDDialog
- ubuntu 双屏问题的解决方案
- 【UVa-679】小球下落——二叉树的编号
- Oracle监听器—静态注册
- iOS类的继承关系
- 折腾iPhone的生活——AirDrop的使用
- 代码初始化 故事板初始化 xib初始化总结
- oh-my-zsh配置
- java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端
- 死磕安卓前序:MVP架构探究之旅—基础篇
- element-ui使用导航栏跳转路由用法
- 2018-2019-2 网络对抗技术 20165318 Exp5 MSF基础应用
- Photoshop的辅助线
- 上海大都会赛 I Matrix Game(最大流)
- Selenium&#160;win7+selenium2.0+python+JetBrains&#160;PyCharm环境搭建