dom操作
js有7种节点:
document
:文档节点documentType
:文档声明节点,html声明部分element
:元素节点(body、div、p、a等等)text
: 文本节点(空格、文字等)属性
:<a href=""></a>
其中href为属性节点注释节点
:<!--描述-->
文档片段
节点和元素的区别:节点包含元素,比元素的范围更广
节点操作
Node.nextSibling
:目标节点下一个
<div id="box">
<h1 id="h1">标题1</h1>
<h2 id="h2">标题2</h2>
</div>
<script>
//报错,因为它查找的是文本节点(空格),而文本节点没有帮着色
var h2 = document.getElementById('h1').nextSibling.style.color='red';
console.log(h2);
//正确,查找的是下一个元素,元素就排除了文本节点
var h2 = document.getElementById('h1').nextElementSibling.style.color='red';
console.log(h2);
</script>
-
Node.nextElementSibling
:目标节点下一个元素 -
Node.previousSibling
:目标节点上一个 -
Node.previousElementSibling
:目标节点上一个元素 -
Node.parentNode
:目标节点的父节点 -
Node.parentElement
:目标节点的父元素 -
Node.firstChild
:目标节点的第一个子节点,相当于Node.childNodes[0]
-
Node.lastChild
:目标节点的最后一个子节点,相当于Node.childNodes[数组长度-1]
-
Node.childNodes
:返回所有的子节点(注意7种) -
Node.children
: 返回所有的子元素(div、p、a)
<div id="box">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>产品</li>
<p>段落</p>
</ul>
</div>
<script>
var ul = document.querySelector('#box ul');
// var lis = ul.querySelectorAll('li');
// var lis = ul.getElementsByTagName('li');
// var lis = ul.childNodes;
//按范围大小排列
// childNodes > children > (querySelectorAll 或者 getElementsByTagName)
var lis = ul.children;
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
</script>
Node 接口的方法
Node.appendChild()
描述:在目标节点内部的后面插入节点
如何通过js动态创建节点?
//1. 创建一个li元素节点
var li = document.createElement('li');
//2. 创建一个文本节点
var text = document.createTextNode('首页');
//3. 将文本节点追加到li元素内部后面
li.appendChild(text);
Node.insertBefore()
描述:用于将某个节点插入父节点内部的指定位置
<ul id="box">
<li>关于我们</li>
</ul>
<script>
var box = document.getElementById('box');
var li = document.createElement('li');
var text = document.createTextNode('首页');
li.appendChild(text);
//box.firstChild表示box元素内部的节点(注意节点包含文本、注释、元素、属性),这里它应该是文本节点
box.insertBefore( li, box.firstChild);
</script>
Node.removeChild()
接受一个子节点作为参数,用于从当前节点移除该子节点。返回值是移除的子节点。
<ul id="box">
<li>关于我们 <button onclick="del(this)">删除</button></li>
</ul>
<script>
function del(btn){
if(confirm('您确认要删除?')){
var li = btn.parentNode;
var ul = li.parentNode;
ul.removeChild( li );
}
}
</script>
Node.cloneNode()
方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
该方法有一些使用注意点。
- 不会拷贝事件
- 可能会id重复
- 拷贝后只是在内存中,还需要插入.
<ul id="box">
<li>关于我们 <button onclick="copy(this)">复制</button></li>
</ul>
<script>
function copy(btn){
var li = btn.parentNode;
//cloneNode 设置为true 表示复制包含所有子元素和事件都会拷贝
var _li = li.cloneNode(true);
box.appendChild( _li );
}
</script>
<ul id="box">
<li>
关于我们
<button onclick="del(this)">删除</button>
<button onclick="copy(this)">复制</button>
</li>
</ul>
<button id="btn1">内部后面追加</button> <br><br>
<button id="btn2">内部参考节点的前面追加</button>
<script>
<ul id="box">
<li>
关于我们
<button onclick="del(this)">删除</button>
<button onclick="copy(this)">复制</button>
</li>
</ul>
<button id="btn1">内部后面追加</button> <br><br>
<button id="btn2">内部参考节点的前面追加</button>
<script>
var box = document.getElementById('box');
//内部追加
document.getElementById('btn1').onclick = function(){
var li = document.createElement('li');
//使用js动态创建节点的好处在于,你可以在节点插入文档之前添加事件,而使用innerHTML的方式,必须先插入文档之后,然后在去查找该节点。
var text = document.createTextNode('联系我们');
li.appendChild(text);
//删除按钮
var delBtn = document.createElement('button');
delBtn.onclick = function(){
del(this);
}
var btnText = document.createTextNode('删除');
delBtn.appendChild( btnText );
li.appendChild(delBtn);
//复制按钮
var copyBtn = document.createElement('button');
copyBtn.onclick = function(){
copy(this);
}
var copyText = document.createTextNode('复制');
copyBtn.appendChild( copyText );
li.appendChild(copyBtn);
box.appendChild(li);
}
//内部参考节点的前面追加
document.getElementById('btn2').onclick = function(){
//创建一个节点
var li = document.createElement('li');
var text = document.createTextNode('首页');
li.appendChild(text);
//删除按钮
var delBtn = document.createElement('button');
delBtn.onclick = function(){
del(this);
}
var btnText = document.createTextNode('删除');
delBtn.appendChild( btnText );
li.appendChild(delBtn);
//复制按钮
var copyBtn = document.createElement('button');
copyBtn.onclick = function(){
copy2(this);
}
var copyText = document.createTextNode('复制');
copyBtn.appendChild( copyText );
li.appendChild(copyBtn);
box.insertBefore( li, box.firstChild);
}
function del(btn){
if(confirm('您确认要删除?')){
var li = btn.parentNode;
var ul = li.parentNode;
ul.removeChild( li );
}
}
function copy(btn){
var li = btn.parentNode;
//cloneNode 设置为true 表示复制包含所有子元素和事件都会拷贝
var _li = li.cloneNode(true);
box.appendChild( _li );
}
function copy2(btn){
var li = btn.parentNode;
var nextLi = li.nextElementSibling;
var _li = li.cloneNode(true);
box.insertBefore( _li, nextLi );
}
</script>
FileReader 对象
文件读取对象,可以从本地电脑选择文件然后读取为指定的格式,有如下格式:
- 读取为文本
- 读取为base64编码
- 读取为arrayBuffer数组形式的二进制