Javascript第十二个知识点：Dom

Dom --> document object model 文档对象模型
我们编写的HTML代码中，有许多标签，body、h1、p、div……都可以成为节点。
我们操控dom节点就是使用javascript去操控html里的每一个标签

那么我们该怎么操作dom节点呢？

获取dom节点

首先我们应该获取dom节点

var h1 = document.getElementsByTagName("h1");//通过标签名获得节点
var x = document.getElementById("x");//通过id获得节点
var y = document.getElementsByClassName("y");//通过class获得节点

var father = document.getElementById('father');//获得父亲姐弟啊
var childern = father.children;//通过父亲节点获得所有子节点

改变dom节点内容：

father.innerText = '你好，我是div';
father.style.background = 'orange';

删除dom节点：

<div id="father"><h1>你好，java</h1><h2 id="x">用id得到节点</h2><h3 class="y">用class得到节点</h3>
</div>
<script>//删除节点var father = document.getElementById('father');var son = document.getElementById('x');father.removeChild(son);
</script>

创建节点：

   <div id="father"><h1>你好，java</h1><h2 id="x">用id得到节点</h2><h3 class="y">用class得到节点</h3><h4 id="h4">第四个节点</h4></div><script>//创建一个新节点var hello = document.createElement('p');hello.id = 'hello';hello.innerText = 'hello world';var father = document.getElementById('father');var h1 = father.children[0];father.insertBefore(hello,h1);</script>
//此外创建如script、body这样的节点，我们需要给他说明类型：<script>var sc = document.createElement('script');sc.setAttribute('type','text/javascript');</script>

整体步骤就是：

使用createElement创建新节点
给新节点赋予属性(id、type···)

插入节点：

<p id="z">我是新来的节点</p><div id="father"><h1>你好，java</h1><h2 id="x">用id得到节点</h2><h3 class="y">用class得到节点</h3><h4 id="h4">第四个节点</h4></div><script>//在某个节点之前插入一个节点var new_node = document.getElementById('z');//新节点var x = document.getElementById('x');var father = document.getElementById('father');father.insertBefore(new_node,y);</script>

整体步骤就是：