一、浏览器页面组成介绍

在浏览器上展示的网页实际上是由html标签、css样式表、JS代码组成的。

htlm：浏览器上展示的内容需要html标签来承载，可以理解为网页的内容骨架。
css样式表：样式表顾名思义是给html标签添加样式，如颜色、字体、显示位置等。
JS代码：可以动态控制html和css，同时也可以处理于浏览器与用户交互的功能。

FAQ中心 > JS控制浏览器dom元素 > image2025-4-30_15-42-17.png

二、html标签

1、简介

html标签是一门标记语言，通过使用标记标签来描述网页，其包含了HTML 标签及文本内容，不同的标签有不同的显示特性。

2、基本语法

html标签是由尖括号包围的关键字，比如<html>
html标签通常成对存在，如：<div> </div>。部分标签也可单独存在，如<input >
成对存在的标签第一个标签是开始标签、第二个为结束标签，结束标签需要再关键字前加多一个/，如：<div> </div>。
不同的html标签会有自己特有的属性，不同的属性可以对html标签进行特殊化的处理，如<img src="url">

3、常用标签

<div>块标签</div>
<span>行内标签</span>
<p>段落标签</p>
<a href="链接地址">超链接</a>
<img src="图片链接" alt="some_text">
<input type="text/password/button">

FAQ中心 > JS控制浏览器dom元素 > image2025-4-30_15-42-42.png

二、css样式

1、简介

css指层叠样式表，多个样式定义可层叠为一个。css样式是用来定义html如何显示的，可以实现网页内容和显示样式分离配置。

2、基本语法

css样式语法由选择器、属性、属性值来组成。

选择器 {
    属性1:值;
    属性2:值;
}

div {
    background-color: red;
    text-align:center;
}

3、常用选择器 *

id选择器，使用#和id值来表示
- 在同一个作用域中，标签的id值是唯一的，通过id值仅可找到唯一的一个标签
- ```
<div id="div1">id为div1的标签</div>
```
- ```
#div1 {
    ...
}
```
类选择器，使用.和类名表示
- 类指css的类名，多个标签可能会有相同的类名，该选择器可影响多个标签。
- ```
<div class="class1">css类名为class1的标签</div>
```
- ```
.class1 {
    ...
}
```
标签选择器
- 标签选择器实际上是就是使用html标签来作为选择器，直接写标签名即可，会影响多个标签
- ```
<div>div标签</div>
```
- ```
div {
    ...
}
```

属性选择器

属性

<div pageid='123'>pageid属性为123的div标签</div>

div[pageid] {
    ...
}
div[pageid='123'] {
    ...
}

4、常用样式

宽：width 、高：height
- ```
div {
  height: 200px;
  width: 50%;
}
```

字体颜色：color

div {
    color : red;   /* 使用颜色名来设置颜色*/ 
    color : #ffffff;  /* 使用颜色16进制编码来设置颜色 */
    color : rgb(255,255,255);   /* 使用三原色配色表来设置颜色 */
}

背景颜色：background-color
- ```
div {
    background-color: red;
}
```

字体


div {
    font-size: 16px; /* 设置字体大小 */
    font-style: normal; /* 斜体 */
    font-weight: 300;  /* 值：normal 标准、bold 加粗、100-900 数字后不跟单位 */ 
}

隐藏
- ```
div {
    display: none
}
```

三、js代码控制dom元素

1、获取标签元素对象

当网页被加载时，浏览器会创建页面的文档对象document，可以在浏览器控制台中直接调用到document对象，而获取指定标签就需要基于document对象来获取。

// 通过 id 找到 HTML 元素
document.getElementById("id1")
// 通过标签名找到 HTML 元素
document.getElementsByTagName("div")
// 通过类名找到 HTML 元素
document.getElementsByClassName("class1")
// 通过选择器来获取元素
document.querySelector("#id1")
document.querySelectorAll("div [pageid='123']")

2、动态创建并添加标签

创建标签

const input = document.createElement("input");

添加内容
- ```
input.innerHTML = "input标签文本"
```
添加标签属性
- ```
input.type = "button"
```
作为子元素添加到节点树上
- ```
element.appendChild(para);
```

3、设置标签样式

在获取到标签对象之后，可以修改标签对象的style属性的值来修改标签样式，style下存储的是当前标签的css属性组成的对象，需要注意的是css的一些属性名会使用-来连接两个词，而在js中推荐使用驼峰体的格式来命名变量，所以修改这部分样式时，需要把-去掉，并把-右边的第一个字母大写，如font-style属性则写成fontStyle。

// 设置字体颜色为红色
div.style.color = "red";
// 设置背景颜色
div.style.backgroundColor = "#fffff"
// 设置标签隐藏
div.style.display = "none";