原生JS常用的DOM节点选择方法与操作方法汇总

人亦已歌

DOM元素选择方法

1. document.getElementById("元素的id");//Element得到的是单个对象，可以直接对其操作。
   
2. document.getElementsByName("元素的name");//Elements得到的是单个数组，需要使用下标定位元素后进行操作。
   
3. document.getElementsByClassName("元素的classname");
   
4. document.getElementsByTagName("元素的标签名");
   
5. document.querySelector("#aa");//得到的是单个对象，可以直接对其操作。标签名直接写 id用# class用.  name用[name=nn]
   
6. document.querySelectorAll("input");得到的是单个数组，需要使用下标定位元素后进行操作。
   
7. document.querySelector("input[name=aa]");//选择name=aa的input元素，得到的是单个对象，可以直接对其操作。
   
8. document.querySelector("div>input");////选择div下的input，选择第一个，得到的是单个对象，可以直接对其操作。

复制代码

DOM元素操作方法

1. 创建节点
   
2. 1、命令方式创建： document.createElement("i");
   
3. 2、字面量方式创建：var str='<li id="ll">东</li><li>南</li><li>西</li>';        
   
4. 3、创建属性节点： createAttribute(name);
   
5. 
   
6. 增        
   
7. 添加节点 节点.insertAdjacentHTML('afterEnd','<div>123</div>');//向元素内添加节点
   
8. beforeBegin->当前节点之前
   
9. afterEnd->当前节点之后
   
10. beforeEnd->当前节点里面的最前
    
11. afterBegin->当前节点里面的最后
    
12. 
    
13. 替换节点        父节点.replaceChild(新节点,旧节点);//替换节点
    
14. var newnode=document.createElement("i");
    
15. newnode.innerHTML='你好';
    
16. var oldnode=document.getElementById('nn');
    
17. var funode=document.getElementById('uu');
    
18. funode.replaceChild(newnode,oldnode);
    
19. 
    
20. 克隆节点 var li=li.cloneNode(true);//true表示连同子元素
    
21. 
    
22. 删
    
23. 移除子节点 父节点.removeChild(子节点);//移除子节点
    
24. var oldnode=document.getElementById('nn');
    
25. var funode=document.getElementById('uu');
    
26. funode.removeChild(oldnode);
    
27. 移除自身 节点.remove();移除节点本身
    
28. 移除某属性 ul.removeAttribute("id");
    
29. 
    
30. 改
    
31. 置属性 节点.setAttribute('value','123');
    
32. 置内容 节点.innerHTML="<div></div>";
    
33. 追加同名属性值 节点.className="cx";ul.className+=" xx";
    
34. 
    
35. 查
    
36. 是否有子节点 tag.hasChildNodes();//true false
    
37. 取属性值 ul.getAttribute('id');
    
38. 是否有某属性 ul.hasAttribute('id');//true false
    
39. 
    
40. 取某元素的所有节点 节点.childNodes;//取元素的所有子节点，包含回车 标签 文本 属性等全部
    
41. 
    
42. 其它备用方法
    
43. 节点.firstChild;//当前节点的第一个子节点 返回 #text
    
44. 节点.lastChild;//当前节点的最后一个子节点 返回 #text
    
45. 父节点.firstElementChild;//当前节点的第一个元素子节点
    
46. 父节点.firstElementChild;//当前节点的最后一个元素子节点
    
47. 子节点.parentElement;//取元素的父节点
    
48. 子节点.nextElementSibling;//取当前节点后面的元素节点
    
49. 子节点.previousElementSibling;//取当前节点前面的元素节点
    
50. 
    
51. 取节点名称 节点.nodeName;//属性节点->属性名 元素节点->标签名 文本节点->#text
    
52. 取节点类型 节点.nodeType;//属性节点->2 元素节点->1 文本节点->3
    
53. 取节点值 节点.nodeValue;属性节点->属性值 元素节点->null 文本节点->节点内容
    
54. 取节点id ul.id
    
55. 取节点name ul.getAttribute("name")
    
56. 取节点class ul.getAttribute("class")

复制代码

我知道答案 本帖寻求最佳答案回答被采纳后将获得系统奖励10 C币 , 目前已有0人回答