[已解决] 原生JS常用的DOM节点选择方法与操作方法汇总

[复制链接]
查看: 170|回复: 0

585

主题

1179

帖子

6291

积分

管理员

人亦已歌

Rank: 12Rank: 12Rank: 12

积分
6291

活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

发表于 2022-9-30 11:29:12 | 显示全部楼层 |阅读模式
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. 添加节点 节点.insertAdjacentHTML('afterEnd','<div>123</div>');//向元素内添加节点
  7. beforeBegin->当前节点之前
  8. afterEnd->当前节点之后
  9. beforeEnd->当前节点里面的最前
  10. afterBegin->当前节点里面的最后

  11. 替换节点        父节点.replaceChild(新节点,旧节点);//替换节点
  12. var newnode=document.createElement("i");
  13. newnode.innerHTML='你好';
  14. var oldnode=document.getElementById('nn');
  15. var funode=document.getElementById('uu');
  16. funode.replaceChild(newnode,oldnode);

  17. 克隆节点 var li=li.cloneNode(true);//true表示连同子元素


  18. 移除子节点 父节点.removeChild(子节点);//移除子节点
  19. var oldnode=document.getElementById('nn');
  20. var funode=document.getElementById('uu');
  21. funode.removeChild(oldnode);
  22. 移除自身 节点.remove();移除节点本身
  23. 移除某属性 ul.removeAttribute("id");


  24. 置属性 节点.setAttribute('value','123');
  25. 置内容 节点.innerHTML="<div></div>";
  26. 追加同名属性值 节点.className="cx";ul.className+=" xx";


  27. 是否有子节点 tag.hasChildNodes();//true false
  28. 取属性值 ul.getAttribute('id');
  29. 是否有某属性 ul.hasAttribute('id');//true false

  30. 取某元素的所有节点 节点.childNodes;//取元素的所有子节点,包含回车 标签 文本 属性等全部

  31. 其它备用方法
  32. 节点.firstChild;//当前节点的第一个子节点 返回 #text
  33. 节点.lastChild;//当前节点的最后一个子节点 返回 #text
  34. 父节点.firstElementChild;//当前节点的第一个元素子节点
  35. 父节点.firstElementChild;//当前节点的最后一个元素子节点
  36. 子节点.parentElement;//取元素的父节点
  37. 子节点.nextElementSibling;//取当前节点后面的元素节点
  38. 子节点.previousElementSibling;//取当前节点前面的元素节点

  39. 取节点名称 节点.nodeName;//属性节点->属性名 元素节点->标签名 文本节点->#text
  40. 取节点类型 节点.nodeType;//属性节点->2 元素节点->1 文本节点->3
  41. 取节点值 节点.nodeValue;属性节点->属性值 元素节点->null 文本节点->节点内容
  42. 取节点id ul.id
  43. 取节点name ul.getAttribute("name")
  44. 取节点class ul.getAttribute("class")
复制代码



我知道答案 本帖寻求最佳答案回答被采纳后将获得系统奖励10 C币 , 目前已有0人回答
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

精彩图文
 
 
在线客服
技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表