操作DOM对象
DOM:文档对象模型
核心
浏览器网页就是一个DOM树形结构
- 更新:更新DOM节点
- 遍历:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要操作一个DOM节点,就必须先获取这个DOM节点
获得DOM节点
<div id="father">
<h1>标题一</h1>
<p1 id="p1">p1</p1>
<p1 class="p2">p2</p1>
</div>
<script>
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
//获取父节点下的所有子节点
let childrens = father.children;
</script>
更新
-
id1.innerText = '123'; //修改文本的值
-
id1.innerHTML = '<strong>123</strong>' //解析HTML文本标签
删除
删除结点的步骤:先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p1 id="p1">p1</p1>
<p1 class="p2">p2</p1>
</div>
<script>
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
father.removeChild(p1);
</script>
插入
把javascript放入div最后一行
<p id="js">JavaScript</p>
<div id="list">
<p id="Java">Java</p>
<p id="Python">Python</p>
<p id="Scheme">Scheme</p>
</div>
如下
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.append(js);
</script>
如果插入的是已有的节点,原节点会从原位置上删除
如果是全新节点,如下所示:
- 添加没有的css元素
<script>
let style = document.createElement('Style');
style.setAttribute('type','text/css');
style.innerHTML = 'p {color : red}';
document.getElementsByTagName('head')[0].append(style);
</script>
-
添加全新的p元素
let style = document.createElement('p'); style.id = "cpp"; style.innerText = "cpp"; document.getElementById('list').append(style);