After reading a lot of js dom learning materials, I found this one is quite detailed, so I reprint it for everyone to learn about
1. DOM basics
1. Node level
Document--the most The top-level node to which all other nodes are attached.
DocumentType - the object representation of a DTD reference (using the syntax), which cannot contain child nodes.
DocumentFragment - can save other nodes like Document.
Element - represents the content between the start tag and the end tag, such as
Attr - represents a pair of attribute names and attribute values. This node type cannot contain child nodes.
Text - represents the ordinary text between the start tag and the end tag in the XML document, or contained in the CDataSection. This node type cannot contain child nodes.
CDataSection - the object representation of . This node type can only contain text nodes Text as child nodes.
Entity - represents an entity definition in the DTD, such as . This node type cannot contain child nodes.
EntityReference - represents an entity reference, such as ". This node type cannot contain child nodes.
ProcessingInstruction - represents a PI. This node type cannot contain child nodes.
Comment - represents XML comments. This node cannot contain child nodes.
Notation - represents the notation defined in the DTD. The
Node interface defines properties and methods that are included in all node types.
In addition to nodes, DOM also defines some helper objects, which can be used with nodes, but are not a necessary part of the DOM document.
NodeList - Node array, indexed according to value; used to represent the child nodes of an element.
NamedNodeMap - a node table indexed by both values and names; used to represent element characteristics.
2. Access related nodes
Consider the following HTML page in the following sections
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
</html>To access the
element (you should understand that this is the document element of the document), you can use the documentElement attribute of document:Hello world!
<html>
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>removeChild()、replaceChild()、insertBefore()
删除节点
<html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage() {
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>替换
<html>
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>新消息添加到旧消息之前
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP, oOldP);
}
</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>createDocumentFragment()
一旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如想创建十个新段落。
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function addMessages() {
var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement("p");
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="addMessages()">
</body>
</html>6.让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素：
如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同样名称的属性来获取和设置这些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。
7.table方法
为了协助建立表格，HTML DOM给
| 特性/方法 | 说明 |
| caption | 指向 |
| tBodies | |
| tFoot | 指向 |
| tHead | 指向元素（如果存在） |
| rows | 表格中所有行的集合 |
| createTHead() | 创建元素并将其放入表格 |
| createTFood() | 创建 |
| createCpation() | 创建 |
| deleteTHead() | 删除元素 |
| deleteTFood() | 删除 |
| deleteCaption() | 删除 |
| deleteRow(position) | 删除指定位置上的行 |
| insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
| 特性/方法 | 说明 |
| rows | |
| deleteRow(position) | 删除指定位置上的行 |
| insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
| 特性/方法 | 说明 |
| cells | |
| deleteCell(postion) | 删除给定位置上的单元格 |
| insertCell(postion) | 在cells集合的给点位置上插入一个新的单元格 |
8. Traverse the DOM
NodeIterator, TreeWalker
DOM Level2 functions, these functions are only available in Mozilla and Konqueror/Safari, and will not be introduced here.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
