dom 节点
-
DOM节点
》DOM树里每一个内容都称之为节点
-
节点类型
》 元素节点
> 所有的标签 比如 body、 div
> html 是根节点
》属性节点
> 所有的属性 比如 href
》 文本节点
> 所有的文本
》其他类
查找节点
①. 父节点
-
父节点查找：
》parentNode 属性
》 返回最近一级的 父节点 找不到则返回为null
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.erweima {
position: relative;
width: 160px;
height: 160px;
margin: 100px auto;
}
span {
position: absolute;
left: -20px;
top: 0;
display: block;
width: 20px;
text-align: center;
border: 1px solid #ccc;
/* 鼠标效果 */
cursor: pointer;
}
</style>
</head>
<body>
<div class="erweima">
<img src="images/01.png" alt="" />
<span class="s1"> X1 </span>
</div>
<script>
let spans = document.querySelector('span')
spans.addEventListener('click', function() {
// 子元素. parentNode
spans.parentNode.style.display = 'none'
})
</script>
</body>
</html>
②. 子节点
-
子节点查找：
》 childNodes
> 获得所有的子节点、包括文本节点（ 空格、换行）、注释节点等
》 childern （重点）
> 仅获得所有元素节点
> 返回的还是一个伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-children.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
background-color: aqua;
padding: 20px;
}
li {
height: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>b1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>c1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
1 获取到所有的ul标签 数组
2 遍历ul数组 挨个绑定点击事件
3 点击事件触发了
1 this = 当前被点击的ul标签
2 this.children 获取到 所有的ul的子元素 数组
3 遍历 children 获取到中的每一个li标签
4 li.style.display="none"
*/
// let ul=document.querySelector("ul");
// 获取ul标签下的 子节点
// console.log(ul.children);
// console.log(ul.childNodes);// 什么都拿
// 1 获取到所有的ul标签 数组
let uls = document.querySelectorAll('ul');
// 遍历ul数组 挨个绑定点击事件
for (let index = 0; index < uls.length; index++) {
// 3 点击事件触发了
uls[index].addEventListener('click', function () {
// 3.1 3.2 3.3 对被点击的ul的children 做遍历
for (let j = 0; j < this.children.length; j++) {
// this.children[j] 表示 每一个li标签
this.children[j].style.display="none";
}
});
}
</script>
</body>
</html>
③.兄弟节点
语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-兄弟元素nextElementSibling和previosElementSibling.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
1 获取所有的li标签 数组
2 遍历 绑定点击事件
3 事件触发了
this.next
this.previou 获取到对应的元素 设置他们的样式
*/
// 1 获取所有的li标签 数组
let lis = document.querySelectorAll('li');
// 2 遍历 绑定点击事件
for (let index = 0; index < lis.length; index++) {
// 3 事件触发了
lis[index].addEventListener('click', function () {
// 上一个兄弟 设置 蓝色
this.previousElementSibling.style.backgroundColor = 'blue';
// 下一个兄弟 设置 绿色
this.nextElementSibling.style.backgroundColor = 'green';
});
}
</script>
</body>
</html>
创建节点和追加节点
创建节点
- 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 语法：
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
li.innerText="这个是新创建的li标签";
li.style.backgroundColor="green";
// 2 把li标签插入到 ul标签中
let ul = document.querySelector('ul');
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
</script>
</body>
追加节点
- 想在界面看到，还需要插入到某个父元素中
- 语法：
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
// 2 把li标签插入到 ul标签中
let ul = document.querySelector('ul');
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
// 插入到某个子元素的前面
父元素.insertBefore（要插入的元素，在那个元素前面）
</script>
创建文本节点
利用追加节点转移
概念 ：把 A容器的 子元素 转移到；另一个容器中
<script>
// appendChild 插入元素的功能 | 剪切
// appendChild(元素) 如果该元素是已经存在网页中， appendChild作用类似 移动
// appendChild(元素) 如果该元素新创建的， appendChild作用类似 简单的插入
// 先获取左边的第一个li标签
let li = document.querySelector('.left li:nth-child(1)');
let rightUl = document.querySelector('.right');
// 把li标签插入到右边的ul中
rightUl.appendChild(li);
</script>
增加节点
概念：
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
克隆节点
<script>
// 1 来克隆这个节点 box
let box = document.querySelector('.box');
// 2 开始克隆
// let newBox = box.cloneNode(); // 浅克隆 不会把 div的后代节点一起克隆
let newBox = box.cloneNode(true); // true 深克隆 会把 div的后代节点一起克隆
// 3 插入到body标签中
document.body.appendChild(newBox);
</script>
插入新的节点 insertBefore
-
insertBefore 也能插入元素 功能也类似 appendChild
-
如果要插入的元素 是已经存在的 那么insertBefore作用 移动
-
如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
<script>
let c = document.querySelector('.left li:nth-child(3)');
let two = document.querySelector('.right li:nth-child(2)');
let right = document.querySelector('.right');
// right.insertBefore(c,two);
let li = document.createElement('li');
li.innerText = '新创建的';
right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
