15- 操作 DOM 对象
<body>
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
id1.innerText='456';
id1.innerHTML='<strong>789</strong>'
</script>
</body>
id1.innerText='456'; 不会解析 html 文本标签
id1.innerHTML='<strong>789</strong>' 会解析 html 文本标签
总而言之 innerHTML 比 innerText 更强大，用 innerHTML 就行
操作 js
<body>
<div id="id1">
123
</div>
<script>
var id1=document.getElementById('id1');
id1.style.color='red';
id1.style.fontSize='20px';
</script>
[](()删除 DOM 节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1= document.getElementById('p1')
var father= document.getElementById('father')
father.removeChild(p1);
</script>
</body>
注意删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意！
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1= document.getElementById('p1')
var fath 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 er= document.getElementById('father')
//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);//会报错
</script>
</body>
[](()插入节点
追加一个节点
<body>
<p id="js">javascript</p>
<div id="list">
<p id="ee">javaee</p>
<p id="se">javase</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js); //追加
</script>
</body>
创建一个新的节点
<body>
<p id="js">javascript</p>
<div id="list">
<p id="ee">javaee</p>
<p id="se">javase</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list'); //创建一个新的节点
//相当于<p id="newP">hello</p>
var newP=document.createElement('p');
还未添加个人签名 2022.04.13 加入
还未添加个人简介
评论