操作DOM对象
作者:互联网
操作DOM对象(重点)
核心
浏览器网页就是一个DOM树形结构!
-
更新:更新DOM节点
-
遍历DOM节点:得到DOM节点
-
删除:删除一个DOM节点
-
添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获得DOM节点
//对应css选择器 let h1 = document.getElementsByTagName('h1'); let p1 = document.getElementById('p1'); let p2 = document.getElementsByClassName('p2'); let father = document.getElementById('father'); let childrens = father.children[index];//获取父节点下的所有子节点 // father.firstChild; // father.lastChild;
这是原生代码,之后我们尽量都使用jQuery();
更新节点
<div id="div1"> </div> <script> let div1 = document.getElementById('div1'); </script>
操作文本
-
div1.innerText='456'修改文本的值
-
div1.innerHTML='123'可以解析HTML文本标签
操作js
div1.style.color = 'red'; //属性使用 字符串 包裹 div1.style.fontSize = '20px';// - 转 驼峰命名问题 div1.style.padding = '2em';
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> let self = document.getElementById('p1'); let father = p1.parentElement; father.removeChild(self); //删除是一个动态的过程 father.removeChild(father.children[0]); father.removeChild(father.children[1]); father.removeChild(father.children[2]); </script>
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加
<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> let js = document.getElementById('js'); let list = document.getElementById('list'); list.append(js);//追加到后面 </script>
效果:
创建一个新的标签,实现插入
<script> let js = document.getElementById('js');//已经存在的节点 let list = document.getElementById('list'); list.append(js); //通过js创建一个新的节点 let newP = document.createElement('p');//创建一个p标签 newP.id = 'newP'; newP.innerText='hello'; list.appendChild(newP); //创建一个新的标签节点(通过这个属性,可以设置任意的值) let myScript = document.createElement('myScript'); myScript.setAttribute('type','text/javascript'); //可以创建一个style标签 let myStyle = document.createElement('style');//创建了一个style标签 myStyle.setAttribute('type','text/css'); myStyle.innerHTML='body{background-color: #60bcc7;}';//设置标签内容 document.getElementsByTagName('head')[0].appendChild(myStyle); </script>
insertBefore
let ee = document.getElementById('ee'); let se = document.getElementById('se'); let list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(ee,se);
标签:DOM,对象,father,getElementById,let,操作,document,节点 来源: https://www.cnblogs.com/1982king/p/16456699.html