DOM- 节点操作
一、节点操作
1、DOM 节点
- DOM节点： DOM树里每一个内容都称之为节点
- 节点类型(元素节点最重要，因为需要对他操作)
- 元素节点
所有的标签 比如 body、 div
html 是根节点 - 属性节点
所有的属性 比如 href - 文本节点
所有的文本 - 其他
- 元素节点
节点可以让我们更好的理清标签元素之间的关系
2、查找节点
- 关闭二维码案例：
点击关闭按钮 i， 关闭的是二维码的盒子， 需要获取box盒子
- 思考：
关闭按钮 i 和 box 是什么关系呢？ 父子关系
所以，我们完全可以这样做：
点击关闭按钮， 直接关闭它的爸爸，就无需获取 box 元素了 - 节点关系：
父节点
子节点
兄弟节点
（1） 父节点查找：
parentNode 属性，子元素.parentElement 返回的是一个对象
返回最近一级的父节点 找不到返回为null
案例–关闭多个二维码案例
需求：多个二维码，点击谁，谁关闭
分析：
①：需要给多个按钮绑定点击事件
②：关闭的是当前的父节点
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>Documenttitle>
<style>
.box{
display: flex;
}
.box img{
border: 1px solid #000;
}
.box i{
width: 10px;
height: 10px;
border: 1px solid #000;
line-height: 7px;
text-align: center;
color: #ccc;
cursor: pointer;
}
style>
head>
<body>
<div class="box">
<img src="./images/456.png" alt="">
<i>xi>
div>
<div class="box">
<img src="./images/456.png" alt="">
<i>xi>
div>
<div class="box">
<img src="./images/456.png" alt="">
<i>xi>
div>
<div class="box">
<img src="./images/456.png" alt="">
<i>xi>
div>
<div class="box">
<img src="./images/456.png" alt="">
<i>xi>
div>
<script>
//获取元素
let i = document.querySelectorAll('i')
//绑定事件
for (let j = 0; j < i.length; j++){
i[j].addEventListener('click',function(){
//关闭当前的二维码，点击谁就关闭谁的爸爸
//没用display='none',这样关掉后不占位，剩下的所有二维码会自动往上移
//this.parentElement返回的是一个对象
this.parentElement.style.visibility = 'hidden'
})
}
script>
body>
html>
注意：
使用visibility = 'hidden'而不是display='none'是因为：
（2）子节点查找
- childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等，这些节点获取来没啥用，所以childNodes了解即可 - children （重点）
仅获得所有元素节点，返回的是一个伪数组
- 例：点击按钮，让所有孩子变红色
<button>点击button>
<ul>
<li>孩子1li>
<li>孩子2li>
<li>孩子3li>
<li>孩子4li>
ul>
<script>
// 获取元素
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
//事件监听
btn.addEventListener('click',function(){
//通过ul控制所有li，ul.children是伪数组，循环
for (let i = 0; i<ul.children.length; i++ ){
ul.children[i].style.color = 'red'
}
})
script>
注意，通过
父元素.children获得的是一个伪数组，想对里面的元素操作都得先遍历或者取出（父元素.children[0]）
（3）兄弟节点查找
- 下一个兄弟节点
nextElementSibling 属性 - 上一个兄弟节点
previousElementSibling 属性
兄弟[i].nextElementSibling.style.color = 'red'
3、增加节点
-
很多情况下，我们需要在页面中增加元素
比如，点击发布按钮，可以新增一条信息
-
一般情况下，我们新增节点，按照如下操作：
创建一个新的节点
把创建的新的节点放入到指定的元素内部
创建节点
创造出一个新的网页元素，创建元素节点方法：
注意标签名只能是标签选择器，如div、p等，不能是类选择器或者ID选择器，如果想创建类选择器：
<script>
let div = document.createElement('div')
div.className = 'box'
script>
追加节点
要想在界面看到，还得插入到某个父元素中
-
插入到父元素的最后一个子元素
-
插入到父元素中某个子元素的前面
-
例：
案例–学成在线案例渲染
追加各个小课程
分析：
①：准备好空的ul 结构
②：根据数据的个数，创建一个新的空li
③：li里面添加内容 img 标题等
④：追加给ul
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>Documenttitle>
<link rel="stylesheet" href="./index.css">
head>
<body>
<div class="box">
<div class="head">
<h3>精品推荐h3>
<p>查看全部p>
div>
<div class="body">
<ul>
ul>
div>
div>
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
}
]
//获取元素
let ul = document.querySelector('ul')
for(let i = 0; i<data.length;i++){
//根据数据的个数，创建li
let li = document.createElement('li')
//li添加内容
li.innerHTML = `
${data[i].src}" alt="">
${data[i].title}
高级 •
${data[i].num}人在学习
`
//追加给ul
ul.appendChild(li)
}
script>
body>
html>
原本是将