目录
一、节点关系查找
1、节点介绍
一般的节点有这三类关系父节点(包含的叫父节点)、子节点(被包含的叫子节点)、兄弟节点。网页中所有内容都称之为节点
节点分类:
元素节点:指的就是标签
属性节点:指的就是属性
文本节点:指的就是文本
其他节点:注释、document
2、查找父节点
元素.parentNode
案例:点击x图标,删除自己父节点,常见于广告的关闭
<!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 {
position: relative;
width: 300px;
height: 300px;
background-color: #f00;
}
.close {
position: absolute;
top: 0;
right: 0;
display: block;
width: 20px;
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
这是一个烦人的广告
<span class="close">X</span>
</div>
<script>
let close = document.querySelector('.close');
close.addEventListener('click', function() {
//找到close的父元素box,给他的父元素添加一个display=none;
close.parentNode.style.display = 'none';
});
</script>
</body>
</html>
3、查找子节点
子节点可能有标签、换行符、注释等等(元素.childNodes),有时候我们只想找到子节点里的标签,不想被其他节点影响(元素.children)
<1>元素.childNodes
元素.childNodes
元素.childNodes,这种方式会将父节点包含的所有字节(包括标签、换行符、空格、注释等等),打包成伪数组给我们返回
<2>元素.children
元素.children
元素.children,这种方式只会把子节点中的标签打包成伪数组进行返回,用的较多
4、查找兄弟节点
<1>查找上一个兄弟节点
previousSibling
作用:查找上一个节点
范围:标签、换行符、空格、文本、注释等等。
<2>查找上一个标签节点
previousSibling
作用:查找上一个标签节点
范围:只有标签。
<3>查找下一个兄弟节点
nextSibling
作用:查找下一个兄弟节点
范围:标签、换行符、空格、文本、注释等等。
<4>查找下一个标签节点
nextElementSibing
作用:查找下一个标签节点
范围:只有标签。
二、创建元素
父元素.createElement('新标签')
写什么标签名,它就创建出什么标签
会得到一个空的标签,自己再用代码给它加内容
默认是看不到的,要想看到,就必须使用添加元素使它成为别的元素的子元素
三、添加元素
1、加在最后边
父元素.appendChild(子元素)
永远会插在父元素的子元素的最后边
2、加在指定位置
父元素.insertBefore(要添加的元素, 在哪个子元素的前面)
如果第二个参数传入的是null或者undefined,那也是添加到最后
如何保证永远插入到最前面?永远插在第一个元素之前就行了
父元素.insertBefore( 要添加的元素, 父元素.children[0] )
四、克隆元素
元素.cloneNode()
将元素克隆出来一个新的,但是这个新的元素也不会在也页面上显示,需要添加元素的方式给他一个位置。
默认是浅克隆,浅克隆只会克隆行内属性(行内的点击事件、行内的样式),但是不会克隆内容,假如有一个div,里边有个a标签,克隆就不会克隆里边的a标签。
如果想要连内容一起克隆怎么办呢?这就需要深克隆了
元素.cloneNode(true)
这就是深克隆了,特别简单,只需要加个true就行。
浅克隆例子
<style>
.box {
width: 300px;
height: 300px;
background-color: #f00;
border: 5px solid #000;
margin-bottom: 10px;
}
</style>
<div class="box" onclick="alert('你好,我是行内点击,深浅克隆都会克隆我')">
我是内容,浅克隆不会克隆我
<h3>我是h3浅克隆也不会克隆我</h3>
</div>
<script>
let box = document.querySelector('.box');
let body = document.querySelector('body');
//浅克隆
let box1 = box.cloneNode();
body.appendChild(box1);
</script>
深克隆例子
<style>
.box {
width: 300px;
height: 300px;
background-color: #f00;
border: 5px solid #000;
margin-bottom: 10px;
}
</style>
<div class="box" onclick="alert('你好,我是行内点击,深浅克隆都会克隆我')">
我是内容,浅克隆不会克隆我
<h3>我是h3浅克隆也不会克隆我</h3>
</div>
<script>
let box = document.querySelector('.box');
let body = document.querySelector('body');
//深克隆
let box2 = box.cloneNode(true);
body.appendChild(box2);
// 克隆出来的盒子不会带有JS Web API的事件
box.addEventListener('click', function() {
alert('你好啊,我是用事件监听设置的事件,复制出来的盒子不会有的偶');
});
</script>
五、删除元素
在早期标准语法中,要删除元素,它自己不能删,得找到它父元素把它删了
父元素.removeChild(被删的子元素)
要注意新浏览器可以调用remove删除(自杀),但是不推荐
子元素.remove() // 但是不兼容IE