目录
前言
DOM节点
目标
DOM节点
节点类型
元素节点
属性节点
文本节点
查找节点
目标
节点关系
父节点查找
parentNode属性
子节点查找
childNodes
children属性（重点）
兄弟关系查找
增加节点
目标
创建节点
追加节点
删除节点
目标
语法
克隆节点
总结
前言
There is a girl who was on your side
DOM节点
目标
能说出DOM节点的类型
DOM节点
DOM树中每一个内容都称之为节点
节点类型
元素节点
所有的标签，比如body，div
html是根节点
属性节点
所有的属性，比如href
文本节点
所有的文本
查找节点
目标
能够具备根据节点关系查找目标节点的能力
节点关系
针对的找亲戚返回的都是对象
父节点
子节点
兄弟节点
父节点查找
parentNode属性
返回最近一级的父节点，找不到返回为null
子元素.parentNode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">
<div id="son">son</div>
</div>
<script>
const son = document.querySelector('#son')
console.dir(son.parentNode);//const father = document.querySelector('.father')
</script>
</body>
</html>子节点查找
childNodes
获得所有子节点，包括文本节点（空格，换行），注释节点等
children属性（重点）
仅获得所有元素节点
返回的还是一个伪数组
父元素.children兄弟关系查找
下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<p>第一个段落</p>
<li>
<p>第二个段落</p>
</li>
<li>
<p>第三个段落</p>
</li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
const ul = document.querySelector('ul');
console.dir(ul.children[1].previousElementSibling);
console.dir(ul.children[1].nextElementSibling);
</script>
</body>
</html>增加节点
目标
能够具备根据需求新增节点的能力
很多情况下，我们需要在页面中增加元素
比如点击按钮可以新增一条信息
一般情况下，新增节点按照以下操作
创建一个新节点
把创建的新的节点放入到指定的元素内部
创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后再插入节点
创建元素节点方法：
//创造一个新的元素节点
document.createElement('标签名');
追加节点
要想在界面看到。还得插入到某个父元素中
插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="myList"></ul>
<script>
const ul = document.querySelector('ul');
const items = ['我是li1', '我是li2', '我是li3'];
items.forEach(item => {
const li = document.createElement('li');
li.innerHTML = item;
ul.appendChild(li);
})
</script>
</body>
</html>删除节点
目标
能够具备根据需求删除节点的能力
若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法
父元素.removeChild(要删除的元素)
注：
如不存在父子关系则删除不成功删除节点和隐藏节点(display:none)有区别的: 隐藏节点还是存在的，但是删除，则从html中删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="myList">
<li>Coffee</li>
</ul>
<ul id="myonelist"></ul>
<script>
const ul = document.getElementById("myList");
const ul1 = document.getElementById("myonelist");
ul.removeChild(ul.firstElementChild);
</script>
</body>
</html>克隆节点
特殊情况下，我们新增节点，按照如下操作
复制一个原有的节点
把复制的节点放入到指定的元素内部
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="myList"></ul>
<ul id="myonelist"></ul>
<script>
const ul = document.querySelector('#myList');
const items = ['我是li1', '我是li2', '我是li3'];
items.forEach(item => {
const li = document.createElement('li');
li.innerHTML = item;
ul.appendChild(li);
})
const vl = ul.cloneNode(true);
const ul1 = document.querySelector('#myonelist');
ul1.innerHTML = '我是ul1';
ul1.appendChild(vl);
</script>
</body>
</html>
总结
I was the girl who was on your side
