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.


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章