节点
概念
HTML文档可以看作是一个节点树，网页中的所有内容都是节点
分类
节点的属性 （1）节点类型：nodeType
元素节点 ---1
属性节点 ---2
文本节点 ---3 （文字、空格、换行）
（2）节点名称：nodeName
（3）节点值：nodeValue
<!-- 元素节点 -->
<!-- <div></div> -->
<!-- href 属性节点 -->
<!-- <a href="#"></a> -->
<!-- 文本节点 -->
<!-- 这个是新的网页 -->
<!-- 这个注释 注释节点 -->
节点层级
一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分
（1）根节点：就是根节点，有且只有一个
（2）父节点：一个节点的上级节点
（3)子节点：一个节点的下级节点
（4）兄弟节点：具有相同父节点的节点
(1)获取父节点
获取父节点 ：element.parentNode
<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>
(2)获取子节点
在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合
children是一个可读的属性，返回所有子元素节点
children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中通常使用“obj.children[索引] ”的方式来获取子元素节点
element.childNodes：获取使用电子节点
element.children:获取子元素节点
firstChild:获取第一个子节点
lastChild:获取最后一个子节点
firstElementChild:获取第一个子元素节点
lastElementChild:获取最后一个子元素节点
<head>
<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>
（3）获取兄弟节点
在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等 ,如果找不到，就返回null
nextSiBling：获取下一个兄弟节点
previousSiBling：获取上一个兄弟节点
nextElementSiBling：获取下一个元素的兄弟节点
previElementSiBling：获取下一个元素的兄弟节点
<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>
创建节点和追加节点
(1)创建节点（动态创建节点）
在DOM中，使用document.createElement(tagName)方法创建由tagName指定的HTML元素，也称为动态创建元素节点
(2)添加和删除节点
DOM中，提供了node.appendChild()和node.insertBefore()**方法用于添加节点，**node. removeChild(child)用于删除节点
document.write（）：若页面加载完毕，再次调用该方法会导致页面重绘
element.innerHTML：将节点加入到某个元素中，会导致元素的部分重绘
document.createElement（）：创建节点，结构清晰，效率不高
________________________________________________________
appendChild（）：将节点添加到指定父节点的已有子节点集合末尾
insertBefore（）：将节点添加到指定父节点的已有子节点集合前面
removeChild（child）：删除一个指定的节点
<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>
(3)复制节点（克隆节点）
在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为“需要被复制的节点.cloneChild(true/false) ”。
true:深拷贝，复制节点本身和所有子节点
false（或空）：浅拷贝，只赋值节点本身
<body>
<ul id="mylist">
<li>苹果</li>
<li>橘子</li>
<li>橙子</li>
</ul>
<ul id="op"></ul>
<button onclick="fun()">点我</button>
<script>
function fun(){
//找到mylist的第一个子节点
let item = document.getElementById('mylist').firstElementChild;
//复制子节点
let cloneItem = item.cloneNode(true);
//将复制的节点添加到op中
document.getElementById('op').appendChild(cloneItem)
}
</script>
</body>
附加知识
insertBefore
<head>
<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>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</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>
剪切-移动
<head>
<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>
