Mar
10
javascript相关应用(一)
记得大体是从去年做activex时,记录的一些资料.现放出来,供自己查用
一。检测对象是否可用
本条内容由NeiLyi原创。保证其合法以及适用性
1.检测顶级对象是否可用（如document）这内浏览器系统默认对象（主要是考虑不同浏览器的一些默认对象是否在其它上可用）
语句：
if(typeof(Test) == 'undefined' || typeof(Test) == null)
{
alert('test对象不存在');//注意Test为你要检测对象名，不要加引号
}
2.检测对象是否存在某个方法或者属性
语句：
注意：在检测方法时也不用加();而是方法名
if(test.aaa)
{
alert('test对象存在aaa方法或者属性');
}
else
{
alert('test对象不存在aaa方法或者属性');
}
3.检测HTME中是否已经存在某个节点（或者这样说：检测doment是否已经存在某个对象）
if(document.getElementById('aaa'))
{
alert('已经存在aaa此节点');
}
二。常用节点操作方法
对文档中的具体节点进行访问的方法:
document.getElementById()
返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()
返回带有指定名称的对象集合。 注意:Elements,有个s。
document.getElementsByTagName()
返回带有指定标签名的对象集合。注意:Elements,有个s。
生成节点的方法：
createAttribute(name);
针对标签创建由字符串name指定的属性。
myAlign=document.createAttribute("align");
createElement(tagName);
创建标签
myHeading = document.createElement("h1");
createTextNode(string);
创建包含string的文本节点
newText = document.createTextNode("我是一段文字");
插入节点：
insertBefore(newChild,referenceChild)
此方法可在已有的子结点前插入一个新的子结点。
newChild:插入新的节点
referenceChild:指定在哪个子节点前插入节点。
添加节点：
appendChild(newChild)
此方法向已存在的节点添加子结点。新节点会添加(追加) 到任何已存在的子结点之后。
复制节点：
cloneNode(true或false)
此方法将创建指定节点的副本
参数(true或false)指定被复制的节点是否包括原节点的所有属性和子结点。
替换节点：
replaceChild(newChild,oldChild)
此方法可将某个子结点替换为另一个。
newChild:指定新的节点。
oldChild:指定被替换的节点。
删除节点：
removeChild(node)
此方法可以从子结点列表中删除某个节点。
node:指定需要删除的节点。
注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做。在删除指定节点的时候不会出错，但是如果要删除最后一个子结点或者是第一个子结点的时候，就会出现问题。这时候，就需要用一个函数来判断首个子结点的节点类型。
元素节点的节点类型是 1，因此如果首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法，我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
详见这里：w3school
修改文本节点：
appendDate(string)
将传递的字符串(string)附加到文本节点的结束出。
deleteDate(start,length)
从start处开始删除length个字符。
insertDate(start,string)
在start处插入字符，string为要插入的字符。start的开始值为0。
replaceDate(start,length,string)
在start处用string字符串替换length个字符。
splitDate(offset)
规定在offset处分割文本节点
substringDate(start,length)
从start处提取length个字符。
对属性进行操作：
getAttribute(name)
此方法通过名称获取属性的值
name:从中获得属性值的属性
setAttribute(name,value)
此方法创建或改变某个新属性
name:规定要设置的属性名。alue:规定要设置的属性值。
该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性，则该方法将创建一个新属性。
removeAttribute(name)
此方法删除指定的属性。
name:要删除的属性的名称。
三.javascript的常用节点操作方法
appendChild(org.w3c.dom.Node)：为这个节点添加一个子节点，并放在所有子节点的最后，如果这个子节点已经存在，则先把它删掉再添加进去。
getFirstChild()：如果节点存在子节点，则返回第一个子节点，对等的，还有getLastChild()方法返回最后一个子节点。
getNextSibling()：返回在DOM树中这个节点的下一个兄弟节点，对等的，还有getPreviousSibling()方法返回其前一个兄弟节点。
getNodeName()：根据节点的类型返回节点的名称。
getNodeType()：返回节点的类型。
getNodeValue()：返回节点的值。
hasChildNodes()：判断是不是存在有子节点。
hasAttributes()：判断这个节点是否存在有属性。
getOwnerDocument()：返回节点所处的Document对象。
insertBefore(org.w3c.dom.Node new，org.w3c.dom.Node ref)：在给定的一个子对象前再插入一个子对象。
removeChild(org.w3c.dom.Node)：删除给定的子节点对象。
replaceChild(org.w3c.dom.Node new，org.w3c.dom.Node old)：用一个新的Node对象代替给定的子节点对象。
NodeList对象，顾名思义，就是代表了一个包含了一个或者多个Node的列表。可以简单的把它看成一个Node的数组，我们可以通过方法来获得列表中的元素：
GetLength()：返回列表的长度。
Item(int)：返回指定位置的Node对象。
Element对象代表的是XML文档中的标签元素，继承于Node，亦是Node的最主要的子对象。在标签中可以包含有属性，因而Element对象中有存取其属性的方法，而任何Node中定义的方法，也可以用在Element对象上面。
getElementsByTagName(String)：返回一个NodeList对象，它包含了在这个标签中其下的子孙节点中具有给定标签名字的标签。
getTagName()：返回一个代表这个标签名字的字符串。
getAttribute (String)：返回标签中给定属性名称的属性的值。在这儿需要主要的是，应为XML文档中允许有实体属性出现，而这个方法对这些实体属性并不适用。这时候需要用到getAttributeNodes()方法来得到一个Attr对象来进行进一步的操作。
getAttributeNode(String)：返回一个代表给定属性名称的Attr对象。
Attr 对象代表了某个标签中的属性。Attr继承于Node，但是因为Attr实际上是包含在Element中的，它并不能被看作是Element的子对象，因而在DOM中Attr并不是DOM树的一部分，所以Node中的getparentNode()，getpreviousSibling()和 getnextSibling()返回的都将是null。也就是说，Attr其实是被看作包含它的Element对象的一部分，它并不作为DOM树中单独的一个节点出现。这一点在使用的时候要同其它的Node子对象相区别。
需要说明的是，上面所说的DOM对象在DOM中都是用接口定义的，在定义的时候使用的是与具体语言无关的IDL语言来定义的。因而，DOM其实可以在任何面向对象的语言中实现，只要它实现了DOM所定义的接口和功能就可以了。同时，有些方法在DOM中并没有定义，是用IDL的属性来表达的，当被映射到具体的语言时，这些属性被映射为相应的方法。
四.js中innerHTML与innerText的用法与区别
用法：
<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
二。光标定位
按TAB键移动到下一个输入框时，光标停在文本框文字的最后，方便用户继续输入 <script>function moveEnd()
{
var e=event.srcElement;
var r=e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type='text' value='0592' onfocus="moveEnd()">
document.selection.createRange方法document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。http://www.cftea.com/c/2006/12/47MWAA0YIJMDU9JO.asp有关于document.selection更多的属性和方法介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>document.selection 的 createRange</title>
</head>
<body>
<div>请选中这里的部分文字。</div>
<div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>
<script>function Bold()
{ var r = document.selection.createRange(); r.execCommand("Bold");}</script>
</body>
</html>
