操作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文本标签操作JStest.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);insertBeforevar test01 = document.getElementById('test01'); var test02 = document.getElementById('test02'); var list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(test01,test02);