1节点操作
1.DOM节点
2.查找节点
2.1父节点查找
parentNode 属性
- 返回最近一级的父节点找不到返回为null
语法：
子元素.parentNode
<body>
<div class="father">
<div class="son">儿子</div>
</div>
<script>
let son = document.querySelector('.son')
//找爸爸
console.log(son.parentNode)
// son.parentNode.style.display = 'none'
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.erweima {
width: 149px;
height: 152px;
border: 1px solid #000;
background: url(./images/456.png) no-repeat;
position: relative;
}
.close {
position: absolute;
right: -52px;
top: -1px;
width: 50px;
height: 50px;
background: url(./images/bgs.png) no-repeat -159px -102px;
cursor: pointer;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="erweima">
<span class="close"></span>
</div>
<div class="erweima">
<span class="close"></span>
</div>
<div class="erweima">
<span class="close"></span>
</div>
<div class="erweima">
<span class="close"></span>
</div>
<div class="erweima">
<span class="close"></span>
</div>
<script>
let close_btn = document.querySelectorAll('.close')
for(let i = 0; i < close_btn.length; i ++ ){
close_btn[i].addEventListener('click',function() {
// this.parentNode.style.display = 'none' //不保留原先位置
this.parentNode.style.visibility = 'hidden' //保留原先位置
})
}
</script>
</body>
</html>
2.2子节点查找
childNodes(了解)：
- 获得所有子节点、包括文本节点(空格、换行)、注释节点等
children (重点)
- 仅获得所有元素节点
- 返回的还是一个伪数组
语法：
父元素.children
<!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>Document</title>
</head>
<body>
<button>点击</button>
<ul>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
</ul>
<script>
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', function() {
// console.log((ul.children))
let lis = ul.children
for(let i = 0; i < lis.length; i ++ ){
lis[i].style.color = 'red'
}
ul.children[0].style.color = 'green'
})
</script>
</body>
</html>
3.3兄弟关系查找：
- 下一个兄弟节点
- nextElementSibling 属性
- 上一个兄弟节点
- previousElementSibling 属性
<!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>Document</title>
</head>
<body>
<button>点击</button>
<ul>
<li>第1个</li>
<li class="two">第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
<script>
let btn = document.querySelector('button')
let two = document.querySelector('.two')
btn.addEventListener('click', function() {
// tow.style.color = 'red'
two.nextElementSibling.style.color = 'red'
two.previousElementSibling.style.color = 'blue'
})
</script>
</body>
</html>
3.增加节点
3.1创建节点
-
即创造出一个新的网页元素,再添加到网页内，一般先创建节点，然后插入节点
-
创建元素节点方法:
//创造一个新的元素节点 document.createElement('标签名') -
插入到父元素中某个子元素的前面
//插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
<body>
<ul>
<li>我是一</li>
<li>我是二</li>
</ul>
<script>
// 1. 创建新的标签节点
// let div = document.createElement('div')
// div.className = 'current'
let ul = document.querySelector('ul')
let li = document.createElement('li')
li.innerHTML = '我是小李'
// 2. 追加节点 父元素.appendChild(子元素) 后面追加
ul.appendChild(li)
// 3. 追加节点 父元素.insertBefore(子元素, 放到哪个元素的前面)
ul.insertBefore(li, ul.children[1])
</script>
</body>
3.2增加节点
4.删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
- 语法
父元素.removeChild(要删除的元素)
- 注:
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点(display:none) 有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点
<body>
<button>点击</button>
<ul>
<li>我说在这就在这</li>
<li>我说在这就在这</li>
<li>我说在这就在这</li>
<li>我说在这就在这</li>
<li>我说在这就在这</li>
</ul>
<script>
//需求 点击按钮 删除小li
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', function() {
// 删除的语法 父元素.removeChild(子元素)
ul.removeChild(ul.children[0])
})
</script>
</body>
2时间对象
2.1实例化
-
在代码中发现了 new关键字时，一般将这个操作称为实例化
-
创建一个时间对象并获取时间
-
获得当前时间
let date = new Date() -
获得指定时间
let date = new Date( '1949-10-01')
-
<body>
<script>
// new 实例化 时间对象
let date = new Date()
console.log(date)
// 小括号里面写上时间，可以返回指定的时间
let last = new Date('2022/3/1 20:2:35')
console.log(last)
</script>
</body>
2.2时间对象方法
<!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>Document</title>
<style>
div {
width: 400px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div></div>
<script>
let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
let div = document.querySelector('div')
getTime()
setInterval(getTime,1000)
function getTime() {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let date1 = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let day = date.getDay()
div.innerHTML = `今天是： ${year}年${month}月${date1}日${hour}:${minute}:${second} ${arr[day]}`
}
</script>
</body>
</html>
2.3 时间戳
什么是时间戳
- 是指1970年01月 01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种方式获取时间戳
- 使用getTime()方法
// 1.实例化
let date = new Date()
// 2.获取时间戳
console.log(date.getTime())
-
简写+new Date()
console.log(+new Date()) -
使用Date().now()
console.log(Date.now())- 无需实例化(即没有添加new)
- 但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
<body>
<script>
// 时间戳是总的毫秒数 是独一无二的
// 计算倒计时： 核心思想：
// 将来时间 9.1 12：00 有一个时间戳
// 现在的时间 6.2 15：00 有一个时间戳
// 可以利用将来的时间戳 - 现在的时间戳 = 剩余的时间毫秒数
// 转换为时分秒就是剩余的时间了
// 1.getTime()
// let date = new Date()
// console.log(date.getTime())
// 2._new Date()
// console.log(+new Date()) //当前时间戳
// console.log(+new Date('2022-8-3 15:3:55')); //指定时间 的时间戳
// 3.Date.now()
console.log(Date.now())
</script>
</body>
3重绘和回流
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
