Dom获取元素

最新推荐文章于 2024-08-04 16:33:59 发布

小小菜机

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量53

点赞数

分类专栏： Dom获取元素文章标签： javascript

本文链接：https://blog.csdn.net/qq_49488146/article/details/115837046

版权

Dom获取元素专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM

小明：什么是Dom？
小花：文档对象模型(Document Object Model）(官方回答)
🤔：Dom操作，可以说是"元素操作"

下面我们就简绍几个常用的：

获取元素

getElementById()

通过元素的 id 名称来获取元素

语法：

document.getElementById("id名")

例子：

<p id="demo">哈哈哈哈哈哈哈哈哈</p>
  <script>
    var a=document.getElementById('demo');
    a.style.color='red'
  </script>

效过如下：
在这里插入图片描述

getElementsByTagName(‘标签名’)

获取的是多个元素

语法：

document.getElementsByTagName('标签名')

例子：

<body>
  <p>看我的变化0</p>
  <p>看我的变化1</p>
  <p>看我的变化2</p>
  <script>
    var a=document.getElementsByTagName('p');
    a[1].style.color='yellow';
  </script>
</body>

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

getElementsByClassName(‘类名’)

例子：

<body>
  <p id="demo">看我的变化0</p>
  <p class="AB">孙悟空</p>
  <p class="AB">猪八戒</p>
  <p class="AB">白骨精</p>
  <p class="AB">奥特曼</p>
  <p>看我的变化2</p>
  <script>
    var a = document.getElementById('demo')
    a.style.color='yellow';
    var b= document.getElementsByClassName('AB');
    b[2].style.fontSize='30px'
  </script>
</body>

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

querySelector(‘选择器’)

querySelectorAll(‘选择器’)

例子：

<body>
  <p id="demo">看我的变化0</p>
  <p class="AB">孙悟空</p>
  <p class="AB">猪八戒</p>
  <p class="AB">白骨精</p>
  <p class="AB">奥特曼</p>
  <p>看我的变化2</p>
  <script>
  var d=document.querySelectorAll('.AB');
    d[3].style.color='green'
  </script>

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

getElementsByTagName(‘name名’)

用于没有id名和class名的；一般用于表单

查看更多点击此处

小小菜机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom获取元素

DOM小明：什么是Dom？小花：文档对象模型(Document Object Model）(官方回答)????：Dom操作，可以说是"元素操作"下面我们就简绍几个常用的：获取元素getElementById()通过元素的 id 名称来获取元素语法：document.getElementById("id名")例子：<p id="demo">哈哈哈哈哈哈哈哈哈</p> <script> var a=document.getElementB
复制链接

扫一扫

专栏目录