JavaScript 获取DOM 节点

最新推荐文章于 2024-04-29 17:01:02 发布

思诚代码块

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量1.1k

点赞数 2

分类专栏： JavaScript实战笔记+理论文章标签： javascript 前端开发语言获取Dom节点

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122931365

版权

JavaScript实战笔记+理论专栏收录该内容

27 篇文章 2 订阅

订阅专栏

大家好，今天给大家分享一下JavaScript 获取DOM节点

DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。

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

这里边有4个主要的点：

1.更新; 更新Dom节点

2.遍历dom节点：得到Dom节点

删除;删除一个Dom节点
添加：添加一个新的节点

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

Dom节点

在这里插入图片描述
看源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>

<script>
    var  h1= document.getElementsByClassName('h1');
     var  p1= document.getElementById('p1');
    var  p2= document.getElementsByClassName('p2');
</script>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

这样改代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//它是对应着我们之前讲过的css选择器

    var  h1= document.getElementsByClassName('h1');
    var  p1= document.getElementById('p1');
    var  p2= document.getElementsByClassName('p2');
    var father =document.getElementById('father')
    var childrens =father.children;    //获取父节点下的所有子节点
   // father.firstChild      //第一个子节点
   // father.lastChild      //最后一个子节点
   
</script>
</body>
</html>

效果：

在这里插入图片描述
获取父节点下的所有子节点

这是我们的原生代码，之后我们会用上jQuery

好了，有关于JavaScript 获取DOM 节点就讲到这里了，谢谢大家

思诚代码块

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 获取DOM 节点

大家好，今天给大家分享一下JavaScript 获取DOM节点DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。整个浏览器网页就是一个Dom树形结构这里边有4个主要的点：1.更新; 更新Dom节点2.遍历dom节点：得到Dom节点删除;删除一个Dom节点添加：添加一个新的节点要操作一个Dom 节点，就必须先获得这个Dom节点看源码：<!DOCTYPE html><html lang="e
复制链接

扫一扫