JavaScript-DOM是什么？获取DOM方法。

新54

已于 2024-04-23 22:14:46 修改

阅读量212

点赞数 2

文章标签： javascript 前端开发语言

于 2024-04-23 22:08:42 首次发布

本文链接：https://blog.csdn.net/qq_61897768/article/details/138140112

版权

DOM,也叫文档对象模型。作用就是使用JS去操作html和浏览器。浏览器提供的一套专门用来'操作网页内容'的功能。
API分类：DOM(文档对象模型)，BOM(浏览器对象模型)
DOM树是什么
    将HTML文档以树状结构直观表现出来，我们称之为文档树或者DOM树
    描述网页内容关系名词
    作用：文档树直观的体现了标签与标签之间的关系


DOM对象：浏览器根据html标签生成JS对象
    所有的标签属性都可以在对象上找到
    修改这个对象的属性，会自动映射到标签身上
DOM的核心思想
    把网页内容当作对象处理。

获取DOM方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        .w{
            width: 100px;
            height: 100px;
            color: red;
        }
    </style>
</head>
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
</ul>
<script>
  //根据CSS选择器来获取DOM元素(元素)
  // const box=document.querySelector('div')//quer查询，selector选择器。
  // console.log(box)

  //获取p
    const nav=document.querySelector('#nav')
  console.log(nav)
  //获取li
  const li=document.querySelector('ul li:first-child')
  console.log(li)
  const lis=document.querySelectorAll('ul li')
  console.log(lis)//获取所有li

  //获取其他DOM元素的方法
  document.getElementById('nav')//根据id获取一个元素
  document.getElementsByName('div')//根据标签获取一类元素 ，获取页面所有的div
  document.getElementsByName('w')//根据类名获取元素，获取页面所有类名为w的

</script>
</body>
</html>