WebAPIs学习---基本认知、获取DOM元素、设置/修改DOM元素内容、修改元素的样式、className和classList修改样式

小杨爱编程

已于 2022-06-28 22:33:51 修改

阅读量813

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

于 2022-06-27 12:05:11 首次发布

本文链接：https://blog.csdn.net/Yajyaj123/article/details/125478691

版权

JavaScript学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.WebAPIs基本认知

1.作用与分类

作用：就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)、BOM（浏览器队形模型）

什么是DOM？

DOM(Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能。

DOM作用？

开发网页内容特效和实现用户交互。

什么是DOM树？

将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树描述网页内容关系的名词

DOM树的作用

文档树直观的体现了标签与标签之间的关系

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

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

DOM的核心思想：

把网页当作对象处理

二，获取DOM元素

根据CSS选择器获取DOM元素（重点）
其他获取DOM元素方法（了解）

1，根据CSS选择器获取DOM元素（重点）

获取单个元素

语法：

document.querySelector('CSS选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的第一个元素的一个HTMLElement对象

获取满足条件的所有元素

语法：

document.querySelectorAll('CSS选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的NodeList对象集合

例如：

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>


<script>
   let lis=document.querySelectorAll('ul li')
   console.log(lis);
</script>

2，其他方法获取元素

三、设置/修改DOM元素内容

1.document.write()方法:能解析html

2.节点.innerText=‘xxx’属性：不能解析html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    let lis=document.querySelectorAll('ul li')
    console.log(lis);
    for(let i =0;i<lis.length;i++){
        lis[i].innerText="666"
      }
</script>

3.节点名.document.innerHtml=‘xxx’属性：可以解析html

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    let lis=document.querySelectorAll('ul li')
    console.log(lis);
    for(let i =0;i<lis.length;i++){
        lis[i].innerHTML="<h2>666</h2>"
      }
</script>

四，修改元素的样式

语法：

元素名.style.css属性名=xxx

若css属性之间有-连接，比如background-color属性，需要修改成小驼峰命名，即backgroundColor。
因为我们写的是样式属性，大多数样式不要忘记加单位，例如：

btb.style.width='100px'

五、className和classList修改样式

className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .active{
            background-color: aqua;
            width: 100px;
            height: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>

    </div>

    <script>
        let div=document.querySelector('div')
        div.className='active'
    </script>
</body>
</html>

这种方法会把原来的的css样式去掉，若不想去掉则可以把原来的class名加进去。

classList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .active{
            background-color: aqua;
            width: 100px;
            height: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>

    </div>

    <script>
        let div=document.querySelector('div')
        // 增加样式 追加样式
        div.classList.add('active')
        // 移除样式
        div.classList.remove('active')
        // 切换样式
        div.classList.toggle('active')
    </script>
</body>
</html>