DOM节点详解

Haiy_CN

已于 2022-09-01 19:42:29 修改

阅读量114

点赞数 1

分类专栏： Javascript 文章标签：前端 javascript html

于 2022-08-15 16:36:03 首次发布

本文链接：https://blog.csdn.net/m0_72687687/article/details/126348855

版权

这篇博客详细介绍了DOM（文档对象模型）的各种操作，包括选择器如getElementById、getElementsByTagName等，内容操作如innerText、innerHTML，样式操作如style和classList，以及层次节点、子元素获取和节点操作如创建、追加、删除、替换等。

摘要由CSDN通过智能技术生成

DOM：

document object model 文档对象模型
DOM选择器:
getElementById：通过Id获取
   getElementsByTagName:通过标签名称获取,返回类数组
   getElementsByClassName:通过类名称获取,返回类数组
   getElementsByName:通过name属性名称获取,返回类数组
   querySelector:返回符合条件的第一个元素
   querySelectorAll:返回符合条件的所有元素
DOM内容操作：
tag.innerText
tag.innerHTML
tag.value 表单操作
类数组转换为数组: Array.from(类数组)
样式操作:
tag.style.样式名="样式值"
tag.className="类名"
tag.classList.add("类名") /tag.classList.remove("类名")
层次节点:
获取子元素:tag.children||tag.childNodes
获取子元素长度:
父元素.childElementCount
子元素数组.length