DOM操作

article/2025/10/21 12:48:38

今天开始进入JS的核心操作 DOM，DOM操作其实很简单，就是增删改查这几个操作，先看一下思维导图：

1.增加操作

1.新建： fn creatElement(标签名) 创建元素节点 fn setAttribute（name,value）直接设置属性 fn cloneNode(true、false) true包含子节点 false不包含

2.插入拼接节点： fn appendChild（）插入节点 fn insertBefore（new，old）

2.删除操作

1.删除子节点 fn removeChild（）删除属性节点 fn removeAttributeNode（）

3.改

替换节点 fn replaceChild（new，old）

修改属性 fn setAttribute（）

4.查找操作

1.获取下一个兄弟节点 pro nextSibling pro nextElementSibling

2.获取上一个兄弟节点 pro previousSibling pro previousElementSibling

3.获取子节点第一个子节点 pro firstChild pro firstElementChild

最后一个子节点 pro lastChild pro lastElementChild

获取子节点：pro childNodes pro children

获取父级节点：pro parentNode

4.获取节点后的操作：（1）通过点语法调用标签属性

（2）通过style属性控制样式

（3）通过classlist操作

案例时刻

下面是完成百度换肤的简单功能：效果图如下：

当我们点击更新皮肤会出来一个选择框类似手风琴效果，将背景图进行更换代码如下：

.content {

height: 2000px;

background-color: gold;

width: 50px;

/* margin: 0 auto; */

}

nav {

position: fixed;

top: 0;

width: 100vw;

height: 60px;

background-color: rgba(0, 0, 0, .35);

color: #fff;

}

nav p {

float: right;

margin-right: 50px;

height: 60px;

line-height: 60px;

font-size: 14px;

}

nav p:hover {

cursor: pointer;

}

.alert {

position: fixed;

top: 0;

z-index: 1;

width: 100vw;

height: 100vh;

background-color: rgba(0, 0, 0, .1);

display: none;

justify-content: center;

align-items: center;

}

.card {

padding: 0 20px;

display: flex;

position: relative;

width: 920px;

height: 320px;

background-color: #fff;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 0 5px lightgray;

justify-content: space-around;

align-items: center;

}

.card img {

width: 180px;

border-radius: 4px;

box-shadow: 0 0 3px #ccc;

transition: .3s;

}

.card img:hover {

cursor: pointer;

transform: scale(1.2);

box-shadow: 0 0 3px #999;

}

.close {

position: absolute;

right: 30px;

top: 30px;

color: lightgray;

font-size: 20px;

}

.close:hover,

.no:hover {

cursor: pointer;

color: cornflowerblue;

}

.no {

position: absolute;

bottom: 0;

width: 100%;

line-height: 40px;

height: 40px;

font-size: 14px;

color: lightgray;

text-align: center;

}

.checked {

outline: 4px solid tomato;

}

</style>

</head>

<body>

<nav>

</nav>

<span class="no">不使用皮肤</span>

<img src="https://tse1-mm.cn.bing.net/th/id/R-C.2469e14c80ce4bf9f3daa70aaf39aa0a?rik=HDm4Qv15uw01tg&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2fcc2c707ae9c26972a92b465c4f43bc75&ehk=9hVSnIteSl%2fz1TVhdei%2bHmr1g3Z4DnjLvDH8SZhWIuo%3d&risl=&pid=ImgRaw&r=0"

alt="">

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101021113337%2F211010113337-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654678095&t=9af93ad051672e6fc296b7ab1acb9223"

alt="">

<img src="https://tse1-mm.cn.bing.net/th/id/R-C.6685dd9d8aa6780795862545552751a5?rik=Ewk9pglxXZ61cg&riu=http%3a%2f%2fup.jpgjpg.com%2fpic%2f24%2fbd%2fc7%2f24bdc7a973aa134e4621cf392872ef52.jpg&ehk=KUCPXB7aMx44OGFyetXEq9zoT1xPnnbpqGnsS8X%2fmNs%3d&risl=&pid=ImgRaw&r=0"

alt="">

<img src="https://tse1-mm.cn.bing.net/th/id/R-C.f24607a93c8bb9fd41cb34b3326a8e44?rik=2P0ObbSZPPiohQ&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2fdd8ca4523da562da23739f1533f39384&ehk=I7S%2bggcnVVK4dpHk6F6T3OcuAyQQQ%2bdXCX7GZp4wWYk%3d&risl=&pid=ImgRaw&r=0"

alt="">

</div>

这里是centent

</div>

</body>

var dAlert = document.querySelector(".alert");

var p = document.querySelector("nav p");

var spanClose = document.querySelector(".close");

var imgs = document.querySelectorAll("img");

var body = document.querySelector("body");

var no = document.querySelector(".no");

//给P添加点击事件