JavaScript-DOM节点的相关操作

最新推荐文章于 2024-07-29 11:53:27 发布

1uuue

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量197

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_61727355/article/details/126652628

版权

1.获得DOM节点

DOM：文档对象模型

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个 Dom 节点，就必须要先获得这个 Dom 节点

获得Dom节点：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
<!--    对应css选择器-->
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    //获取父节点下的所有子节点
    var children=father.children;
    // father.firstChild 获取第一个节点
    // father.lastChild 获取最后一个节点
</script>
</body>
</html>

这是原生代码，之后我们尽量都使用 jQuery();

2.更新DOM节点

先拿到 id1

<body>
<div id="id1">
</div>
<script>
  var id1=document.getElementById('id1');
</script>
</body>

更新 id1

innerText：修改文本的值

最低0.47元/天解锁文章

1uuue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM节点的相关操作

1.获得DOM节点 DOM：文档对象模型浏览器网页就是一个 Dom 树形结构！更新：更新Dom节点遍历Dom节点：得到Dom节点删除：删除一个Dom节点添加：添加一个新的节点要操作一个 Dom 节点，就必须要先获得这个 Dom 节点这是原生代码，之后我们尽量都使用 jQuery(); innerText：修改文本的值 innerHTML :可以解析HTML文本标签
复制链接

扫一扫

专栏目录