DOM节点事件
节点类型
主要是 元素节点，属性节点，文本节点，注释节点，主要是元素节点
<!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>07-节点类型.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 元素节点 -->
<!-- <div></div> -->
<!-- href 属性节点 -->
<!-- <a href="#"></a> -->
<!-- 文本节点 -->
<!-- 这个是新的网页 -->
<!-- 这个注释 注释节点 -->
</body>
</html>
1.父节点
父节点单词：parentNode
<!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>08-获取父节点.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<button>目标元素</button>
</div>
<script>
let button = document.querySelector('button');
// 先获取button 目标元素
console.dir(button);
console.dir(button.parentNode); // 获取到父元素 div标签
// 修改一下父元素的背景颜色
// console.dir(button.parentNode); // 获取到父元素 div标签
// button.parentNode.style.backgroundColor = 'red';
button.parentNode.style.display = 'none';
</script>
</body>
</html>
2.子节点
children：子节点，获取子节点里面的标签元素，数组
childNodes：什么都拿，包括标签元素里面的文字，数字，注释等
<!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>
3.兄弟元素
兄弟元素
nextElementSibling:下一个兄弟
previosElementSibling: 上一个兄弟
<!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>
总结
4.创建节点和追加节点
)
<!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>13-创建节点和追加节点.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
padding: 20px;
background-color: yellow;
}
</style>
</head>
<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>
</html>
剪切-移动
appendChild(元素) 如果该元素是已经存在网页中， appendChild作用类似 移动 appendChild(元素) 如果该元素新创建的， appendChild作用类似 简单的插入
<!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>14-剪切-移动.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
width: 300px;
}
.left {
background-color: yellow;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="right"></ul>
<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>
</body>
</html>
指定插入-insertBefore
insertBefore 也能插入元素 功能也类似 appendChild 1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动 2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
用法如下图示
<!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>18-insertBefore.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
border: 1px solid #000;
width: 400px;
}
</style>
</head>
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
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>
</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>03-字符串的长度.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text">
<script>
// 1 需要用到 表单的input事件
// 2 如何统计文字个数 字符串 看成是数组 （拥有一点点数组的特点）
// 字符串有 数组的长度length
// let str="你们好呀"; str[0]=你 str[1]=们
// 字符串也可以循环
// console.log("aa".length);
// console.log("aab".length);
// console.log("aabb".length);
// let str="你们好呀123";
// console.log(str.push);
// console.log(str[0]);
// console.log(str[1]);
// console.log(str[2]);
// for (let index = 0; index < str.length; index++) {
// console.log(str[index]);
// }
let input=document.querySelector("input")
// 绑定input事件
input.addEventListener("input",function () {
console.log(input.value.length);
})
</script>
</body>
</html>
5.克隆节点
<!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>
.box {
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box"><button>5555</button></div>
<script>
let box = document.querySelector(".box")
// let c = box.cloneNode() 默认false，就是浅克隆，只克隆div本身节点，不克隆后代节点
let c = box.cloneNode(true) //true深克隆，会把div后代节点一起克隆
document.body.appendChild(c)
</script>
</body>
</html>
6.删除元素
就是父元素删除子元素
<!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>555</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
let b = document.querySelector("button")
let ul = document.querySelector("ul")
b.addEventListener("click", function () {
let li = document.querySelector("li:nth-child(1)")
//写法
// ul.removeChild(li) //指定删除
ul.remove() //删除自己
})
</script>
</body>
</html>
