首页 > 其他分享> 文章详细

操作DOM对象

2022-07-08 00:36:24 阅读：152 来源： 互联网

标签：DOM 对象 father getElementById let 操作 document 节点

操作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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

操作DOM对象

操作DOM对象（重点）