dom元素和dom节点_DOM中的节点与元素

dom元素和dom节点

In my early JavaScript learning process, I came across two objects: ‘nodes’ and ‘elements’ which triggered some confusion in my mind. I thought both objects were the same, when in fact, it turns out they are not technically the same because there is a clear distinct difference between both. Let’s sort out that difference between nodes and elements.

在我早期JavaScript学习过程中，我遇到了两个对象：“节点”和“元素”，这引起了我的困惑。 我以为两个对象是相同的，实际上，事实证明它们在技术上并不相同，因为两者之间存在明显的明显差异。 让我们整理一下节点和元素之间的区别。

What’s a node? it is the name of any type of object in the DOM tree. It could be one of the built-in DOM elements such as the document itself, document.head or document.body. A node could be an HTML tag specified in the HTML such as <input>, <div>,<h2>, <p> or it could be a comment node, text node… In fact, a node is any DOM object and every node has a parent, every node is allowed to have one or more children or even zero children.

什么是节点？ 它是DOM树中任何类型的对象的名称。 它可以是内置DOM元素之一，例如文档本身， document.head或document.body。 节点可以是HTML中指定HTML标记，例如<input> ， <div>，<h2>， <p> ，也可以是注释节点，文本节点……实际上， 节点是任何DOM对象，并且每个节点都是节点有一个父节点，每个节点都可以有一个或多个子节点，甚至零个子节点。

What’s an element? An element is a specific type of node, one that can be directly specified in the HTML with an HTML tag and can have properties like an id or a class. can have children, etc.

什么是元素？ 元素是一种特定类型的节点，可以使用HTML标签直接在HTML中指定该节点，并且可以具有诸如id或class之类的属性。 可以有孩子等

Nodes vs Elements: Nodes are all the different components that a webpage is made up of and elements are one type of node.

节点与元素 ：节点是组成网页的所有不同组件，而元素是节点的一种类型。

Let’s have a look on some types of node, their value and description

让我们看一下某些类型的节点，它们的值和描述

The following html element has two children: head (line 3) and body (line 10) and these are two ‘nodes’. The head and body are element nodes. Inside the body (line 12) there is a comment (navbar), it’s one children of the body and it’s a comment node

以下html元素有两个子元素：head(第3行)和body(第10行)，它们是两个“节点”。 头和身体是元素节点。 在主体内部(第12行)有一个注释(导航栏)，它是主体的一个孩子，并且是一个注释节点

Since every node has properties, therefore let’s find out in the console the ones for element node ‘body’.

由于每个节点都有属性，因此让我们在控制台中找到元素节点“ body”的属性。

1. .nodeName property has a return value “Body”

   .nodeName属性的返回值为“ Body”

2. .nodeType property returns a value of 1 which means that body is ELEMENT_NODE.

   .nodeType属性返回值1，表示主体为ELEMENT_NODE。

3. .parentNode shows this element node “Body” has parentNode which is the html element.

   .parentNode示出了该元件节点“正文”具有parentNode是html元素。

4. .children property returns HTML collection,

   .children属性返回HTML集合，

5. .COMMENT_NODE has a return value of 8, which states that we have comment node as of the children of the body.

   .COMMENT_NODE的返回值为8，表示我们在正文的子级中具有注释节点。

That’s all for this topic and thank you for reading this blog.

这就是本主题的全部内容，感谢您阅读此博客。

resources:

资源：

1. https://www.youtube.com/watch?v=y3itGTCseAk

   https://www.youtube.com/watch?v=y3itGTCseAk

2. https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object#:~:text=So%2C%20in%20a%20nutshell%2C%20a,and%20a%20nextSibling%20and%20previousSibling.

   https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object#:~:text=So%2C%20in%20a%20nutshell%2C%20a和％20a％20nextSibling ％20and％20previousSibling。

3. https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

   https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

翻译自: https://medium.com/@issabmsangare/nodes-vs-elements-in-the-dom-1865885d0b9b

dom元素和dom节点