【学习笔记】DOM对象
DOM：文档对象模型
浏览器网页就是一个DOM树形结构
更新：更新DOM节点
遍历：得到DOM节点，通过ID、class等
删除：删除DOM节点
添加：添加一个新的DOM节点
要操作一个DOM节点，就必须要获得这个DOM节点
-
获得DOM节点
<body> <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> var h1 = document.getElementsByTagName("h1"); var p1 = document.getElementById("p1"); var p2 = document.getElementsByClassName("p2"); var father = document.getElementById("father"); //获取父节点下的所有子节点 var chilrens = father.children father.firstChild; //第一个节点 father.lastChild; //最后一个节点 </script> </body>
-
更新DOM节点
-
操作文本
<body> <div id="id1"> </div> <script> var id1 = document.getElementById('id1') id1.innerText = 'Hello,World'; id1.innerHTML = '<strong>你好</strong>' </script> </body>
innerText 是修改文本的值
innerHTML是解析html文本标签
-
操作css
id1.style.color = 'red' //属性使用字符串包裹 'red' id1.style.fontSize = '50px' //驼峰命名 '50px'
-
-
删除DOM节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<body> <div id="id1"> 1111111 </div> <script> var self = document.getElementById('id1'); var father = self.parentElement; </script> </body>需要注意的是，删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的。
<body> <div id="id1"> 1111111 <p id="id2">123</p> <h1>feegthr</h1> <p>456</p> </div> <script> var self = document.getElementById('id2'); var father = self.parentElement; //删除了第一个子节点，第二个子节点自动变为第一个子节点，所以这样删是错误的 father.removeChild(father.children[0]); father.removeChild(father.children[1]); father.removeChild(father.children[2]); </script> </body>
-
插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素的话，我们在使用innerHTML,就会覆盖原先的元素
所以我们要往里面追加
<body> <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> </body>
通过js创建一个新的节点
//创建节点
var newP = document.createElement('p'); //创建p标签
newP.id = 'idp'; //给p标签设置id
newP.innerHTML = '，你好我是p标签'; //给p标签设置文本内容
list.appendChild(newP); //把p标签加入到list节点中
创建标签节点
//创建标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','test/javascript') //给script标签设置属性
list.appendChild(myScript); //把script追加到list中
创建style标签
//创建style标签
var myStyle = document.createElement('style'); //创建style标签
myStyle.setAttribute('type','text/css'); //为style设置属性
myStyle.innerHTML = 'body{background-color:chartreuse}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle); //追加到head标签中
插入到前面 insertBefore
<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');
var ee = document.getElementById('ee');
list.insertBefore(js,ee);
</script>要包含的节点.insertBefore（新节点，目标节点）
