DOM的节点操作
- 为什么要节点操作?
因为获取元素的两种常用的方法:(1)利用DOM提供的方法获取,比如通过 document.querySelector(“div”) document. 的方式获取元素逻辑性不强 ,比较繁琐 (2)利用节点层级关系获取元素,会更方便 - 节点的概述:
一般的节点一般会有,nodeType(节点类型),nodeName(节点名称) ,nodeValue(节点值) 这三个基本属性值
元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3 (文本节点包括 文字 空格 换行等)在实际开发中,节点操作主要操作的是元素节点 - 节点操作之父节点
<body>
<div class="box">
<ul class="erwei">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
<script>
//父节点 parentNode
var ew=document.querySelector("ul")
// 根据就近原则,得到元素的父级节点,如果找不到就返回为null
console.log(ew.parentNode);
</script>
4.节点操作之子节点
<script>
//父节点 parentNode
var ew=document.querySelector("ul")
// childNodes 获取元素所有子节点,包括文本节点,元素节点等等,里面有很多元素是不需要的
console.log(ew.childNodes);
// 所以children 可以获取所有子元素的节点
console.log(ew.children);
</script>
5.节点操作之,第一个元素和最后一个元素
<script>
//父节点 parentNode
var ew=document.querySelector("ul")
// 获取第一个元素和组后一个元素
console.log(ew.firstChild); //返回的是第一个子节点,包括空格,空格是一个文本节点
console.log(ew.firstElementChild);//返回的是第一个子元素,有兼容问题,ie9以上才支持
console.log(ew.lastChild);//返回的是第一个子节点,包括空格
console.log(ew.lastElementChild);//返回的是第一个子元素,有兼容问题
// 实际开发中的写法,不包括空格,也没有兼容性
console.log("2222",ew.children[0]);//得到第一个子元素
console.log("11111",ew.children[ew.children.length-1]);//的到最后一个元素
</script>
6.节点操作之兄弟节点
<body>
<div >
兄弟
</div>
<span>兄弟节点</span>
</body>
<script>
var div=document.querySelector("div")
var span =document.querySelector("span")
// nextSibling 得到下一个兄弟节点 包括文本节点,元素节点
console.log("1",div.nextSibling);
// previousSiblin 得到上一个兄弟节点 包括文本节点,元素节点
console.log("2",div.previousSibling);
// nextElementSibling 返回下一个元素节点
console.log(div.nextElementSibling);
// previousElementSibling 返回上一个元素节点,找不到就返回null
console.log(div.previousElementSibling);
// 这两个方法都有兼容性问题。只有IE9以上才支持
</script>
7.节点操作之创造及添加节点
<body>
<div>
<h1>创建节点</h1>
<ul>
<li>123</li>
</ul>
</div>
</body>
<script>
var ul =document.querySelector("ul")
var div =document.querySelector("div")
// createElement创建节点
var li=document.createElement("li")
// appendChild 添加节点
div.appendChild(li)
// 在指定元素后面添加节点,如在li的后面再次添加一li节点 insertBefore(添加节点,指定位置)
ul.insertBefore(li,ul[0])
</script>
8.节点操作之删除节点
<body>
<div>
<button>删除</button>
<ul>
<li>光头强</li>
<li>熊大</li>
<li>熊二</li>
</ul>
</div>
<script>
// 删除节点用 removeChild(父节点.子节点)
var btn=document.querySelector("button")
var ul=document.querySelector("ul")
btn.onclick=function(){
if(ul.children.length==0){
alert("删除完毕")
btn.disabled=true
}else{
ul.removeChild(ul.children[0])
}
}
</script>
案列:留言发布
<body>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
<li>121</li>
</ul>
</div>
</body>
<script>
// 获取元素
var btn =document.querySelector("button")
var text =document.querySelector("textarea")
var ul =document.querySelector("ul")
btn.onclick=function(){
console.log("12314",text.value);
// 当文本域的值等于空的时候,就返回false,优质的时候就添加li
if(text.value==""){
return false
}else{
// 1创建元素
let li=document.createElement("li")
// 2添加元素,
// ul.appendChild(li)
// 3给元素赋值
li.innerHTML=text.value + " <a href='javascript:;'>删除</a>"
// 4使留言最新的留言在上面
ul.insertBefore(li,ul.children[0])
// 5.removeChild(this.parentNode)删除指定的留言实现步骤 创建元素的同时多创建一个删除按钮,点击删除当前按钮的父节点
var as=document.querySelectorAll("a")
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
ul.removeChild(this.parentNode)
}
}
}
}
</script>
9.节点操作之复制节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
var ul=document.querySelector("ul")
// var lili= ul.children[0].cloneNode(false) 括号里为空或者是false为浅拷贝,只复制标签不复制节点内容
// cloneNode(true)括号里为空或者是true为深拷贝,只复制标签也复制节点内容
var lili= ul.children[0].cloneNode(true)
ul.appendChild(lili)
</script>
案例:动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<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>
</body>
</html>
10 https://blog.csdn.net/wuyxinu/article/details/103646041更多详情访问