操作DOM对象

最新推荐文章于 2023-01-18 21:00:28 发布

Marlboro~

最新推荐文章于 2023-01-18 21:00:28 发布

阅读量120

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/LIAO_YUANLONG/article/details/122374470

版权

笔记专栏收录该内容

73 篇文章 0 订阅

订阅专栏

这篇博客介绍了DOM（Document Object Model）的基本操作，包括如何更新、遍历、删除和添加DOM节点。示例代码展示了通过原生JavaScript获取不同类型的DOM节点，如标签节点、ID节点和class节点，以及获取父节点的所有子节点的方法。后续将探讨使用jQuery进行DOM操作。

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

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的Dom节点
要操作一个Dom节点，就必须要先获得这个Dom节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var h1 = document.getElementsByTagName('h1'); //获得标签节点
    var h1 = document.getElementById('p1'); //获得Id节点
    var h1 = document.getElementByClassName('p2'); //获得class节点
    var father = document.getElementById('father');
    var childrens = father.children; //获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild
</script>