5.节点操作
5.1 节点概述
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
2. DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
</body>
5.2 兄弟节点
<div>222</div>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibing 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
// 返回上一个兄弟元素
console.log(div.previousElementSibling);
</script>
5.3 创建节点
5.5 发布留言案例
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var but = document.querySelector('button')
var text = document.querySelector('textarea')
var ul = document.querySelector('ul');
// 2.注册事件
but.onclick = function(){
if(text.value == ''){
alert('你的输入为空，请重新输入')
}else{
// 1.创建元素
var li = document.createElement('li');
li.innerHTML = text.value;
// 2.添加元素
ul.insertBefore(li,ul.children[0]);
}
}
</script>
</body>
5.6 删除节点案例
需求：在前面创建案例的基础上，做一个删除节点的操作
代码实现
<body>
<textarea name="" id=""></textarea>
<button class="2">发布</button>
<ul>
</ul>
<script>
// 1.获取元素
var but = document.querySelector('button')
var text = document.querySelector('textarea')
var ul = document.querySelector('ul');
// 2.注册事件
but.onclick = function(){
if(text.value == ''){
alert('你的输入为空，请重新输入')
return false;
}else{
// 1.创建元素
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// 2.添加元素
ul.insertBefore(li,ul.children[0]);
// 3.删除元素 删除的是当前的链接li 他的父亲
var as = document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick = function(){
// node.removeChild(child); 删除的是li 当前的a所在的li this.parentNode；
ul.removeChild(this.parentNode);
}
}
}
}
</script>
5.7 复制节点
方法： node.cloneNode（） 克隆节点/拷贝节点
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 复制节点方法： node.cloneNode（） 克隆节点/拷贝节点
var ul = document.querySelector('ul')
// 1.node.cloneNode()
// 注意：node.cloneNode（） 如果括号内的参数为空，或者括号中为false，则是浅拷贝，会只复制节点本身，不克隆里面的子节点
// node.cloneNode（true） 括号内为true则为深拷贝，会复制里面的标签和内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili)
</script>
5.8 动态生成表格案例
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
// for(var k in obj) {
// k 得到的是属性名
// obj[k] 得到是属性值
// }
</script>
