标签：自己   dom   必须   增删改查   lis   query   item   containe   div   

操作DOM（重点）

核心：浏览器本身就是一个DOM树形结构

DOM的增删改查

• 更新：更新DOM节点

• 遍历DOM节点：得到DOM节点

• 删除：删除一个DOM节点

• 添加：添加一个新的节点

想要操作一个DOM节点就必须先得到这个DOM节点

1. 获得DOM节点

<div id="father">
    <h1>大标题1</h1>
    <h1>大标题2</h1>
    <p id="p1"> p1</p>
    <p class="p2"> p2</p>
</div>

//对于css中的选择器
let h1=document.getElementsByTagName(‘h1‘);
//HTMLCollection(2) [h1, h1]0: h11: h1length: 2__proto__: HTMLCollection
let p1=document.getElementById(‘p1‘);
//<p id=?"p1">? p1?</p>?
let p2=document.getElementsByClassName(‘p2‘);
//HTMLCollection [p.p2]
let father=document.getElementById(‘father‘);
?
let childrens=father.childrenn//获取父亲节点下的所有子节点
//father.firstchild
//father.listchild

这是原生的代码，之后会使用jQuery()来替换此类方法

2. 更新节点

<script>
    let father=document.getElementById(‘father‘);
</script>
<div id="father">
</div>

操作文本

• father.innerText=‘好耶‘;

• father.innerHTML=‘<strong>好耶<strong>‘

操作CSS

father.style.color=‘red‘;
father.style.fontSize=‘25px‘;
father.style.padding=‘10px‘;

在操作css的时候要注意属性要是用字符串包裹，-要转成驼峰命名

3. 删除节点

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

<script>
    let self=document.getElementById(‘p1‘);
    let father=self.parentElement;
    father.removeChild(self)
    
    //删除是一个动态的过程：
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>
?
<div id="father">
    <h1>大标题1</h1>
    <h1>大标题2</h1>
    <p id="p1"> p1</p>
    <p class="p2"> p2</p>
</div>
?

在删除多个节点的时候要注意，删除了一个节点后children的地址会变化，这是一个动态的过程

4. 插入节点

插入节点首先需要获得DOM节点，如果这个节点是空的，那么通过innerHTML方法就可以增加元素了，但是如果已经有元素了就不能用这种方法来新增，因为这个方法会覆盖原有的数值。

追加：

<p id="js"> JavaScript</p>
<div id="father">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

let js=document.getElementById(‘js‘);
let father=document.getElementById(‘father‘);
?
father.appendChild(js);

看效果更像是移动的一个p标签的位置，但是这个p标签可以通过JS来动态创建，实际上就是创建一个再插入到需要的位置

let newP=document.createElement(‘p‘);//创建一个p标签
newP.id=‘newp‘;
newP.innerText=‘新的P标签‘;
fatehr.appendChild(newP);
?
//创建一个标签节点
let myScript=document.createElement(‘scropt‘);
myScript.setAttribute(‘type‘,‘text/javascript‘);//这是一种万能的创建方式，该属性可以设置任意得到值 key:value
?
let body=document.getElementsByTagName(‘body‘)[0];//获取body是数组所以需要用下标来精确
body.setAttribute(‘style‘,‘background:pink‘);

insert

let ee=document.getElementById(‘ee‘);
let js=document.getElementById(‘js‘);
let father=document.getElementById(‘father‘);
//insertBefore(要插入的节点，要插入节点的位置)
father.insertBefore(js,ee);

JS-DOM

标签：自己   dom   必须   增删改查   lis   query   item   containe   div   

原文地址：https://www.cnblogs.com/Share-my-life/p/14823762.html