上一篇文章我们讲到了操作元素, 这几我们接着从 操作节点 开始讲.
操作节点
讲操作节点前,我们先来了解一下为什么涉及节点的操作:
DOM 树 一个页面的结构是一个树形结构, 称为 DOM 树.DOM描绘了一个层次化的节点树,通过节点的操作,来实现对文档内容进行增删改查。
1.页面结构形如:
2.DOM树
重要概念:
- 文档: 一个页面就是一个 文档, 使用 document 表示.
- 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
- 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
新增节点 分成两个步骤:
1. 创建元素节点
2. 把元素节点插入到 dom 树中.
//创建一个节点
var element=document.createElement('div');
<div class="container">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
<script>
//创建节点:创建一个元素节点
var node=document.createElement('div');
node.id='mydiv';
node.innerText='heihei';
console.log(node);
//1.追加节点,追加到最后一个元素的后边
document.querySelector(".container").appendChild(node);
//也可以追加到指定节点的前边
var node1=document.createElement('div');
node1.innerText="新加入的";
//追加节点的第二种写法
var container=document.querySelector('.container');
//把node1 节点加入到上边的第2个孩子位置,从0开始
container.insertBefore(node1,container.children[2]);
//删除指定节点
container.removeChild(node1);
</script>
一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.
如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)
表白墙的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表白墙</title>
<style>
.container{
width:350px;
height:300px;
margin: 0 auto;
text-align: center;
}
.grey{
color:grey;
}
.container .row{
width:350px;
height:40px;
display:flex;
justify-content: space-between;
align-items: center;
}
.container .row input{
width:260px;
height:30px;
}
#submit{
width:350px;
height:40px;
background-color: deepskyblue;
color:white;
border: none;
margin:10px;
border-radius: 5px;
font-size:20px;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p class="grey">输入后点击提交,会将信息显示在表格中</p>
<div class="row">
<span>谁:</span><input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span><input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span><input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit">
</div>
<script>
var submitBtn=document.querySelector('#submit');
submitBtn.onclick=function(){
//获取留言内容
var fromE=document.querySelector('#from');
var toE=document.querySelector('#to');
var sayE=document.querySelector('#say');
if(fromE.value==''||toE.value==''||sayE.value==''){
return;
}
//构造节点
var divE=document.createElement('div');
divE.innerText=fromE.value+"对"+toE.value+"说:"+sayE.value;
//把节点添加到页面上
document.querySelector(".container").appendChild(divE);
//置为空
fromE.value="";
toE.value="";
sayE.value="";
}
</script>
</body>
</html>
今天的内容就到这里啦~下次再见