操作DOM对象

核心

浏览器网页就是一个Dom树形结构

• 更新：更新Dom节点
• 遍历：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

注：要操作一个Dom节点，必须先获得这个Dom节点

获得DOM节点

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('test01');
var p2 = document.getElementsByClassName('test02');
var father = document.getElementById('father');
    
var childrens = father.children[index]; //获取父节点下的子节点
//father.firstChild;

更新节点

<div id="test">

</div>

<script>
    var test = document.getElementById('test');
</script>

操作文本

test.innerText='abc' //修改文本的值
test.innerHTML='<strong>abc</strong>' 解析HTML文本标签

操作JS

test.style.color = 'red'; //属性使用字符串包裹
test.style.fontSize = '18px'; // font-size 转 fontSize驼峰命名
test.style.padding = '2em';

删除节点

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

<div id="father">
    <h1>标题</h1>
    <p id="test01">xxx</p>
    <p class="test02">xxxxx</p>
</div>

<script>
    var self = document.getElementById('test01');
    var father = test01.parentElement;
    father.removeChild(self);

</script>

注：删除多个节点的时候，children是动态变化的

插入节点

在获得DOM节点时，如果这个节点已经存在元素，就不能再使用innerHTML操作，会产生覆盖。

追加：

<p id="test01">数学</p>
<div id="list">
    <p id="test02">语文</p>
    <p id="test03">英语</p>
    <p id="test04">美术</p>
</div>

<script>
    var test01 = document.getElementById('test01'),
        list = document.getElementById('list');
    
    list.appendChild(test01);
</script>

追加前：

追加后：

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

var test01 = document.getElementById('test01'),
    list = document.getElementById('list'),
    //通过js创建一个新的节点
    test05 = document.createElement('p'); //创建一个p标签
test05.id = 'test05';
test05.innerText = '体育';
list.appendChild(test05)
//list.appendChild(test01);

//创建一个标签节点
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
list.appendChild(script);

//创建一个style标签
var style = document.createElement('style'); //创建一个style标签
style.setAttribute('type','text/css');
style.innerHTML = 'body{background-color: yellow}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(style);

insertBefore

var test01 = document.getElementById('test01');
var test02 = document.getElementById('test02');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(test01,test02);