Home > Web Front-end > JS Tutorial > A collection of commonly used object attributes for JavaScript operations on XML/HTML_javascript skills

A collection of commonly used object attributes for JavaScript operations on XML/HTML_javascript skills

WBOY
Release: 2016-05-16 15:34:25
Original
1077 people have browsed it

Node object properties

childNodes—returns the node list from node to child node

firstChild—Returns the first child node of the node.
lastChild—Returns the last child node of the node.

nextSibling—Returns the sibling node immediately following the node.

nodeName—Returns the name of the node, according to its type.
nodeType—Returns the type of node.
nodeValue—Sets or returns the value of a node, according to its type.

ownerDocument—Returns the root element of the node (document object).

parentNode—Returns the parent node of the node.

previousSibling—Returns the sibling node immediately preceding the node.

text—Returns the text of the node and its descendants (IE only).

xml - Returns the XML of the node and its descendants (IE only).

Methods of node objects

appendChild()—Adds a new child node to the end of the node's child node list.

cloneNode()—Copy node.

hasChildNodes()—determines whether the current node has child nodes.

insertBefore()—Inserts a new child node before the specified child node.

normalize()—Merge adjacent Text nodes and delete empty Text nodes.

removeChild()—Removes (and returns) the specified child node of the current node.

replaceChild()—Replace a child node with a new node.

Exclusively for IE6

selectNodes()—Query select nodes using an XPath expression.

selectSingleNode()—Finds a node that matches the XPath query.

transformNode()—Convert a node to a string using XSLT.

transformNodeToObject()—use XSLT to transform a node into a document.

NodeList object

length – Returns the number of nodes in the node list.

item()—Returns the node at the specified index number in the node list.

For example:

Javascript code

xmlDoc = loadXMLDoc(“books.xml”); 
var x = xmlDoc.getElementsByTagName(“title”); 
document.write(“title element:” + x.length); 
Copy after login

Output: title element:4

Javascript code

var y = xmlDoc.documentElement.childNodes; 
document.write(y.item(0).nodeName); 
Copy after login

Output: book

NamedNodeMap object

length—Returns the number of nodes in the list.

getNamedItem()—Returns the specified node. (by name)

item()—Returns the node at the specified index number.

removeNamedItem()—Removes the specified node (based on name).

For example:

Javascript code

xmlDoc = loadXMLDoc(“books.xml”); 
var x = xmlDoc.getElementsByTagName(“book”); 
document.write(x.item(0).attributes.length); 
Copy after login

Output: 1

Javascript code

document.write(x.item(0).attributes.getNamedItem(“category”); 
Copy after login

Output: COOKING

Javascript code

x.item(0).attributes.removeNamedItem(“category”); 
Copy after login

Delete the category attribute of the first book element

Document object represents the entire XML document.

Properties of Document object.

async—Specifies whether the download of XML files should be processed synchronously.

childNodes—Returns a list of nodes that are child nodes of the document.

doctype—Returns the document type declaration associated with the document.

documentElement—Returns the child node of the document.

firstChild—Returns the first child node of the document.

implementation—Returns the DOMImplementation object that handles this document. (IE does not have it)

lastChild—Returns the last child node of the document.

nodeType—Returns the node type.

nodeName—Returns the name of the node based on its type.

nodeValue—Returns the value of the node based on its type.

text—Returns the text of the node and its descendants (IE only).

xml - Returns the XML of the node and its descendants (IE only).

Methods of Document object

createAttribute(att_name)—Creates an attribute node with the specified name and returns a new attribute object.
createCDATASection(data)—Creates a CDATA section node.
createComment(data)—Creates a comment node.
createDocumentFragment—Creates an empty DocumentFragment object and returns this object.
createElement(node_name)—Creates an element node.
createEntityReference(name)—Creates an EntityReference object and returns this object. (IE only)
createTextNode(data)—Creates a text node.
getElementById(elementid)—Finds an element with a specified unique ID.
getElementsByTagName(node_name)—Returns all element nodes with the specified name.

For example:

Javascript code

var xmlDoc = loadXMLDoc("book.xml");  
xmlDoc.async = false; 
var book = xmlDoc.getElementsByTagName("book"); 
var newtext1="Special Offer & Book Sale"; 
var newCDATA=xmlDoc.createCDATASection(newtext1); 
book[0].appendChild(newCDATA); 
var newtext2="Revised September 2006"; 
var newComment=xmlDoc.createComment(newtext2); 
book[0].appendChild(newComment); 
var var newel=xmlDoc.createElement('edition'); 
var newtext3=xmlDoc.createTextNode('First'); 
newel.appendChild(newtext3); 
book[0].appendChild(newel); 
document.write("<xmp>" + xmlDoc.xml + "</xmp>"); 
Copy after login

Element 对象的属性
attributes—返回元素的属性的NamedNodeMap
childNodes—返回元素的子节点的NodeList
firstChild—返回元素的首个子节点。
lastChild—返回元素的最后一个子节点。
nextSibling—返回元素之后紧跟的节点。
nodeName—返回节点的名称。
nodeType—返回元素的类型。
ownerDocument—返回元素所属的根元素(document对象)。
parentNode—返回元素的父节点。
previousSibling—返回元素之前紧跟的节点。
tagName—返回元素的名称。
text—返回节点及其后代的文本。(IE-only)
xml—返回节点及其后代得XML。(IE-only)

Element对象的方法

appendChild(node)—向节点的子节点列表末尾添加新的子节点。
cloneNode(true)—克隆节点。
getAttribute(att_name)—返回属性的值。
getAttributeNode(att_name)—以 Attribute 对象返回属性节点。
getElementsByTagName(node_name)—找到具有指定标签名的子孙元素。
hasAttribute(att_name)—返回元素是否拥有指定的属性。
hasAttributes()—返回元素是否拥有属性。
hasChildNodes()—返回元素是否拥有子节点。
insertBefore(new_node,existing_node)—在已有的子节点之前插入一新的子节点。
removeAttribute(att_name)—删除指定的属性。
removeAttributeNode(att_node)—删除指定的属性节点。
removeChild(node)—删除子节点。
replaceChild(new_node,old_node)—替换子节点。
setAttribute(name,value)—添加新的属性或者改变属性的值。
setAttribute(att_node)—添加新的属性。

Javascript代码

x=xmlDoc.getElementsByTagName('book'); 
for(i=0;i<x.length;i++) 
{ 
attnode=x.item(i).getAttributeNode("category"); 
document.write(attnode.name); 
document.write(" = "); 
document.write(attnode.value); 
document.write("<br />"); 
} 
for(i=0;i<x.length;i++){ 
document.write(x[i].getAttribute('category')); 
document.write("<br />"); 
} 
xmlDoc=loadXMLDoc("/example/xdom/books.xml"); 
x=xmlDoc.getElementsByTagName('book'); 
document.write(x[0].getAttribute('category')); 
document.write("<br />"); 
x[0].removeAttribute('category'); 
document.write(x[0].getAttribute('category')); 
var attnode = x[1].getAttributeNode("category"); 
var y = x[1].removeAttributeNode(attnode); 
document.write("<xmp>" + xmlDoc.xml + "</xmp>"); 
function get_lastchild(n) 
{ 
 x = n.lastChild; 
 while(x.noteType!=1){ 
  x = x.previousSibling; 
 } 
 return x; 
} 
function get_firstChild(n){ 
 x = n.firstChild; 
 whild(x.nodeType!=1){ 
 x=x.nextSibling; 
 } 
 return x; 
} 
xmlDoc=loadXMLDoc("books.xml"); 
x=xmlDoc.getElementsByTagName("book")[0]; 
deleted_node=x.removeChild(get_lastchild(x)); 
document.write("Node removed: " + deleted_node.nodeName); 
Copy after login

Attr对象

Attr 对象表示 Element 对象的属性。

name—返回属性的名称。

nodeName—返回节点的名称,依据其类型

nodeType—返回节点的类型。

nodeValue—设置或返回节点的值,依据其类型

ownerDocument—返回属性所属的根元素(document对象)。

specified—如果属性值被设置在文档中,则返回 true,如果其默认值被设置在 DTD/Schema 中,则返回 false。

value—设置或返回属性的值。

text—返回属性的文本。IE-only。

xml—返回属性的 XML。IE-only。

Text对象的属性

data—设置或返回元素或属性的文本。

length—返回元素或属性的文本长度。

Text对象的方法

appendData(string)—向节点追加数据。

deleteData(start,length)—从节点删除数据。

insertData(start,string)— 向节点中插入数据。

replaceData(start,length,string)—替换节点中的数据。

replaceData(offset)— 把一个 Text 节点分割成两个。

substringData(start,length)— 从节点提取数据。

关于JavaScript操作XML/HTML比较常用的对象属性集锦的全部叙述就到此结束了,更多内容请登陆脚本之家官网了解更多,谢谢。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template