用javascript建立HTML物件的方法

2013-10-28

如果要經由javascript直接傳送某html物件的內容,但是又不透過html本文中的物件來執行動作的話,可以透過javascript來創建該物件來執行相關動作!

比如說如果我有一顆按鈕要進行javascript的指令,而指令的函式是透過取得該按鈕物件的參數來進行判斷的話,我們可以用以下兩種方式來進行函式呼叫和執行:

1. 直接在本文中建立按鈕,將相關參數設定在該物件: ex

2. 直接由javascript中建立按鈕物件: button = {tagName:"div",id:"參數一",className:"參數二"}

 

透過本文建立按鈕物件,如要觸發他,則要在該按鈕進行相關的觸發指令,像是mouseover,mouseout,click等,然後將該物件的內容送至函式中進行解析即可。

透過javascript建立按鈕物件,只需將該物件的定義名稱直接送至函式中進行解析即可。

 

這種方式可以用來解決函式參數為物件時的觸發動作

以下為物件名稱的對照表:

Property / Method Description
element.accessKey Sets or returns the accesskey for an element
element.appendChild() Adds a new child node, to an element, as the last child node
element.attributes Returns a NamedNodeMap of an element's attributes
element.childNodes Returns a NodeList of child nodes for an element
element.className Sets or returns the class attribute of an element
element.clientHeight Returns the viewable height of an element
element.clientWidth Returns the viewable width of an element
element.cloneNode() Clones an element
element.compareDocumentPosition() Compares the document position of two elements
element.dir Sets or returns the text direction of an element
element.firstChild Returns the first child of an element
element.getAttribute() Returns the specified attribute value of an element node
element.getAttributeNode() Returns the specified attribute node
element.getElementsByTagName() Returns a collection of all child elements with the specified tagname
element.getFeature() Returns an object which implements the APIs of a specified feature
element.getUserData() Returns the object associated to a key on an element
element.hasAttribute() Returns true if an element has the specified attribute, otherwise false
element.hasAttributes() Returns true if an element has any attributes, otherwise false
element.hasChildNodes() Returns true if an element has any child nodes, otherwise false
element.id Sets or returns the id of an element
element.innerHTML Sets or returns the content of an element
element.insertBefore() Inserts a new child node before a specified, existing, child node
element.isDefaultNamespace() Returns true if a specified namespaceURI is the default, otherwise false
element.isEqualNode() Checks if two elements are equal
element.isSameNode() Checks if two elements are the same node
element.isSupported() Returns true if a specified feature is supported on the element
element.lang Sets or returns the language code for an element
element.lastChild Returns the last child of an element
element.namespaceURI Returns the namespace URI of an element
element.nextSibling Returns the next node at the same node tree level
element.nodeName Returns the name of an element
element.nodeType Returns the node type of an element
element.nodeValue Sets or returns the value of an element
element.normalize() Joins adjacent text nodes and removes empty text nodes in an element
element.offsetHeight Returns the height of an element
element.offsetWidth Returns the width of an element
element.offsetLeft Returns the horizontal offset position of an element
element.offsetParent Returns the offset container of an element
element.offsetTop Returns the vertical offset position of an element
element.ownerDocument Returns the root element (document object) for an element
element.parentNode Returns the parent node of an element
element.previousSibling Returns the previous element at the same node tree level
element.removeAttribute() Removes a specified attribute from an element
element.removeAttributeNode() Removes a specified attribute node, and returns the removed node
element.removeChild() Removes a child node from an element
element.replaceChild() Replaces a child node in an element
element.scrollHeight Returns the entire height of an element
element.scrollLeft Returns the distance between the left edge of an element and the view
element.scrollTop Returns the distance between the top edge of an element and the view
element.scrollWidth Returns the entire width of an element
element.setAttribute() Sets or changes the specified attribute, to the specified value
element.setAttributeNode() Sets or changes the specified attribute node
element.setIdAttribute()  
element.setIdAttributeNode()  
element.setUserData() Associates an object to a key on an element
element.style Sets or returns the style attribute of an element
element.tabIndex Sets or returns the tab order of an element
element.tagName Returns the tag name of an element
element.textContent Sets or returns the textual content of a node and its descendants
element.title Sets or returns the title attribute of an element
element.toString() Converts an element to a string
   
nodelist.item() Returns the node at the specified index in a NodeList
nodelist.length Returns the number of nodes in a NodeList
 

 

資料來源: W3School http://www.w3schools.com/jsref/dom_obj_all.asp

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【622507】
digishot webdesign studio