原生JS常用的DOM节点选择方法与操作方法汇总
DOM元素选择方法document.getElementById("元素的id");//Element得到的是单个对象，可以直接对其操作。document.getElementsByName("元素的name");//Elements得到的是单个数组，需要使用下标定位元素后进行操作。
document.getElementsByClassName("元素的classname");
document.getElementsByTagName("元素的标签名");
document.querySelector("#aa");//得到的是单个对象，可以直接对其操作。标签名直接写 id用# class用.name用
document.querySelectorAll("input");得到的是单个数组，需要使用下标定位元素后进行操作。
document.querySelector("input");//选择name=aa的input元素，得到的是单个对象，可以直接对其操作。
document.querySelector("div>input");////选择div下的input，选择第一个，得到的是单个对象，可以直接对其操作。DOM元素操作方法
创建节点
1、命令方式创建： document.createElement("i");
2、字面量方式创建：var str='<li id="ll">东</li><li>南</li><li>西</li>';
3、创建属性节点： createAttribute(name);
增
添加节点 节点.insertAdjacentHTML('afterEnd','<div>123</div>');//向元素内添加节点
beforeBegin->当前节点之前
afterEnd->当前节点之后
beforeEnd->当前节点里面的最前
afterBegin->当前节点里面的最后
替换节点 父节点.replaceChild(新节点,旧节点);//替换节点
var newnode=document.createElement("i");
newnode.innerHTML='你好';
var oldnode=document.getElementById('nn');
var funode=document.getElementById('uu');
funode.replaceChild(newnode,oldnode);
克隆节点 var li=li.cloneNode(true);//true表示连同子元素
删
移除子节点 父节点.removeChild(子节点);//移除子节点
var oldnode=document.getElementById('nn');
var funode=document.getElementById('uu');
funode.removeChild(oldnode);
移除自身 节点.remove();移除节点本身
移除某属性 ul.removeAttribute("id");
改
置属性 节点.setAttribute('value','123');
置内容 节点.innerHTML="<div></div>";
追加同名属性值 节点.className="cx";ul.className+=" xx";
查
是否有子节点 tag.hasChildNodes();//true false
取属性值 ul.getAttribute('id');
是否有某属性 ul.hasAttribute('id');//true false
取某元素的所有节点 节点.childNodes;//取元素的所有子节点，包含回车 标签 文本 属性等全部
其它备用方法
节点.firstChild;//当前节点的第一个子节点 返回 #text
节点.lastChild;//当前节点的最后一个子节点 返回 #text
父节点.firstElementChild;//当前节点的第一个元素子节点
父节点.firstElementChild;//当前节点的最后一个元素子节点
子节点.parentElement;//取元素的父节点
子节点.nextElementSibling;//取当前节点后面的元素节点
子节点.previousElementSibling;//取当前节点前面的元素节点
取节点名称 节点.nodeName;//属性节点->属性名 元素节点->标签名 文本节点->#text
取节点类型 节点.nodeType;//属性节点->2 元素节点->1 文本节点->3
取节点值 节点.nodeValue;属性节点->属性值 元素节点->null 文本节点->节点内容
取节点id ul.id
取节点name ul.getAttribute("name")
取节点class ul.getAttribute("class")
页:
[1]