JavaScript(14)——DOM

A阳俊yi

已于 2024-07-25 12:31:59 修改

阅读量938

点赞数 29

分类专栏： JavaScript 文章标签：前端

于 2024-07-24 23:19:30 首次发布

本文链接：https://blog.csdn.net/m0_74386799/article/details/140665819

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Web API

作用：就是使用JS去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API，简单来说就是操作网页的内容。

DOM树

将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树。直观的体现了标签与标签之间的关系。

DOM对象

DOM对象：浏览器根据html标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

核心思想：将网页当做对象处理

获取DOM元素

根据CSS选择器来获取DOM元素，查找DOM元素就是利用JS选择页面中标签元素

1.选择匹配的第一个元素

document.querySelector('css选择器')

返回值：css选择器匹配的第一元素，一个 HTMLElement对象，如果没有匹配到，则返回null。

<body>
  <div class="box">选择第一个元素</div>
  <div class="box">第二个元素</div>
  <script>
    const box = document.querySelector('div')
    console.dir(box)
  </script>
</body>

2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

返回值：css选择器匹配的NodeList对象集合

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    console.dir(lis)
  </script>
</body>

得到的是一个伪数组，有长度和索引号，没有pop()push()等方法。想得到里面的每一个对象，则需要遍历(for)的方式获得。

操作元素内容

innerText

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

  <div class="box">我是内容</div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.innerText);//直接获取元素
    box.innerText = '<strong>我是新内容</strong>'//修改文字内容
  </script>

innerHTML

会解析标签，多标签建议使用模板字符

将上面innerText修改成innerHTML。

操作元素属性

常用属性：还可以通过JS设置或修改标签元素属性，比如通过src更换图片。

语法：对象.属性=值

样式属性 ：通过style属性操作css

语法：对象.style.样式属性 = 值

如果是css中有短横线的例如background-color就按小驼峰命名法backgroundColor

通过类名修改属性：

语法：元素.className = 'active'

className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

  <style>
    div {
      width: 2000px;
      height: 200px;
      background-color: pink;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div></div>
  //通过类名修改属性
  <script>
    const div = document.querySelector('div')
    //class是关键字，所以是className
    div.className = 'box'
  </script>
</body>

通过classList操作类修改css

className容易覆盖以前的类名，可以通过classList追加和删除类名