Javascript with DOM
Javascript with DOM （Javascript与DOM）
What is DOM
What is DOM （什么是DOM）
The Document Object Model (DOM) is a way to represent a programming interface for HTML and XML documents. With the help of DOM we can gain and manipulate tags, classes using commands of Documents object. It gives an opportunity to connect programming languages to the page. （文档对象模型（ DOM ）是表示HTML和XML文档的编程接口的一种方式。在DOM的帮助下，我们可以使用Documents对象的命令获取和操作标签、类。它提供了将编程语言连接到页面的机会。）
DOM Document
DOM Document （DOM文档）
Web page is a document, which we can display in the browser window or as the HTML source. In the both cases Document Object Model shows the same document, which can be manipulated. DOM is a representation of the web page, which we can modify with some scripting language like JavaScript. （网页是一个文档，可以显示在浏览器窗口中，也可以显示为HTML源代码。在这两种情况下，文档对象模型显示相同的文档，可以进行操作。DOM是网页的表示形式，我们可以使用一些脚本语言（如JavaScript ）对其进行修改。）
DOM Document has the important part in your webpage, as it is an owner of all other objects. So when you want to access any object on your webpage you should start with the document. Except that it contains a lot of major properties and methods that enable us to access and fix our website. With the help of DOM we can create new elements and change the existing ones, even remove old elements and attributes. JavaScript can react to existing events and create new ones in the page as well.
The standard
The standard （标准）
JavaScript usually doesn’t use cryptic numeric codes for representing node types. Many other parts of the DOM interface also feel complicated and alien. The reason is that the DOM wasn’t designed only for JavaScript. Quite, it tries to be a language-neutral interface, which can be used in other systems as well—not just for HTML but also for XML - a generic data format with an HTML-like syntax. （JavaScript通常不使用神秘的数字代码来表示节点类型。DOM界面的许多其他部分也感到复杂和陌生。原因是DOM不仅仅是为JavaScript设计的。相反，它试图成为一个语言中立的接口，可以在其他系统中很好地使用，不仅用于HTML ，还可用于XML–一种具有类似HTML语法的通用数据格式。）
Trees
Trees （树木）
Each node has an ability to refer other nodes, children, they also can have their own children. This model is typical of nested structures where elements can contain subelements which are similar to themselves. （每个节点都有能力引用其他节点，孩子，他们也可以有自己的孩子。该模型是典型的嵌套结构，其中元素可以包含与其自身相似的子元素。）
We call that kind of data structure a tree with a branching structure, which has just one, well-defined root and doesn’t have any cycle. In case of the DOM, document.documentElement serves as the root. （我们称这种数据结构为具有分支结构的树，它只有一个明确定义的根，没有任何循环。在DOM的情况下， document.documentElement用作根。）
There are a lot of trees in computer science. Except representing periodic structures such as HTML documents or programs, they are often used to support sorted sets of data. The reason it in the elements, which can usually be found or inserted more completely in a tree than in a flat array. （计算机科学中有很多树。除了表示周期性结构（如HTML文档或程序）外，它们通常用于支持排序的数据集。它在元素中的原因，通常可以在树中找到或更完整地插入，而不是在平面数组中。）
A typical tree has a lot of nodes. The syntax tree had identifiers, values, and also application nodes. The last one may have children, whereas identifiers and values are leaves, or nodes without children. （典型的树有很多节点。语法树具有标识符、值以及应用程序节点。最后一个节点可能有子节点，而标识符和值是叶子节点或没有子节点的节点。）
The same is for the DOM. Here nodes are for elements, which represent HTML tags and determine the structure of the document. They can have child nodes, the example for this kind of node is document.body. Some of these children can also be leaf nodes: pieces of text or comment nodes.
Each DOM node object has a nodeType property. It contains a code which identifies the type of node. （每个DOM节点对象都有一个nodeType属性。它包含一个标识节点类型的代码。）
Let’s imagine that HTML document is just nested set of boxes . Tags like <body> and </body> insert another tags, which contain other tags or text. Here is the example of the document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>w3cdoc Page</h1>
<h2>Welcome to w3cdoc page</h2>
<p>
<a href="https://www.w3cdoc.com/">Link to w3cdoc</a>
</p>
</body>
</html>
Navigating Between Nodes
Navigating Between Nodes （在节点之间导航）
We can easily navigate between nodes using the next properties:
parentNode （上级模块:）
childNodes
firstChild
lastChild
nextSibling （下一个同类）
In this example you can see how you need to get the parent element of an h1. （在此示例中，您可以看到需要如何获取h1的父元素。）
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
let parent = document.getElementById(“head”).parentNode
（let parent = document.getElementById (“head”) .parentNode）
<p>Javascript lets you work with css using <strong>getElementById(...)</strong> function . </p>
<ul>
<li>Create styles</li>
<li>Change styles</li>
<li>Delete styles</li>
<li>Add css classes</li>
<li>Remove css classes</li>
<li> etc... </li>
</ul>
<p><strong>Here is a simple example</strong></p>
</body>
</html>
Moving through the tree
Moving through the tree （穿过树林）
DOM nodes have a lot of links to other nearby nodes. This diagram illustrates it:
There is only only one link of each type in the diagram, where every node has a parentNode feature which points to the node it is part of. Similarly, every element node has a childNodes feature that points to an array-like object holding its children. （图中每种类型只有一个链接，其中每个节点都有一个指向其所属节点的parentNode功能。类似地，每个元素节点都有一个childNodes功能，指向一个包含其子元素的类似数组的对象。）
You could move anywhere in the tree using only these parent and child links. But JavaScript also gives you an opportunity to access to a number of additional acceptable links. The firstChild and lastChild properties have the value null for nodes without children. Similarly, previousSibling and nextSibling point to neighboring nodes - nodes with the same parent that appear immediately before or after the node itself. PreviousSibling will be null for a first child, for a last child, nextSibling also will be null. For a first child, previousSibling will be null, and for the last child, nextSibling will be null as well.
Finding HTML Elements
Finding HTML Elements （查找HTML元素）
Now you know what DOM document is, so we can start getting our first HTML elements. There are a lot of ways to do so using the Javascript DOM here are the most common:
let title = document.getElementById(‘title-id’);