DOM节点
元素节点重点
操作节点
查找节点
节点关系:1父节点2子节点3兄弟节点
父节点查找
parentNode属性,返回最近一级的父节点,找不到返回null
子元素.parentNode
<body>
<div>
<button>目标元素</button>
</div>
<script>
let button = document.querySelector('button');
// 先获取button 目标元素
console.dir(button);
console.dir(button.parentNode); // 获取到父元素 div标签
// 修改一下父元素的背景颜色
button.parentNode.style.backgroundColor = 'red';
//button.parentNode.style.display = 'none';
</script>
</body>
子节点查找
childNodes
获得所有子节点.包括文本节点(空格,换行),注释节点等
children(重点)!!!
仅获得所有元素节点,返回一个伪数组,没有元素返回空数组
父元素.children
<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>
<script>
//点击ul自己的li消失
let uls = document.querySelectorAll('ul');
for (let index = 0; index < uls.length; index++) {
uls[index].addEventListener('click', function () {
for (let j = 0; j < this.children.length; j++) {
this.children[j].style.display="none";
}
});
}
</script>
</body>
兄弟节点查找
1下一个兄弟节点
nextElementSibling属性
2上一个兄弟节点
previousElementSibling属性
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</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>
增加节点
创建节点
创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
创建节点的方法
document.creatElement('标签名')
追加节点
想要在界面看到,还得插入到某个父元素中
1插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
2插入到父元素中的某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
<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>
<body>
<div>
<button>123</button>
</div>
<p></p>
<script>
let button = document.querySelector('button');
let p = document.querySelector('p');
// p.insertBefore(button,null);// 没有想好 把 button插入到p标签的哪个子元素上面，传递一个null
// p.insertBefore(指定p标签的子元素)
</script>
</body>
克隆节点
特殊情况下,我们新增节点,按如下操作:复制一个原有的节点,把复制的节点放入到指定的元素内部
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆---深拷贝
若为false,则代表克隆时不包含后代节点--浅拷贝(默认为flase)
元素.cloneNode(布尔值)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<button>点击</button>
</div>
<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>
</body>
删除节点
删除节点
若一个节点在页面中已不需要时,可以删除它
在js原生DOM操作中,要删除元素必须通过父元素删除
语法
父元素.removeChild(要删除的元素)
注意:如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none)有区别:隐藏节点还是存在的,但删除,则是从html'中删除节点
<body>
<button>删除ul中某一个li标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button = document.querySelector('button');
let ul = document.querySelector('ul');
// 要删除的子元素
let li = document.querySelector('li:nth-child(1)'); // 1
button.addEventListener('click', function () {
// 删除指定的元素
ul.removeChild(li);
// 删除自己
ul.remove();
});
</script>
</body>
补充判断真伪数组
<body>
<div></div>
<div></div>
<script>
// 真正的数组 简单的判断 有一个方法 filter
let arr=[];
// 通过 document.querySelectorAll 获取的数组 就是伪数组 可以使用for循环 但是有很多的真正的数组方法 伪数组用不了的！！
console.log(arr.filter);
let divs=document.querySelectorAll("div");
console.log(divs.filter);
</script>
</body>
时间对象
<script>
// // 1 实例化一个 时间对象 new
let date = new Date();
console.log(date.getFullYear()); // 2 输出当下是什么年份
console.log(date.getMonth()); // 3 输出月份 0-12 都会自己 加一
console.log(date.getDate()); // 4 几号
console.log(date.getDay()); // 5 输出星期几 星期一 是 1 星期二 星期六 6 星期天 0
console.log(date.getHours()); // 6 小时
console.log(date.getMinutes());// 7 分钟
console.log(date.getSeconds());// 8 秒
</script>
<body>
<h1></h1>
<script>
// 小小练习
// 在定时器内输出他们
// 输出 年月日 时分秒
let h1 = document.querySelector('h1');
setInterval(function () {
let nowDate = new Date();
console.log(1);
let fullyear = nowDate.getFullYear();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
h1.innerText = `${fullyear}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}, 1000);
</script>
时间戳
<script>
// 三种方式 获取时间戳
let date=new Date();
console.log(date.getTime()); // 方式一
console.log(+(new Date()) ); // 方式二 只要日期对象 可以使用 + 将整个对象 转成 时间戳
console.log(Date.now()); // 方式三
// 来快速生成一个不会重复的数字 * 随机数
</script>
