web五、元素尺寸和位置、节点操作(DOM，查找节点，增加节点，删除节点)、阶段案例
一、元素尺寸与位置
注意：offset家族返回不带单位的数字，而且都是只读的
1，元素尺寸（大小）
大小： offsetWidth和offsetHeight
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
返回的是数字不带单位，并且是只读属性
1，元素位置
offsetLeft 和 offsetTop
获取元素距离自已定位父级元素的左、上距离，跟绝对定位类似
如果父级都没有定位则以浏览器文档为准
返回的是数字不带单位，并且是只读属性
<!DOCTYPE html>
<html lang="en">
<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>元素的尺寸和位置</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 300px;
height: 300px;
padding: 5px;
border: 10px solid red;
margin: 100px;
background-color: pink;
}
.son {
width: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
里面包含一些文字 里面包含一些文字 里面包含一些文字
</div>
</div>
<div class="box">ji的另一个盒子</div>
<script>
/**
* offsetWidth和offsetHeight 获取元素的自身宽高、
*包含元素自身设置的 宽高、padding、border返回的是数字不带单位，并且是只读属性
*/
/**
* offsetLeft 和 offsetTop 获取元素距离自己定位父级元素的左、上距离，跟绝对定位类似
*如果父级都没有定位则以浏览器文档为准，返回的是数字不带单位，并且是只读属性
*/
const father = document.querySelector('.father')
console.log(father.offsetWidth, father.offsetHeight) //329 329
//获取father的宽度和高度设置给box的width和height属性
const box = document.querySelector('.box')
box.style.width = father.offsetWidth + 'px'
box.style.height = `${father.offsetHeight}px`
console.log(box.style.width, box.style.height) //329px 329px
//不生效：offsetWidth和offsetHeight都是只读属性
//father.offsetwidth ='5oopx
// /获取距离定位父级左上角的距离
//如果父级都没有定位，获取到的距离是距离浏览器左上角的
const son = document.querySelector('.son')
console.log(son.offsetLeft, son.offsetTop) //5 5
</script>
</body>
</html>节点操作
二、DOM节点
DOM树：
DOM 将
HTML
文档以
树状结构
直观的表现出来，我们称之为
DOM 树
或者
节点树
节点（Node）
DOM树里每一个点都称之为节点
节点分类:
元素节点 比如 div标签，body、
属性节点： 所有的属性 比如href，class属性
文本节点 ：所有的文本，比如标签里面的文字
三、查找节点
利用节点关系查找节点，返回的都是对象
1，父节点查找
子元素.parentNode。
返回最近一级的
父节点
对象，找不到返回为
null
<!DOCTYPE html>
<html lang="en">
<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>王者荣耀关闭登录案例</title>
<style>
.pop {
display: block;
visibility: visible;
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
width: 530px;
height: 254px;
margin-top: -127px;
margin-left: -265px;
background: url(./images/login.webp) no-repeat;
}
.close {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
}
@keyframes slideUp {
to {
height: 0;
}
}
@keyframes hidden {
to {
display: none;
}
}
.hide {
animation: slideUp .3s linear forwards, hidden .3s .3s forwards;
}
</style>
</head>
<body>
<div class="pop">
<a href="javascript:;" class="close"></a>
</div>
<script>
// 子元素.parentNode。返回最近一级的父节点对象，找不到返回为 null
const colose = document.querySelector('.close')
// 查找父节点
colose.addEventListener('click', function() {
//找到x的父节点，增加类名隐藏，从而关闭页面
colose.parentNode.classList.add('hide')
})
</script>
</body>
</html>2，子节点查找
节点对象（父）.children(重点)。得所有子元素节点，返回的是一个伪数组。
3，兄弟关系查找
下一个兄弟
节点对象.nextElementSibling。该属性获取节点的下一个兄弟节点
上一个兄弟
点对象.previousElementSibling。该属性获取节点的上一个兄弟节点
<body>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<script>
// 节点对象.children(重点)。得所有子元素节点，返回的是一个伪数组。
const ul = document.querySelector('ul')
//通过父级查找所有的子级返回一个伪数组
console.log(`通过父级查找所有的子级`, ul.children)
// 通过父级查找所有的子级中的某一个
console.log(ul.children[2])
// console.log(ul.children)//如果数据为空，父级里没有子级，返回空的数组[ ]
// 节点对象.nextElementSibling。该属性获取节点的下一个兄弟节点
//nextElementSibling下一个兄弟元素
console.log(`下一个兄弟元素`, ul.children[2].nextElementSibling) //相当于返回索引是3的兄弟元素
// 节点对象.previousElementSibling。该属性获取节点的上一个兄弟节点
// previousElementSibling 上一个兄弟元素
console.log(`上一个兄弟元素`, ul.children[2].previousElementSibling)
</script>
</body>
四、增加节点
1.创建节点
创造一个新的元素节点：document.createElement（'标签名'）
2.追加节点
要想在界面看到，还得插入到某个父元素中
父元素最后一个子节点之后，插入节点元素:element.append ( )
父元素第一个子元素的之前，插入节点元素:element.prepend( )
<body>
<ul>
<li>我是默认的li</li>
</ul>
<script>
//在ul的子级前面或子级后面添加一个新的i
const ul = document.querySelector('ul')
//先创建一个节点（需要添加的节点），写入页面 document.createElement
const newli = document.createElement('li') //空的标签
// 在子级的最后添加节点
ul.append(newli)
// -----------------如果创建新添加的节点就一个，但前后都添加上了，最后一个生效-----------------------------
//子级的前面添加节点
ul.prepend(newli)
</script>
</body>五、删除节点
element.remove ( )。把对象从它所属的DOM树中删除
删除节点和隐藏节点有区别的：
隐藏节点还是存在的，但是删除，则从DOM树中删除
隐藏：（display.none）透明度opacity 隐藏visibility
<body>
<div class="remove">这是要删除的 div</div>
<div class="none">这是要隐藏的 div</div>
<script>
const removeEL = document.querySelector('.remove')
//删除节点
removeEL.remove()
// 隐藏节点
const noneL = document.querySelector('.none')
noneL.style.opacity = 0
// 细节： 一个标签一会显示一会隐藏--来回切换的，
// 用dispalay:none或透明度opacity或者visibility --性能好
</script>
</body>