JS-DOM

Posted 2021-05-29 Si人

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