节点操作
父节点 parentNode
得到离元素最近的父级节点,如果找不到父节点则返回null
<script type="text/javascript">
var par = document.querySelector('.par');
console.log(par);
console.log(par.parentNode);
</script>
子节点
childNodes 获得元素的所有子节点
包括元素节点 文本节点 等等
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是Li1</li>
<li>我是Li2</li>
<li>我是Li3</li>
<li>我是Li4</li>
</ul>
<ol>
<li>我是oli1</li>
<li>我是oli2</li>
<li>我是oli3</li>
<li>我是oli4</li>
</ol>
<script type="text/javascript">
var ul = document.querySelector('ul');
console.log(ul.childNodes);
</script>
如图所示获取了ul的9个节点【因为换行也算成一个节点-即是text节点】
children 获取的是元素的子节点
var ul = document.querySelector('ul');
//获取所有的ul标签界面的子元素节点
console.log(ul.children);
//获取第几个
console.log(ul.children[i]);
firstChild & lastChild
获取第一个和最后一个子节点 ,不管是元素节点还是文本节点
firstElementChild & lastElementChild
获取第一个 或者 最后一个子元素节点
nextSibling & previousSibing
获取 下一个 或者 上一个 兄弟节点 包括文本节点 和 元素节点
nextElementSibling previousElementSbling
获取兄弟元素节点
插入新的元素节点操作
我们如果想要添加一个新的元素
1、先要创建元素
2、再插入元素
<ul>
<li>123</li>
</ul>
<script type="text/javascript">
//创建节点
var li = document.createElement('li');
var ul = document.querySelector('ul');
//添加节点 node.appendChild(child) node 是父级 child是子级
//在后面追加元素,类似数组的push
ul.appendChild(li);
//在前面添加节点 node.insertBrfore(child,指定元素)
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
</script>
留言板案例(重点)
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.text{
height: 400px;
width: 800px;
margin: auto;
}
ul{
list-style: none;
}
li{
background-color: #FAEBD7;
width: 800px;
}
a{
float: right;
}
</style>
<textarea rows="20" cols="50" class="text">
</textarea>
<button type="button" class="btn">发布</button>
<ul>
</ul>
<script type="text/javascript">
//先获取元素值
var btn = document.querySelector('.btn');
var text = document.querySelector('.text');
var ul = document.querySelector('ul');
console.log(ul);
console.log(text);
btn.onclick = function(){
//当文本输入框为空的时候 ,则就提示报错
if(text.value == ''){
alert("输入空");
return false;
}else{
//创建li元素
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; //然后把文本框的值传给li元素里面的内容
ul.insertBefore(li,ul.children[0]); //把li元素插入到留言板的前面
//删除元素 删除的是当前连接的li 它的父亲
var as = document.querySelectorAll('a');
for(var i = 0;i < as.length;i++){
as[i].onclick = function(){
//要删除的是li 也就是说 是当前a所在的li this.parentNode;
//所以li的父节点是ul
ul.removeChild(this.parentNode);
}
}
}
text.value = '';
}
</script>
删除元素removeChild
element.removeChild(element.children[i]) 要删除父节点(element)下面的第几个孩子
复制节点
浅拷贝 node.cloneNode() 括号为空时候就是false,(只复制标签,不复制里面的内容)
深拷贝 node.cloneNode(true), (复制标签 也复制里面的内容)
//先获取父节点ul
var ul = document.querySelector('ul');
//将ul下面的孩子节点进行拷贝
var lis = ul.children[0].cloneNode();
//再将复制来的lis添加到父节点下面
ul.appendChild(lis);
表单案例
<style type="text/css">
table{
margin: auto;
}
thead{
background-color: beige;
}
thead tr th{
padding: 5px 20px;
}
</style>
<table >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</tbody>
<script type="text/javascript">
var data = [
{
name:'廖大侠',
age:'21',
sex:'boy',
},
{
name:'张大侠',
age:'18',
sex:'boy',
},
{
name:'李大侠',
age:'19',
sex:'girl',
},
{
name:'王大侠',
age:'29',
sex:'boy',
},
];
//往tbody里面创建行, 通过data的长度来判断
var tb = document.querySelector('tbody');
for(var i = 0;i < data.length;i++){
//创建tr行
var tr = document.createElement('tr');
//父节点里面添加孩子
tb.appendChild(tr);
for(var k in data[i]){
//创建单元格
var td = document.createElement('td');
//把对象里面的属性值data[i][k]传给td
td.innerHTML = data[i][k];
tr.appendChild(td);
console.log('1');
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length;i++){
as[i].onclick = function(){
//this是指a标签,a标签得父节点是th(单元格) ,th得父节点是tr(行节点),所以父亲的父亲
tb.removeChild(this.parentNode.parentNode);
}
}
</script>
三种动态创建元素的区别
document.write()
element.innerHTMlL
document.creatElement()
区别
document.write() 如果页面加载完之后再调用这句话,会导致页面重绘
innerHTML 是将内容写入到某个DOM节点,不会导致全部重绘 创建多个元素效率更高(采取数组形式拼接)
hild(this.parentNode.parentNode);
}
}
##### 三种动态创建元素的区别
> document.write()
>
> element.innerHTMlL
>
> document.creatElement()
###### 区别
document.write() **如果页面加载完之后再调用这句话,会导致页面重绘**
innerHTML **是将内容写入到某个DOM节点,不会导致全部重绘** 创建多个元素效率更高(采取数组形式拼接)