JavaScript DOM基本操作 增/插入/删/替换
之前的一些列操作全都是查看操作，全是查找元素的怎么把这个元素找出来，下面的这些是另几个操作增、插、删、替换
DOM基本操作
增
document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();
插(剪切操作)
PARENTNODE.appendChild();
PARENTNODE.insertBefore(a, b);
删
parent.removeChild();
child.remove();
替换
parent.replaceChild(new, origin);
一、增
能不能凭空创造一个元素节点呢？
完全可以，别说是元素节点，节点都是可以创造的，比如文本节点可以创造、元素节点可以创造、就连注释节点都可以创造。
document.createElement() 增加或创建一个元素节点，写p就创建<p>标签、写strong就创建<strong>标签
通过js的方式创建一个div标签，并且返回到变量box里面去
var box = document.createElement('div');
console.log(box); // <div></div>然而这个div标签js拿着，给它加了点属性
var box = document.createElement('div');
box.innerHTML = '123'; // 加属性
console.log(box); // "<div>123</div>"body调用appendChild()方法把创建的div放到页面里面
1). appendChild() 插入页面的方法
2). document.body 是body标签
var box = document.createElement('div');
box.innerHTML = '123';
document.body.appendChild(box);此时再给这个div加上一些修改，页面上的div也会发生改变
var box = document.createElement('div');
box.innerHTML = '123';
document.body.appendChild(box);
box.innerHTML = '笑靥如花堪缱绻';document.createTextNode() 创建文本节点
var text = document.createTextNode('窗前明月光'); // 创建文本节点
document.body.appendChild(text); // 插入到页面document.createComment() 第三个创建注释节点
var comment = document.createComment('this is comment');
document.body.appendChild(comment);document.createDocumentFragment() 还有一个创建文档碎片节点
文档碎片是最后一节课的知识，现在涉及不到，
单独的创建没什么用要配合插入操作。
二、插（剪切操作）
appendChild()
任何一个元素节点都有appendChild方法，可以直接理解成push，在数组的最后一位插入新东西，appendChild方法基本上是一个意思
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0]; // 选中
var text = document.createTextNode('笑靥如花'); // 创建一个文本节点
oDiv.appendChild(text); // div调用appendChild方法把text放进去
// <div>笑靥如花</div>
</script>创建一个span标签插入到div里面，span出现在文字"笑靥如花"后面，因为appendChlid类似于数组的push
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var text = document.createTextNode('笑靥如花');
oDiv.appendChild(text);
var span = document.createElement('span'); // 再创建的span标签
oDiv.appendChild(span); // span标签插入到div里面
// <div>
// 笑靥如花
// <span></span>
// </div>
</script>把已经在页面div里的"笑靥如花"插入到span元素里面去
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var text = document.createTextNode('笑靥如花');
var span = document.createElement('span');
oDiv.appendChild(text);
oDiv.appendChild(span);
span.appendChild(text); // 文本'笑靥如花'再插入到span标签
// 把原来div里的文本"笑靥如花"插入到span里面去
// <div>
// <span>笑靥如花</span>
// </div>
// 原来的文本"笑靥如花"到span里面了，说明appendChild是一种剪切操作
// <div>
// <span>
// 笑靥如花
// </span>
// </div>
</script>把一个页面里已有的部分appendChild到另一个部分就是剪切了
下面看一个更直观的，div调用appendChild()方法把span放到div里面去。
<div></div>
<span></span>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oSpan = document.getElementsByTagName('span')[0];
oDiv.appendChild(oSpan); // 把span插入到div里面
/*
<div>
<span></span>
</div>
*/
</script>div和span本来是兄弟结构，现在span放到div里面去了，再次说明appendChild()是剪切操作
insertBefore()
语法parentNode.insertBefore(a, b) 是一定要父级调用，往父级的里面去插入元素
div.insertBefore(a, b) 一定要分开读
1). div insert a
2). before b
在div内插入一个a元素，a元素的位置再b元素之前
<div>
<span></span>
</div>
<script>
var oDiv = document.getElementsByTagName('div')[0]; // 选出父元素div
var oSpan = document.getElementsByTagName('span')[0]; // 选出子元素span
var strong = document.createElement('strong'); // 创建一个strong
oDiv.insertBefore(strong, oSpan); // 把strong插入到div里面，strong的位置在span之前插入
// strong在span之前被插入
// <div>
// <strong></strong>
// <span></span>
// </div>
</script>三、删
删除节点有两种删法
第一种谋杀，父节点删除自己的子节点
parent.removeChild() 父节点调用一个方法，父级就会把child移除remove掉
<div>
<i>i</i>
<strong>strong</strong>
<span>span</span>
</div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var i = document.getElementsByTagName('i')[0];
console.log(oDiv .removeChild(i)); // <i></i>
// 页面里面就没有i标签了
// <div>
// <strong></strong>
// <span>span</span>
// </div>
</script>页面里面就没有i标签了，控制台返回结果<i></i>，其实是把这个i标签给剪切出来了
第二种自杀，节点自己调用一个方法自尽，自己就消失了
i.remove() <i>标签自杀式删除
<div>
<i>i</i>
<strong>strong</strong>
<span>span</span>
</div>
<script>
var i = document.getElementsByTagName('i')[0];
i.remove();
</script>remove什么都没有返回，真的就是销毁了，remove是es5里的新方法原来没有，原来只有removeChlid，
如果我们想把这个标签剪切出来留着，以后可能还会用那就removeChlid，如果觉得没什么用想删除就直接remove
四、替换
替换方法上镜率不高但是确实是有
替换还是父级调用，方法是parent.replaceChild(new, origin)，意思是拿新的元素 去替换 老的元素（第一个参数是新的，后面的参数是老的）
<div>
<span>span</span>
</div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var OSpan = document.getElementsByTagName('span')[0];
var strong = document.createElement('strong');
var i = document.createElement('i');
oDiv.insertBefore(strong, OSpan);
oDiv.insertBefore(i, strong);
/*
替换前div里面是这样的结构
<div>
<i></i>
<strong></strong>
<span>span</span>
</div>
*/
var p = document.createElement('p'); // 创建一个p标签
oDiv.replaceChild(p, strong); // 第一个参数放新创建的p标签，替换第二个参数strong。返回<strong></strong>
/*
strong的位置变成p了
<div>
<i>i</i>
<p></p>
<span>span</span>
</div>
*/
</script>strong的位置变出p了，原来的stong被剪切出来了返回<strong></strong>
自己做的练习：
上面span元素、strong元素、i元素是js生成的，下面直接用实际元素做替换操作
<div>
<i>i</i>
<strong>strong</strong>
<span>span</span>
</div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oStrong = document.getElementsByTagName('strong')[0];
var p = document.createElement('p'); // 创建一个p标签
oDiv.replaceChild(p, oStrong); // 第一个参数放新的p标签替换strong，返回<strong></strong>
</script>上面这些都是基本的操作，说一下常用的重点
常用的重点
document.createElement(); 增
PARENTNODE.appendChild(); 插
PARENTNODE.insertBefore(a, b); 插
parent.removeChild(); 删
child.remove(); 删
五、Element节点的一些属性（元素节点上的一些属性）
innerHTML
innerText(火狐不兼容)/textContent(老版本IE不好使)
innerHTML 能改变div里面的html内容
直接能获取div里面html内容
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.innerHTML); // "div.innerHTML"直接获取的是div里面的html内容
</script>把div里面的html内容取出来了
inneHTML还可以往div里面写入，写入的是追加还是覆盖呢？
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.innerHTML = '123'; // 写入123是追加还是覆盖呢？
console.log(div); // 是覆盖，自此之后div里只有"123"
</script>原内容被覆盖了，只有追加的"123"
如果想在"123"后面追加"456"怎么办？
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.innerHTML = '123';
div.innerHTML += '456' // "加等于"的意思是innerHTML先取值然后加上"456"再赋回去
console.log(div); // <div>123456</div>
</script>能执行加等于操作的都是可赋值可取值的，可写可读的才能加等于
innerHTML改变一个元素里面的html内容
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.innerHTML = "<span style='background-color:red;color:#fff;font-size:20px;'>123</span>";
/*
结果是这样的
<div><span style="background-color:red;color:#fff;font-size:20px;">123</span></div>
*/
</script>Element.innerHTML 元素点innerHTML，不论是写的还是取的全都是html结构，往里写html结构html就会识别的
innerHTML能赋、能取，它用的几率是比较多的
innerText可以取和写文本内容
取值
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.innerText); // innerText不会管标签，直接把文本内容取出来，返回"123 456"
</script>赋值
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.innerText = 'abc'; // 把原来所有的东西全覆盖了 "<div>abc</div>"
</script>innerText在赋值的时候一点要小心，如果div里面还有其它结构的话，不要赋值，会把结构全覆盖掉，如果结构里只是文本想改文本可以赋值
有一个小的注意点，innerText方法火狐是没有的，火狐里面支持一个方法和innerText效果是一样的叫textContent
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.textContent); // 先取值返回"123 456"
div.textContent= '火狐'; // <div>火狐</div>
</script>但是textContent方法老版本IE没有，现在不用关心那么多知道这个兼容性就行，用的时候一般用innerText就好，innerHTML现在火狐兼容的很好，不兼容也是老版本不兼容，距离现在很遥远之前的版本了
三、Element节点的一些方法（元素节点上的一些属性）
ele.setAttribute()
ele.getAttribute()
元素(Element)节点上的两个方法
setAttribute()
getAttribute()
设置一个行间属性就用 setAttribute( 属性名, 属性值 ) 方法，前面是属性名后面是属性值
给div上面设置了一个 class="demo" 属性
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.setAttribute('class' ,'demo');
console.log(div); // <div class="demo">…</div>
</script>比如给div加一个id，也可以通过js动态操作
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.setAttribute('class' ,'demo');
div.setAttribute('id', 'only'); // 加一个id属性
console.log(div); // <div class="demo" id="only"></div>
</script>取行间属性的值 getAttribute()
取id值只填一个参数就行了
<div>
<span>123</span>
<strong>456</strong>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.setAttribute('class' ,'demo');
div.setAttribute('id', 'only');
console.log(div.getAttribute('id')); // "only"
</script>可以来一个动态的操作，
div什么属性都没有，CSS样式表里面已经设置好了"#lonly"，然后通过js动态的给div加id
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setAttribute</title>
<style>
#only{
font-size: 20px;
color:#fff;
background-color:orange;
}
</style>
</head>
<body>
<div>123</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.setAttribute('id', 'only');
</script>
</body>
</html>还可以当满足一定条件的时候if...再触发setAttribute语句加属性，就可以变成一个动态交互效果了
实际工作中自定义属性的例子
行间的属性可以设置系统没有的属性
A标签后面有一个data-log = 0，往下还是A标签data-log = 1，下面每一个A标签都会有一个data-log这是什么意思呢？
data-log是一个打点的意思，在公司开放的时候要统计每一个可以点击的区域，用户的点击率是多少怎么统计呢？
当我们去点击一区域的时候（区域代表一个元素）上面会有一个唯一的标识叫data-log，点击这个元素的时候，程序会索取这个data-log唯一标识把它发送到服务器，然后服务器来统计接受了多个0多少个1…来代表当前区域被点击了多少次，
然而这个data-log是人工定义的一个属性它没有任何意思，这个属性只是为了储存唯一标识的数据
下面看怎么来设置data-log的值，用getAttribute()取行间样式的属性值
<a href="#" data-log="0">Glee</a>
<script>
var a = document.getElementsByTagName('a')[0];
a.onclick = function(){
console.log(this.getAttribute('data-log')); // 0
}
</script>点击两次A标签出现两个0，然后ajax往服务器上发送就行了
小例子
让下面三个标签的行间有一个this-name属性，属性值是nodeName
<div>祝祖国</div>
<span>国泰</span>
<strong>民安</strong>
<script>
var oAll = document.getElementsByTagName('*'); // 把三个属性都取出来
for(var i = 0; i < oAll.length; i++){
oAll[i].setAttribute('this-name', oAll[i].nodeName);
}
</script>都有我们设置的this-name属性
课堂练习
请编写一段JavaScript脚本，生成下面这段DOM结构。要求，使用标准的DOM方法或属性
<div class="example"> <p class="slogan">中国伟大</p> <strong>复兴</strong> </div>
提示：
dom.className可以写class，建议用setAttribute(）
先生成div、p、strong三个标签，再一层层插入
var div = document.createElement('div');
var p = document.createElement('p');
var strong = document.createElement('strong');
div.setAttribute('class', 'example'); // 给div标签加属性 <div class="example"></div>
p.setAttribute('class', 'slogan'); // 给p标签加属性 <p class="slogan"></p>
var text1 = document.createTextNode('中国伟大'); // 创建文本节点
var text2 = document.createTextNode('复兴'); // 创建文本节点
p.appendChild(text1); // 把文本节点'中国伟大'插入到p标签
strong.appendChild(text2); // 把文本节点'复兴'插入到strong标签
div.appendChild(p); // p标签插入到div
div.appendChild(strong); // strong标签插入到div
document.body.appendChild(div); // 把div标签插入到页面还有简便的方法，不按套路出牌直接创建一个div直接在里面写结构也行
var div = document.createElement('div');
div.setAttribute('class', 'example');
div.innerHTML = '<p class="slogan">中国伟大</p>\<strong>复兴</strong>';
document.body.appendChild(div);改变行间样式class值有一个最简单的方法，提示dom.className可以读写class
var div = document.createElement('div');
div.className = "Glee";
div.id = "lili"; // 改id也能改
console.log(div); // <div class="Glee" id="lili"></div>