日期:2020-09-24
作者:18届 WRZ
标签:数据可视化
学习D3需要一定的技术基础,包括HTML,CSS,JavaScript等。在这里详细介绍一下HTML DOM。
一.DOM简介
HTML DOM 定义了访问和操作 HTML 文档的标准。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
下图是一个DOM Tree
通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。节点树中的节点彼此拥有层级关系。常用父、子和同胞等术语用于描述这些关系
二.常用DOM对象方法
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
三.DOM元素的创建、增加、删除和替换
1.HTML元素的创建
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p"); //创建一个新的元素
var node=document.createTextNode("This is new.");
para.appendChild(node); //给元素结点添加一个文本结点
var element=document.getElementById("d1"); //获取id为d1的元素
element.appendChild(para); //添加元素
</script>
执行效果
2.HTML元素的添加
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p"); //创建一个新的元素
var node=document.createTextNode("This is new.");
para.appendChild(node); //给元素结点添加一个文本结点
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child); //在id为p1的子节点前面插入新的子节点。
</script>
执行效果
3.HTML元素的删除
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
4.HTML元素的替换
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>