JavaScript操作DOM对象（重点）

七、操作DOM对象（重点）

核心：浏览器网页就是一个DOM树形结构。

1.获得DOM结点

更新：更新DOM节点。
遍历DOM节点：得到DOM节点。
删除：删除一个DOM节点。
添加：添加一个新的节点。
要操作一个DOM节点，就必须要先获得这个DOM节点。
例：

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  //对应CSS选择器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');
  var childrens = father.children;//获取父节点下的所有子节点
</script>

①获得父节点的第一个子节点 father.firstChild
②获得父节点的最后一个子节点 father.lastChild
这是JS的原生代码，以后尽量使用jQuery。

2.更新DOM节点

例：通过id获取节点，其id为id1。
1）操作文本
①修改文本的值 id1.innerText
②可以解析HTML文本标签 id1.innerHTML
2）操作CSS

id1.style.属性 = '值';

注：Ⅰ属性使用字符串包裹。
Ⅱ属性中-转驼峰命名。

3.删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除自己。
例：删除p1。

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  var self = document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self);
  //删除是一个动态的过程，如下操作是不正确的
  father.removeChild(father.children[0]);
  father.removeChild(father.children[1]);
  father.removeChild(father.children[2]);
</script>

注：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

4.创建和插入DOM节点

当获得了某个DOM节点，假设这个DOM节点是空的，可以通过innerHTML就可以增加一个元素了。但是如果这个DOM节点已经存在元素了，就不会这样操作，会产生覆盖。
1）追加
例：

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>
<script>
  var js = document.getElementById('js');
  var list = document.getElementById('list');
  list.appendChild(js);//追加到后面
</script>

结果为

<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
  <p id="js">JavaScript</p>
</div>

2）创建一个新的标签，实现插入

var js = document.getElementById('js');
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello World';
list.appendChild(newP);//创建的p标签追加到list中
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
body.appendChild(myScript);
//可以创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';//设置style的标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);

3）insertBefore
语法：

要包含的节点.insertBefore(newNode,targetNode);

例：在ee的前面插入js

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);