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行)有一个注释(导航栏),它是主体的一个孩子,并且是一个注释节点
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/2bb9b487b9751dc57bc9004306eac78b.png)
![Image for post](https://i-blog.csdnimg.cn/blog_migrate/bdc5f070a5a20bb423506785f5806889.png)
Since every node has properties, therefore let’s find out in the console the ones for element node ‘body’.
由于每个节点都有属性,因此让我们在控制台中找到元素节点“ body”的属性。
.nodeName property has a return value “Body”
.nodeName属性的返回值为“ Body”
.nodeType property returns a value of 1 which means that body is ELEMENT_NODE.
.nodeType属性返回值1,表示主体为ELEMENT_NODE。
.parentNode shows this element node “Body” has parentNode which is the html element.
.parentNode示出了该元件节点“正文”具有parentNode是html元素。
.children property returns HTML collection,
.children属性返回HTML集合,
.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:
资源:
翻译自: https://medium.com/@issabmsangare/nodes-vs-elements-in-the-dom-1865885d0b9b
dom元素和dom节点