JS笔记-熟悉DOM元素中的各种属性

今天在看别人的JS原生代码的时候，突然发现了很多此前没有看过的属性，例如：documentElement, nodeName, nodeValue, nextSibling, firstChild等。在代码中，恰当的运用了这些属性，达到了事半功倍的效果，非常便利、好用。于是乎，我翻阅了一些资料，总结了一下关于DOM元素的基本属性：

Today, when I was reading the JavaScript codes written by others, I found out a lot of attributes that I've never seen before, e.x.: documentElement, nodeName, nodeValue, nextSibling, firstChild. In those codes, I known
that using those attributes appropiately could be very helpful and handy. So, I've got back to look up some files, and summarize the basic attributes of DOM elements.

从DOM元素开始，我们先温习一下吧！

Let's start from DOM elements, and have some reviews before!

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员增删改页面的某一部分。通过DOM，我们可以很好的操纵页面，以达到致使页面发生内容上、外观上的变化的效果。

DOM(document object model) is an API for HTML and XML documents. DOM describes a hierarchical node trees, which allows developers to add, delete or modify a part of the pages. Through DOM, we can manipulate pages easily,
in order to change the content or appearance of pages.

节点是DOM中非常重要的一个部分，是DOM中的根本对象。DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点可以分为很多种类型。

Node is a very important part of DOM, which is the fundamental object of DOM. DOM can describes every HTML or XML document into a hierarchical structure. Node can be split into many types.

1、Node类型

1/ Node type

DOM1级定义了一个Node接口，该接口由DOM中的所有节点类型实现。JS中的所有节点类型都继承自Node类型。

DOM level 1 defines a Node interface, which make up by all the DOM nodes. All the node types of JavaScript are inherited by Node type.

1.1、nodeType属性

有12种。其中常用的有：Node.ELEMENT_NODE(1), Node.TEXT_NODE(3), Node.DOCUMENT_NODE(9)。

There are 12 kinds of this attribute. Those which is frequently-used are: Node.ELEMENT_NODE(1), Node.TEXT_NODE(3), Node.DOCUMENT_NODE(9).

开发人员最常用的就是元素(element)和文本(text)节点。

Developers are fond of the element and type nodes best.

1.2、nodeName和nodeValue属性

nodeName代表节点的名称，nodeValue代表节点的值。如果节点是元素节点，则nodeName保存的是元素的标签名，nodeValue则始终为null。

nodeName represents the name of node, nodeValue means the value of it. If the node is element node, then nodeName preserves the tag name of the element,and nodeValue will always equals
to null.

1.3、childeNodes属性

每个节点都有一个childNodes属性，其中保存着一个nodeList对象，保存着节点中的子节点。

Every node has a childNodes attribute, which preserves a nodeList object inside, keeping the sub-nodes of the node.

可以通过someNode.childNodes[0] 或 someNode.childNodes.items(0) 访问。

We can access it by someNode.childNodes[0] or someNode.childNodes.items(0) .

我们可以通过对nodeList对象转化为Array对象，从而使用Array对象中的方法：

We can transform nodeList object into Array object, thus nodeList object can use the functions of Array object.

var arrayOfNodes = Array.prototype.slice.call( someNode.childNodes );

var arrayOfNodes = [].slice.call( someNode.childNodes );

1.4、parentNode属性

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。

Each node has a parentNode attribute, which points to the father node in document tree.

1.5、previousSibling和nextSibling属性

previousSibling：前一个兄弟节点（列表中的第一个节点为null），nextSibling：后一个兄弟节点（列表中的最后一个节点为null）。

previousSibling: the previous sibling of the node(the first node in list has no previous sibling.), nextSibling: the next sibling of the node(the latest node in list has nonext sibling)

1.6、firstChild和lastChild属性

firstChild：父节点的第一个子节点，lastChild：父节点的最后一个子节点。

firstChild: the first child of the node, lastChild: the latest child of the node.

1.7、ownerDocument属性

所有节点都有的属性，指向表示整个文档的文档节点——document。

All the node owns this attribute, which points to the document node representing whole document.