HTML：DOM知识点总结

日期：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>