JavaScript从放弃到入门（五）| JS操作DOM

最新推荐文章于 2026-02-15 00:54:18 发布

原创最新推荐文章于 2026-02-15 00:54:18 发布 · 299 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js

JS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS选择器的使用方法，包括基本选择器和高级选择器，并深入探讨了DOM的操作，如元素的获取、创建、修改及删除等。

3 HTML DOM 对象 - 方法和属性

1 补充css以及选择器

1.1 基本选择器

标签选择器：

h2{ 
        font-size: 18px;
        color: yellow;
    }

id选择器

#h1{ 
        font-size: 18px;
        color: #d4af7a;
    }

class选择器

.name{
        font-size: 18px;
        color: #8fa1c7;
    }

1.2 css高级选择器

1.2.1 层次选择器

E F 后代选择器，E包含的所有F都被选择。

E>F 子选择器，E的子标签F被选择。

#E+F 相邻兄弟选择器，只有E的下一个且为F的标签会被选择

#E~F 通用兄弟选择器，E的同级标签中的F被选择

我们有现在这样一个示例

<body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p>p3</p>
    <ul>
        <li class="name">
            <p id="p4">p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>SSSSSSS
</body>

后代选择器：body下的所有p

body p{
        background: #bdeff1;
    }

子选择器：body下的所有子标签为p的标签

body>p{
        background: #bdeff1;
    }

<body>
<div id="app">
    <div>
        <h1 id="h1">title</h1>
    </div>
    <div>
        <form class="name">
            用户名：<input type="text">
              密码：<input type="password">
            <input type="submit" value="提交">
        </form>
    </div>
</div>
</body>

相邻兄弟选择器：id为p1的同级相邻下一个p，若相邻下一个不是p标签，则不再做任何更改。

#p1+p{
        background: #bdeff1;
    }

通用兄弟选择器：#p1之后的所有同级标签

#p1~p{
        background: #bdeff1;
    }

1.2.2 结构伪类选择器

当我们需要比较精确的定位到某个标签时，使用层次选择器是不足以完成任务。

而结构伪类选择器能够很好的解决这个问题。

E:fist-child 作为父元素的第一个子元素的E //尽量少用

E:nth-child() E的父标签中的第几个E类型子标签。不可以使用id或clss指定E，参数可以是1，2，3，也可以是2n表达式或关键字。

E:nth-of-type(n) E的父标签的E类型选定为集合，第几个元素。

ul li:first-child{
        background: red;
    }

 ul li:last-child{
        background: red;
    }

p:nth-child(1){
        background: yellow;
    }

p:nth-of-type(1){
        background: red;
    }

1.2.3 属性选择器

E[attr]	选择匹配具有属性名attr的E元素
E[attr=val]	选择匹配具有属性名attr，且值为val的元素
E[attr^=val]	选择匹配具有属性名attr，值以val开头的元素
E[attr$=val]	选择匹配具有属性名attr，值以val结尾的元素
E[attr*=val]	选择匹配具有属性名attr，值含有val的元素

E[attr]：p标签中所有有id的p标签

p[id]{
        background: #909399;
    }

E[attr=val]：匹配clss属性为name的li标签

li[class="name"]{
        background: red;
    }

2 DOM

DOM 是 Document Object Model（文档对象模型）

它分为三种类型

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

我们这里学习的是HTML DOM

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

3 HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

4 访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法，返回一个标签
通过使用 getElementsByTagName() 方法，返回一个标签集合，里面的内容通过可以下标访问。
通过使用 getElementsByClassName() 方法，返回一个标签集合，里面的内容通过可以下标访问。

var list = document.getElementsByTagName("p")
list[0]
<p id="p1">…</p>

5 创建 HTML 内容

新建标签

加入一个新的标签。

var list = document.getElementById("p1");
var p0 = document.createElement("p");
p0.innerHTML="p0";
p0.style.color="red"
p0.id="p0";
list.appendChild(p0)

这样创建了一个p0标签，设置了属性，并追加到p1的子集最后面去。

insertBefore()：可以将标签加入到指定标签子集最前面。

6 修改 HTML 元素

改变内容

改变元素内容的最简答的方法是使用 innerHTML 属性。

var a = document.getElementsByTagName("p")；
a[0].innnerHTML=“你好呀”；

改变样式属性

所有的属性都可以这样进行修改。

a[1].style.color="yellow"

替换标签

通过replaceChild()来替换已有标签。

var p1 = document.getElementById("p1")
p1.replaceChildren("p0")

7 删除HTML元素

根据父标签删除。注意不能通过祖元素删除。

var b = document.getElementsByTagName("body")
var p1 = document.getElementById("p1")
b[0].removeChild(p1)

8 DOM事件

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

点击事件onclick()
```
onclick() = "myclick()"
```
进入事件 onload()

进入
```
<body onload="checkCookies()">
```
已进入页面就会加载的事件

离开
```
<body onunload="checkCookies()">
```
鼠标离开焦点事件 onchange()

当输入框失去焦点时，时间就会被触发。
```
<input onchange="upperCase()">
```
鼠标移进移除操作onmouseover () 和onmouseout ()

onmouseover() 和 onmouseout() 事件可用于在鼠标指针移动到或离开元素时触发函数。
```
<div onmouseover="mOver(this)" onmouseout="mOut(this)"> Mouse Over Me </div>
```

鼠标按压和抬起事件onmousedown()和onmouseup()事件

<div onmousedown="mDownr(this)" onmouseup="mUp(this)"> Mouse Over Me </div>

使用js来为某个标签添加事件

document.getElementById("myBtn").onclick=function(){displayDate()};

至此，操作DOM圆满结束