jsDOM学习

chengyu12138

已于 2023-12-17 13:26:47 修改

阅读量63

点赞数

文章标签： javascript 学习前端

于 2023-09-24 23:21:30 首次发布

本文链接：https://blog.csdn.net/chengyu12138/article/details/133255286

版权

一、获取DOM元素

1.通过id获取（getElementById）

2.通过name属性（getElementsByName）

3.通过类名（getElementsByClassName）

4.获取body的方法

5.通过选择器获取一个元素（querySelector）

6.通过选择器获取一组元素（querySelectorAll）

（1）add（）：添加class，每个class用逗号隔开

（2）remove（）：移除class，每个class用逗号隔开。

（3）toggle（）：切换：如果元素没有该class，则添加该class，否则移除该class。

一、获取DOM元素

1.通过id获取（getElementById）

document.getElementById('id')

ps：如果多个id存在时只获取第一个

2.通过name属性（getElementsByName）

document.getElementsByName('name')

3.通过类名（getElementsByClassName）

<body>
       <div class="c1"></div>
   </body>
   <script>
       console.log(document.getElementsByClassName("c1"));
   </script>

ps：返回值是一个类数组，没有找到返回空数组

4.获取body的方法

document.body

用来获取body标签

5.通过选择器获取一个元素（querySelector）

<body>

<div class="box"></div>

<div class="box"></div>

<p id="nav">导航栏</p>

<script>

// 选择匹配的第一个元素

// document.querySelector('CSS选择器')

const box = document.querySelector('.box')

const nav = document.querySelector('#nav')

</script>

</body>

6.通过选择器获取一组元素（querySelectorAll）

与querySelector类似

返回一个类数组

二、修改样式的三种方法

1.通过style属性修改样式

element.style

ps：在JS中修改样式属性需要采取驼峰命名法

例子：

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

<div></div>

<script>

const box = document.querySelector('div')

box.style.width = '400px'

box.style.backgroundColor = 'red'

box.style.border = '2px solid blue'

box.style.borderTop = '2px solid black'

</script>

</body>

2.通过类名修改样式

一般适用于修改的样式较多的情况

例如：

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

width: 200px;

height: 200px;

background-color: pink;

}

.box {

width: 300px;

height: 300px;

background-color: skyblue;

}

</style>

</head>

<body>

<div class="nav"></div>

<script>

const div = document.querySelector('div')

div.className = 'box'

// div.className = 'nav box'

</script>

</body>

ps：修改后原来的类名就没有了

3.通过classlist修改样式

（1）add（）：添加class，每个class用逗号隔开

element.classList.add("class1", "class2");

（2）remove（）：移除class，每个class用逗号隔开。

element.classList.remove("class1", "class2");

（3）toggle（）：切换：如果元素没有该class，则添加该class，否则移除该class。

element.classList.toggle("class1");

例如：

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

color: #333;

}

.active {

color: red;

background-color: pink;

}

</style>

</head>

<body>

<div class="box">666</div>

<script>

const box = document.querySelector('.box')

// 1.追加

box.classList.add('active')

// 2.删除

box.classList.remove('box')

// 3.切换有就删掉，没有加上

box.classList.toggle('active')

</script>

</body>